/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================
   App Layout — Premium
   ============================ */

.app-layout[b-5m694xfigw] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-page);
}

.app-main[b-5m694xfigw] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.app-content[b-5m694xfigw] {
    flex: 1;
    padding: 1.75rem 2rem;
    max-width: 100%;
}

@media (max-width: 768px) {
    .app-content[b-5m694xfigw] {
        padding: 1rem 1rem;
    }
}

/* ============================
   Error UI
   ============================ */

#blazor-error-ui[b-5m694xfigw] {
    color-scheme: light only;
    background: #1a1a1a;
    color: #fff;
    bottom: 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.75rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: 'Manrope', sans-serif;
    font-size: 0.875rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

    #blazor-error-ui .dismiss[b-5m694xfigw] {
        cursor: pointer;
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0.7;
        transition: opacity 0.15s;
    }

    #blazor-error-ui .dismiss:hover[b-5m694xfigw] {
        opacity: 1;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ============================
   Top Navbar — Premium SaaS
   ============================ */

.top-navbar[b-vatslafs4r] {
    background: var(--bg-navbar);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 var(--border-color);
}

.navbar-inner[b-vatslafs4r] {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 1.75rem;
    max-width: 1440px;
    margin: 0 auto;
    gap: 8px;
}

/* ============================
   Brand / Logo
   ============================ */

.navbar-brand[b-vatslafs4r] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-right: 1.75rem;
    flex-shrink: 0;
    transition: var(--transition-fast);
}

.navbar-brand:hover[b-vatslafs4r] {
    opacity: 0.85;
}

.navbar-brand:focus-visible[b-vatslafs4r] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-md);
}

.brand-mark[b-vatslafs4r] {
    flex-shrink: 0;
    display: block;
}

.brand-mark-fill[b-vatslafs4r] {
    fill: var(--brand-primary);
    transition: fill 0.2s ease;
}

.navbar-brand:hover .brand-mark-fill[b-vatslafs4r] {
    fill: var(--brand-primary-hover);
}

/* Pulso sequencial dos três pontos — sinal de "digitando" */
.brand-dot[b-vatslafs4r] {
    animation: brand-dot-pulse-b-vatslafs4r 1.4s ease-in-out infinite;
    transform-origin: center;
}
.brand-dot-1[b-vatslafs4r] { animation-delay: 0s; }
.brand-dot-2[b-vatslafs4r] { animation-delay: 0.2s; }
.brand-dot-3[b-vatslafs4r] { animation-delay: 0.4s; }

@keyframes brand-dot-pulse-b-vatslafs4r {
    0%, 60%, 100% { opacity: 0.45; }
    30% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .brand-dot[b-vatslafs4r] { animation: none; opacity: 1; }
}

.brand-text[b-vatslafs4r] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.035em;
    line-height: 1;
}

/* ============================
   Nav Items (center)
   ============================ */

.navbar-nav[b-vatslafs4r] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.nav-link-wrapper[b-vatslafs4r] {
    display: flex;
}

    .nav-link-wrapper[b-vatslafs4r]  a {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: var(--radius-md);
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--nav-link-color);
        text-decoration: none;
        transition: var(--transition-fast);
        white-space: nowrap;
        letter-spacing: -0.01em;
    }

    .nav-link-wrapper[b-vatslafs4r]  a:hover {
        background: var(--nav-link-hover-bg);
        color: var(--nav-link-hover-color);
    }

    .nav-link-wrapper[b-vatslafs4r]  a.active {
        background: var(--nav-active-bg);
        color: var(--nav-active-color);
        font-weight: 600;
    }

/* ============================
   Theme Toggle
   ============================ */

.btn-theme-toggle[b-vatslafs4r] {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--theme-toggle-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    padding: 0;
    margin-right: 6px;
    flex-shrink: 0;
}

    .btn-theme-toggle:hover[b-vatslafs4r] {
        background: var(--bg-hover);
        border-color: var(--border-input);
        transform: scale(1.05);
    }

    .btn-theme-toggle:focus-visible[b-vatslafs4r] {
        outline: none;
        box-shadow: var(--focus-ring);
        border-color: var(--brand-primary);
    }

/* Alterna ícone lua/sol via CSS variables definidas em app.css */
.icon-moon[b-vatslafs4r] {
    display: var(--icon-moon-display, block);
}

.icon-sun[b-vatslafs4r] {
    display: var(--icon-sun-display, none);
}

/* ============================
   User Menu (right)
   ============================ */

.navbar-end[b-vatslafs4r] {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.dropdown-overlay[b-vatslafs4r] {
    position: fixed;
    inset: 0;
    z-index: 199;
}

.user-menu[b-vatslafs4r] {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.user-menu-trigger[b-vatslafs4r] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 5px 8px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.user-menu-trigger:hover[b-vatslafs4r] {
    background: var(--bg-hover);
    border-color: var(--border-color);
}

.user-menu-trigger:focus-visible[b-vatslafs4r] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--brand-primary);
}

.user-menu-chevron[b-vatslafs4r] {
    color: var(--text-muted);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.user-menu.open .user-menu-chevron[b-vatslafs4r] {
    transform: rotate(180deg);
}

.user-dropdown[b-vatslafs4r] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 210px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    z-index: 200;
    overflow: hidden;
    padding: 6px;
    animation: dropdownIn-b-vatslafs4r 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdownIn-b-vatslafs4r {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.user-dropdown-item[b-vatslafs4r] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    letter-spacing: -0.01em;
}

.user-dropdown-item:hover[b-vatslafs4r] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.user-dropdown-item.logout[b-vatslafs4r] {
    color: var(--danger-color);
}

.user-dropdown-item.logout:hover[b-vatslafs4r] {
    background: var(--danger-bg);
    color: var(--danger-color-strong);
}

.user-dropdown-item:focus-visible[b-vatslafs4r] {
    outline: none;
    box-shadow: var(--focus-ring);
    background: var(--bg-hover);
    color: var(--text-primary);
}

.user-dropdown-item.logout:focus-visible[b-vatslafs4r] {
    box-shadow: var(--focus-ring-danger);
    background: var(--danger-bg);
    color: var(--danger-color-strong);
}

.user-dropdown-divider[b-vatslafs4r] {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 0;
}

.user-dropdown-profile[b-vatslafs4r] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 8px;
}

.user-dropdown-avatar[b-vatslafs4r] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}

.user-dropdown-info[b-vatslafs4r] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.user-dropdown-name[b-vatslafs4r] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.02em;
}

.user-avatar[b-vatslafs4r] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(99,102,241,0.3);
}

.user-name[b-vatslafs4r] {
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--text-secondary);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.btn-logout[b-vatslafs4r] {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    padding: 0;
}

    .btn-logout:hover[b-vatslafs4r] {
        background: var(--danger-bg);
        color: var(--danger-color);
        border-color: var(--danger-border);
    }

.btn-login[b-vatslafs4r] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: var(--radius-md);
    background: var(--brand-primary);
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-fast);
    letter-spacing: -0.01em;
    box-shadow: 0 1px 4px var(--brand-primary-ring);
}

    .btn-login:hover[b-vatslafs4r] {
        background: var(--brand-primary-hover);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px var(--brand-primary-ring);
    }

/* ============================
   Top Nav Link (button style)
   ============================ */

.top-nav-link[b-vatslafs4r] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--nav-link-color);
    text-decoration: none;
    transition: var(--transition-fast);
    white-space: nowrap;
    letter-spacing: -0.01em;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
}

.top-nav-link:hover[b-vatslafs4r] {
    background: var(--nav-link-hover-bg);
    color: var(--nav-link-hover-color);
}

.top-nav-link.active[b-vatslafs4r] {
    background: var(--nav-active-bg);
    color: var(--nav-active-color);
    font-weight: 600;
}

.top-nav-link:focus-visible[b-vatslafs4r] {
    outline: none;
    box-shadow: var(--focus-ring);
    background: var(--nav-link-hover-bg);
    color: var(--nav-link-hover-color);
}

/* ============================
   Admin Dropdown
   ============================ */

.nav-dropdown-wrapper[b-vatslafs4r] {
    position: relative;
}

.top-nav-dropdown-trigger[b-vatslafs4r] {
    /* Inherits .top-nav-link */
}

.nav-chevron[b-vatslafs4r] {
    color: var(--text-muted);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    margin-left: 2px;
}

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

.nav-dropdown-panel[b-vatslafs4r] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    z-index: 200;
    overflow: hidden;
    padding: 6px;
    animation: dropdownIn-b-vatslafs4r 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-dropdown-item[b-vatslafs4r] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.nav-dropdown-item:hover[b-vatslafs4r] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.nav-dropdown-item.active[b-vatslafs4r] {
    background: var(--nav-active-bg);
    color: var(--nav-active-color);
    font-weight: 600;
}

.nav-dropdown-item:focus-visible[b-vatslafs4r] {
    outline: none;
    box-shadow: var(--focus-ring);
    background: var(--bg-hover);
    color: var(--text-primary);
}

.nav-dropdown-section-label[b-vatslafs4r] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 11px 3px;
}

.nav-dropdown-divider[b-vatslafs4r] {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 0;
}

/* ============================
   Mobile Section Label
   ============================ */

.mobile-section-label[b-vatslafs4r] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 12px 3px;
}

/* ============================
   Mobile Toggle
   ============================ */

.mobile-toggle[b-vatslafs4r] {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    padding: 0;
    margin-left: auto;
}

    .mobile-toggle:hover[b-vatslafs4r] {
        background: var(--bg-hover);
    }

    .mobile-toggle:focus-visible[b-vatslafs4r] {
        outline: none;
        box-shadow: var(--focus-ring);
        border-color: var(--brand-primary);
    }

/* ============================
   Mobile Menu
   ============================ */

.mobile-menu[b-vatslafs4r] {
    display: flex;
    flex-direction: column;
    padding: 6px 10px 10px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-navbar);
}

.mobile-link-wrapper[b-vatslafs4r]  a,
button.mobile-link[b-vatslafs4r] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition-fast);
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
    letter-spacing: -0.01em;
}

    .mobile-link-wrapper[b-vatslafs4r]  a:hover,
    button.mobile-link:hover[b-vatslafs4r] {
        background: var(--bg-hover);
        color: var(--text-primary);
    }

    .mobile-link-wrapper[b-vatslafs4r]  a.active {
        background: var(--nav-active-bg);
        color: var(--nav-active-color);
        font-weight: 600;
    }

    .mobile-link-wrapper[b-vatslafs4r]  a:focus-visible,
    button.mobile-link:focus-visible[b-vatslafs4r] {
        outline: none;
        box-shadow: var(--focus-ring);
        background: var(--bg-hover);
        color: var(--text-primary);
    }

    button.mobile-link.logout[b-vatslafs4r] {
        color: var(--danger-color);
    }

        button.mobile-link.logout:hover[b-vatslafs4r] {
            background: var(--danger-bg);
        }

        button.mobile-link.logout:focus-visible[b-vatslafs4r] {
            outline: none;
            box-shadow: var(--focus-ring-danger);
            background: var(--danger-bg);
        }

.mobile-theme-toggle[b-vatslafs4r] {
    color: var(--theme-toggle-color) !important;
}

.mobile-divider[b-vatslafs4r] {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 0;
}

.mobile-user-info[b-vatslafs4r] {
    padding: 8px 12px;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ============================
   Responsive
   ============================ */

@media (max-width: 768px) {
    .navbar-nav[b-vatslafs4r] {
        display: none;
    }

    .navbar-end[b-vatslafs4r] {
        display: none;
    }

    .mobile-toggle[b-vatslafs4r] {
        display: flex;
    }

    .navbar-inner[b-vatslafs4r] {
        padding: 0 1rem;
    }
}

@media (min-width: 769px) {
    .mobile-menu[b-vatslafs4r] {
        display: none !important;
    }

    .mobile-toggle[b-vatslafs4r] {
        display: none !important;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-evdtz9r92l],
.components-reconnect-repeated-attempt-visible[b-evdtz9r92l],
.components-reconnect-failed-visible[b-evdtz9r92l],
.components-pause-visible[b-evdtz9r92l],
.components-resume-failed-visible[b-evdtz9r92l],
.components-rejoining-animation[b-evdtz9r92l] {
    display: none;
}

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


#components-reconnect-modal[b-evdtz9r92l] {
    background-color: var(--bg-card);
    color: var(--text-primary);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    font-family: 'Manrope', sans-serif;
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-evdtz9r92l 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-evdtz9r92l] {
    border: 0;
    background-color: var(--brand-primary);
    color: #fff;
    padding: 8px 20px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    box-shadow: 0 4px 12px var(--brand-primary-ring);
    transition: background-color 0.15s, transform 0.1s;
    font-family: 'Manrope', sans-serif;
}

    #components-reconnect-modal button:hover[b-evdtz9r92l] {
        background-color: var(--brand-primary-hover);
        transform: translateY(-1px);
    }

    #components-reconnect-modal button:active[b-evdtz9r92l] {
        background-color: var(--brand-primary-hover);
        transform: none;
    }

    #components-reconnect-modal button:focus-visible[b-evdtz9r92l] {
        outline: none;
        box-shadow: var(--focus-ring), 0 4px 12px var(--brand-primary-ring);
    }

[data-theme="dark"] #components-reconnect-modal button[b-evdtz9r92l] { color: var(--bg-page); }

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

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

@media (prefers-reduced-motion: reduce) {
    .components-rejoining-animation div[b-evdtz9r92l] { animation: none; opacity: 0.6; }
    #components-reconnect-modal[b-evdtz9r92l] { animation: none; }
}

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

@keyframes components-rejoining-animation-b-evdtz9r92l {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Account/ForgotPassword.razor.rz.scp.css */
/* =========================================================
   ForgotPassword — request reset link (scoped, inside AuthShell)
   ========================================================= */

.fp-head[b-q3rrrcg6vt] { margin-bottom: 24px; }

.fp-title[b-q3rrrcg6vt] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.fp-sub[b-q3rrrcg6vt] {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

.fp-field[b-q3rrrcg6vt] {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.fp-label[b-q3rrrcg6vt] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.fp-input-wrap[b-q3rrrcg6vt] {
    position: relative;
    display: flex;
    align-items: center;
}

.fp-input-icon[b-q3rrrcg6vt] {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}

.fp-input-wrap[b-q3rrrcg6vt]  .fp-input {
    width: 100%;
    padding: 11px 14px 11px 44px;
    border: 1.5px solid var(--border-input);
    border-radius: 10px;
    font-size: 14.5px;
    color: var(--text-primary);
    background: var(--bg-input);
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.fp-input-wrap[b-q3rrrcg6vt]  .fp-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px var(--brand-primary-ring);
}

.fp-input-wrap[b-q3rrrcg6vt]  .fp-input::placeholder { color: var(--text-placeholder); }
.fp-input-wrap[b-q3rrrcg6vt]  .fp-input:disabled { opacity: 0.6; }

.fp-error[b-q3rrrcg6vt] {
    color: #dc2626;
    font-size: 12.5px;
    margin-top: 6px;
    display: block;
}

[b-q3rrrcg6vt] [data-theme="dark"] .fp-error { color: #f87171; }

/* ============ Submit ============ */
.fp-submit[b-q3rrrcg6vt] {
    width: 100%;
    padding: 12px 16px;
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, transform 0.1s, box-shadow 0.18s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 12px var(--brand-primary-ring);
}

.fp-submit:hover:not(:disabled)[b-q3rrrcg6vt] {
    background: var(--brand-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--brand-primary-ring);
}

.fp-submit:active:not(:disabled)[b-q3rrrcg6vt] { transform: scale(0.99); }
.fp-submit:disabled[b-q3rrrcg6vt] { opacity: 0.65; cursor: not-allowed; box-shadow: none; }

[b-q3rrrcg6vt] [data-theme="dark"] .fp-submit { color: var(--bg-page); }

.fp-spinner[b-q3rrrcg6vt] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: fp-spin-b-q3rrrcg6vt 0.7s linear infinite;
}

@keyframes fp-spin-b-q3rrrcg6vt {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .fp-spinner[b-q3rrrcg6vt] { animation: none; }
    .fp-submit:hover:not(:disabled)[b-q3rrrcg6vt] { transform: none; }
}

/* ============ Back link ============ */
.fp-back-row[b-q3rrrcg6vt] {
    text-align: center;
    margin-top: 18px;
}

.fp-back[b-q3rrrcg6vt] {
    color: var(--text-muted);
    font-size: 13px;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
}

.fp-back:hover[b-q3rrrcg6vt] {
    color: var(--brand-primary);
    text-decoration: underline;
}

/* ============ Success actions ============ */
.fp-actions[b-q3rrrcg6vt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.fp-btn-secondary[b-q3rrrcg6vt] {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: 'Manrope', sans-serif;
}

.fp-btn-secondary:hover[b-q3rrrcg6vt] {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}
/* /Components/Pages/Account/ResetPassword.razor.rz.scp.css */
/* =========================================================
   ResetPassword — token-based password reset (scoped)
   ========================================================= */

.rp-head[b-gjktim0eri] { margin-bottom: 24px; }

.rp-title[b-gjktim0eri] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.rp-sub[b-gjktim0eri] {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

/* ============ Loading state ============ */
.rp-state[b-gjktim0eri] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 40px 0;
}

.rp-state p[b-gjktim0eri] {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0;
}

.rp-spinner-lg[b-gjktim0eri] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    animation: rp-spin-b-gjktim0eri 0.8s linear infinite;
}

/* ============ Fields ============ */
.rp-field[b-gjktim0eri] {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}

.rp-label[b-gjktim0eri] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.rp-input-wrap[b-gjktim0eri] {
    position: relative;
    display: flex;
    align-items: center;
}

.rp-input-icon[b-gjktim0eri] {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}

.rp-input-wrap[b-gjktim0eri]  .rp-input {
    width: 100%;
    padding: 11px 14px 11px 44px;
    border: 1.5px solid var(--border-input);
    border-radius: 10px;
    font-size: 14.5px;
    color: var(--text-primary);
    background: var(--bg-input);
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.rp-input-wrap[b-gjktim0eri]  .rp-input.has-toggle { padding-right: 44px; }

.rp-input-wrap[b-gjktim0eri]  .rp-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px var(--brand-primary-ring);
}

.rp-input-wrap[b-gjktim0eri]  .rp-input::placeholder { color: var(--text-placeholder); }
.rp-input-wrap[b-gjktim0eri]  .rp-input:disabled { opacity: 0.6; }

.rp-toggle[b-gjktim0eri] {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.rp-toggle:hover[b-gjktim0eri] {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* ============ Strength meter ============ */
.rp-strength[b-gjktim0eri] {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rp-strength-bar[b-gjktim0eri] {
    flex: 1;
    height: 4px;
    background: var(--border-subtle);
    border-radius: 999px;
    overflow: hidden;
}

.rp-strength-fill[b-gjktim0eri] {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s, background 0.3s;
}

.rp-strength-fill.rp-strength-weak[b-gjktim0eri]   { width: 33%; background: #ef4444; }
.rp-strength-fill.rp-strength-medium[b-gjktim0eri] { width: 66%; background: #f59e0b; }
.rp-strength-fill.rp-strength-strong[b-gjktim0eri] { width: 100%; background: #16a34a; }

.rp-strength-label[b-gjktim0eri] {
    font-size: 11.5px;
    font-weight: 600;
    min-width: 90px;
    text-align: right;
}

.rp-strength-label.rp-strength-weak[b-gjktim0eri]   { color: #ef4444; }
.rp-strength-label.rp-strength-medium[b-gjktim0eri] { color: #f59e0b; }
.rp-strength-label.rp-strength-strong[b-gjktim0eri] { color: #16a34a; }

/* ============ Alert ============ */
.rp-alert[b-gjktim0eri] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 10px;
}

.rp-alert svg[b-gjktim0eri] { flex-shrink: 0; }

[b-gjktim0eri] [data-theme="dark"] .rp-alert {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

/* ============ Submit ============ */
.rp-submit[b-gjktim0eri] {
    width: 100%;
    padding: 12px 16px;
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, transform 0.1s, box-shadow 0.18s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
    text-decoration: none;
    box-shadow: 0 4px 12px var(--brand-primary-ring);
}

.rp-submit:hover:not(:disabled)[b-gjktim0eri] {
    background: var(--brand-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--brand-primary-ring);
}

.rp-submit:active:not(:disabled)[b-gjktim0eri] { transform: scale(0.99); }
.rp-submit:disabled[b-gjktim0eri] { opacity: 0.65; cursor: not-allowed; box-shadow: none; }

[b-gjktim0eri] [data-theme="dark"] .rp-submit { color: var(--bg-page); }

.rp-spinner[b-gjktim0eri] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: rp-spin-b-gjktim0eri 0.7s linear infinite;
}

@keyframes rp-spin-b-gjktim0eri {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .rp-spinner[b-gjktim0eri], .rp-spinner-lg[b-gjktim0eri] { animation: none; }
    .rp-submit:hover:not(:disabled)[b-gjktim0eri] { transform: none; }
}

/* ============ Back link ============ */
.rp-back-row[b-gjktim0eri] {
    text-align: center;
    margin-top: 18px;
}

.rp-back[b-gjktim0eri] {
    color: var(--text-muted);
    font-size: 13px;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
}

.rp-back:hover[b-gjktim0eri] {
    color: var(--brand-primary);
    text-decoration: underline;
}
/* /Components/Pages/Account/SetPassword.razor.rz.scp.css */
/* =========================================================
   SetPassword — invite-flow password setup (scoped)
   ========================================================= */

.sp-head[b-4hp41l6p59] { margin-bottom: 24px; }

.sp-title[b-4hp41l6p59] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.sp-sub[b-4hp41l6p59] {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

/* ============ Loading ============ */
.sp-state[b-4hp41l6p59] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 40px 0;
}

.sp-state p[b-4hp41l6p59] {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0;
}

.sp-spinner-lg[b-4hp41l6p59] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    animation: sp-spin-b-4hp41l6p59 0.8s linear infinite;
}

/* ============ Form ============ */
.sp-form[b-4hp41l6p59] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sp-field[b-4hp41l6p59] {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.sp-label[b-4hp41l6p59] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.sp-input-wrap[b-4hp41l6p59] {
    position: relative;
    display: flex;
    align-items: center;
}

.sp-input-icon[b-4hp41l6p59] {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}

.sp-input-wrap[b-4hp41l6p59]  .sp-input {
    width: 100%;
    padding: 11px 14px 11px 44px;
    border: 1.5px solid var(--border-input);
    border-radius: 10px;
    font-size: 14.5px;
    color: var(--text-primary);
    background: var(--bg-input);
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.sp-input-wrap[b-4hp41l6p59]  .sp-input.has-toggle { padding-right: 44px; }

.sp-input-wrap[b-4hp41l6p59]  .sp-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px var(--brand-primary-ring);
}

.sp-input-wrap[b-4hp41l6p59]  .sp-input::placeholder { color: var(--text-placeholder); }

.sp-toggle[b-4hp41l6p59] {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.sp-toggle:hover[b-4hp41l6p59] {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.sp-error[b-4hp41l6p59] {
    color: #dc2626;
    font-size: 12.5px;
    margin-top: 6px;
    display: block;
}

[b-4hp41l6p59] [data-theme="dark"] .sp-error { color: #f87171; }

/* ============ Strength meter (4 bars) ============ */
.sp-strength[b-4hp41l6p59] {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-strength-bars[b-4hp41l6p59] {
    display: flex;
    gap: 4px;
    flex: 1;
}

.sp-bar[b-4hp41l6p59] {
    height: 4px;
    flex: 1;
    background: var(--border-subtle);
    border-radius: 99px;
    transition: background 0.2s;
}

.sp-bar.filled.weak[b-4hp41l6p59]   { background: #ef4444; }
.sp-bar.filled.fair[b-4hp41l6p59]   { background: #f59e0b; }
.sp-bar.filled.good[b-4hp41l6p59]   { background: #818cf8; }
.sp-bar.filled.strong[b-4hp41l6p59] { background: #16a34a; }

.sp-strength-label[b-4hp41l6p59] {
    font-size: 11.5px;
    font-weight: 600;
    min-width: 64px;
    text-align: right;
}

.sp-strength-label.weak[b-4hp41l6p59]   { color: #ef4444; }
.sp-strength-label.fair[b-4hp41l6p59]   { color: #f59e0b; }
.sp-strength-label.good[b-4hp41l6p59]   { color: var(--brand-primary); }
.sp-strength-label.strong[b-4hp41l6p59] { color: #16a34a; }

/* ============ Alert ============ */
.sp-alert[b-4hp41l6p59] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 13.5px;
    font-weight: 500;
}

.sp-alert svg[b-4hp41l6p59] { flex-shrink: 0; }

[b-4hp41l6p59] [data-theme="dark"] .sp-alert {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

/* ============ Submit ============ */
.sp-submit[b-4hp41l6p59] {
    width: 100%;
    padding: 12px 16px;
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, transform 0.1s, box-shadow 0.18s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
    text-decoration: none;
    box-shadow: 0 4px 12px var(--brand-primary-ring);
}

.sp-submit:hover:not(:disabled)[b-4hp41l6p59] {
    background: var(--brand-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--brand-primary-ring);
}

.sp-submit:active:not(:disabled)[b-4hp41l6p59] { transform: scale(0.99); }
.sp-submit:disabled[b-4hp41l6p59] { opacity: 0.65; cursor: not-allowed; box-shadow: none; }

[b-4hp41l6p59] [data-theme="dark"] .sp-submit { color: var(--bg-page); }

.sp-spinner[b-4hp41l6p59] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: sp-spin-b-4hp41l6p59 0.7s linear infinite;
}

@keyframes sp-spin-b-4hp41l6p59 {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sp-spinner[b-4hp41l6p59], .sp-spinner-lg[b-4hp41l6p59] { animation: none; }
    .sp-submit:hover:not(:disabled)[b-4hp41l6p59] { transform: none; }
}
/* /Components/Pages/Account/Users.razor.rz.scp.css */
/* =========================================================
   Users (scoped) — us- prefix
   ========================================================= */

.us-page[b-p5nbm4bh2m] {
    max-width: 1180px;
    margin: 0 auto;
    font-family: 'Manrope', sans-serif;
}

/* ============ Header ============ */
.us-head[b-p5nbm4bh2m] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.us-title[b-p5nbm4bh2m] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.us-sub[b-p5nbm4bh2m] {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

.us-btn-create[b-p5nbm4bh2m] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--brand-primary);
    color: #fff;
    border: 1.5px solid var(--brand-primary);
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.18s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 12px var(--brand-primary-ring);
}

.us-btn-create:hover[b-p5nbm4bh2m] {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    transform: translateY(-1px);
}

.us-btn-create:active[b-p5nbm4bh2m] { transform: scale(0.98); }

[b-p5nbm4bh2m] [data-theme="dark"] .us-btn-create { color: var(--bg-page); }

/* ============ States ============ */
.us-loading[b-p5nbm4bh2m],
.us-empty[b-p5nbm4bh2m],
.us-denied[b-p5nbm4bh2m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 24px;
    text-align: center;
    color: var(--text-muted);
}

.us-empty-icon[b-p5nbm4bh2m],
.us-denied-icon[b-p5nbm4bh2m] {
    color: var(--text-placeholder);
}

.us-empty h4[b-p5nbm4bh2m],
.us-denied h4[b-p5nbm4bh2m] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    color: var(--text-primary);
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
}

.us-empty p[b-p5nbm4bh2m],
.us-denied p[b-p5nbm4bh2m] {
    color: var(--text-muted);
    font-size: 13.5px;
    margin: 0;
    letter-spacing: -0.01em;
}

.us-alert[b-p5nbm4bh2m] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

[b-p5nbm4bh2m] [data-theme="dark"] .us-alert {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

/* ============ Summary ============ */
.us-summary[b-p5nbm4bh2m] {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 22px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

.us-summary-item[b-p5nbm4bh2m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.us-summary-value[b-p5nbm4bh2m] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.03em;
}

.us-summary-value.is-success[b-p5nbm4bh2m] { color: #16a34a; }
.us-summary-value.is-pending[b-p5nbm4bh2m] { color: #b45309; }

[b-p5nbm4bh2m] [data-theme="dark"] .us-summary-value.is-success { color: #4ade80; }
[b-p5nbm4bh2m] [data-theme="dark"] .us-summary-value.is-pending { color: #fbbf24; }

.us-summary-label[b-p5nbm4bh2m] {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.us-summary-sep[b-p5nbm4bh2m] {
    width: 1px;
    height: 30px;
    background: var(--border-color);
}

/* ============ Table ============ */
.us-table-wrap[b-p5nbm4bh2m] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.us-table[b-p5nbm4bh2m] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.us-table thead tr[b-p5nbm4bh2m] { background: var(--bg-input); }

.us-table th[b-p5nbm4bh2m] {
    padding: 12px 18px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--table-border-header);
    white-space: nowrap;
}

.us-table td[b-p5nbm4bh2m] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--table-border-row);
    vertical-align: middle;
    color: var(--text-primary);
}

.us-table tbody tr:last-child td[b-p5nbm4bh2m] { border-bottom: none; }
.us-table tbody tr[b-p5nbm4bh2m] { transition: background 0.12s; }
.us-table tbody tr:hover td[b-p5nbm4bh2m] { background: var(--table-hover-bg); }

.us-row.is-current td[b-p5nbm4bh2m] { background: var(--brand-primary-light); }

[b-p5nbm4bh2m] [data-theme="dark"] .us-row.is-current td { background: rgba(99, 102, 241, 0.1); }

.us-cell[b-p5nbm4bh2m] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.us-avatar[b-p5nbm4bh2m] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    letter-spacing: -0.02em;
}

.us-name[b-p5nbm4bh2m] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    display: inline;
    letter-spacing: -0.01em;
}

.us-you-badge[b-p5nbm4bh2m] {
    font-size: 10px;
    background: var(--brand-primary-light);
    color: var(--brand-primary);
    padding: 2px 7px;
    border-radius: 999px;
    margin-left: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.us-email[b-p5nbm4bh2m] {
    color: var(--text-muted);
    font-size: 13px;
    word-break: break-all;
}

.us-date[b-p5nbm4bh2m] {
    color: var(--text-muted);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

/* ============ Role badge ============ */
.us-role[b-p5nbm4bh2m] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.us-role.is-admin[b-p5nbm4bh2m] {
    background: var(--metric-violet-bg);
    color: var(--metric-violet-color);
}

.us-role.is-standard[b-p5nbm4bh2m] {
    background: var(--metric-blue-bg);
    color: var(--metric-blue-color);
}

.us-role.is-readonly[b-p5nbm4bh2m] {
    background: var(--bg-input);
    color: var(--text-muted);
}

/* ============ Status ============ */
.us-status[b-p5nbm4bh2m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.us-status.is-active[b-p5nbm4bh2m] { color: #16a34a; }
.us-status.is-inactive[b-p5nbm4bh2m] { color: var(--text-muted); }

[b-p5nbm4bh2m] [data-theme="dark"] .us-status.is-active { color: #4ade80; }

.us-status.is-pending[b-p5nbm4bh2m] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--badge-warning-bg);
    color: var(--badge-warning-color);
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.us-status-dot[b-p5nbm4bh2m] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.us-status-dot.is-online[b-p5nbm4bh2m] { background: #16a34a; }
.us-status-dot.is-offline[b-p5nbm4bh2m] { background: var(--text-placeholder); }

[b-p5nbm4bh2m] [data-theme="dark"] .us-status-dot.is-online { background: #4ade80; }

/* ============ Action buttons ============ */
.us-actions[b-p5nbm4bh2m] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.us-action[b-p5nbm4bh2m] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.us-action:active:not(:disabled)[b-p5nbm4bh2m] { transform: scale(0.97); }
.us-action:disabled[b-p5nbm4bh2m] { opacity: 0.55; cursor: not-allowed; }

.us-action.is-edit[b-p5nbm4bh2m] {
    background: var(--metric-blue-bg);
    color: var(--metric-blue-color);
    border-color: transparent;
}

.us-action.is-edit:hover:not(:disabled)[b-p5nbm4bh2m] {
    background: var(--metric-blue-bg);
    border-color: var(--metric-blue-color);
}

.us-action.is-delete[b-p5nbm4bh2m] {
    background: var(--bg-card);
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.32);
}

.us-action.is-delete:hover:not(:disabled)[b-p5nbm4bh2m] {
    background: rgba(220, 38, 38, 0.06);
    border-color: #dc2626;
}

[b-p5nbm4bh2m] [data-theme="dark"] .us-action.is-delete {
    background: rgba(220, 38, 38, 0.06);
    color: #f87171;
}

.us-action.is-cancel[b-p5nbm4bh2m] {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-color);
    border-color: transparent;
}

.us-action.is-cancel:hover:not(:disabled)[b-p5nbm4bh2m] {
    border-color: var(--badge-warning-color);
}

.us-action.is-instances[b-p5nbm4bh2m] {
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
    border-color: transparent;
}

.us-action.is-instances:hover:not(:disabled)[b-p5nbm4bh2m] {
    border-color: #16a34a;
}

[b-p5nbm4bh2m] [data-theme="dark"] .us-action.is-instances {
    background: rgba(22, 163, 74, 0.12);
    color: #4ade80;
}

/* ============ Spinner ============ */
.us-spinner[b-p5nbm4bh2m] {
    width: 13px;
    height: 13px;
    border: 2px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: us-spin-b-p5nbm4bh2m 0.7s linear infinite;
    display: inline-block;
}

.us-spinner.is-light[b-p5nbm4bh2m] {
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
}

.us-spinner-lg[b-p5nbm4bh2m] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: us-spin-b-p5nbm4bh2m 0.8s linear infinite;
}

@keyframes us-spin-b-p5nbm4bh2m {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .us-spinner[b-p5nbm4bh2m], .us-spinner-lg[b-p5nbm4bh2m] { animation: none; }
    .us-btn-create:hover[b-p5nbm4bh2m] { transform: none; }
    .us-action:active:not(:disabled)[b-p5nbm4bh2m] { transform: none; }
}

/* ============ Modal ============ */
.us-modal-overlay[b-p5nbm4bh2m] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
    animation: us-fade-b-p5nbm4bh2m 0.15s ease-out;
}

@keyframes us-fade-b-p5nbm4bh2m {
    from { opacity: 0; }
    to { opacity: 1; }
}

.us-modal[b-p5nbm4bh2m] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    overflow: hidden;
    box-shadow: var(--shadow-modal);
    animation: us-modal-in-b-p5nbm4bh2m 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes us-modal-in-b-p5nbm4bh2m {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.us-modal.is-invite[b-p5nbm4bh2m] { max-width: 540px; }
.us-modal.is-delete[b-p5nbm4bh2m] { max-width: 440px; }
.us-modal.is-instances[b-p5nbm4bh2m] { max-width: 480px; }

.us-modal-head[b-p5nbm4bh2m] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 22px 0;
    gap: 12px;
}

.us-modal-head h5[b-p5nbm4bh2m] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    color: var(--text-primary);
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.025em;
}

.us-modal-sub[b-p5nbm4bh2m] {
    color: var(--text-muted);
    font-size: 12.5px;
    margin: 4px 0 0;
    letter-spacing: -0.005em;
}

.us-modal-close[b-p5nbm4bh2m] {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.us-modal-close:hover[b-p5nbm4bh2m] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.us-modal-body[b-p5nbm4bh2m] {
    padding: 18px 22px 20px;
}

.us-modal-actions[b-p5nbm4bh2m] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
    margin-top: 14px;
}

/* Modal buttons */
.us-modal-btn[b-p5nbm4bh2m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.us-modal-btn:active:not(:disabled)[b-p5nbm4bh2m] { transform: scale(0.97); }
.us-modal-btn:disabled[b-p5nbm4bh2m] { opacity: 0.55; cursor: not-allowed; }

.us-modal-btn.is-cancel[b-p5nbm4bh2m] {
    background: var(--bg-input);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.us-modal-btn.is-cancel:hover:not(:disabled)[b-p5nbm4bh2m] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.us-modal-btn.is-confirm[b-p5nbm4bh2m] {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}

.us-modal-btn.is-confirm:hover:not(:disabled)[b-p5nbm4bh2m] {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

[b-p5nbm4bh2m] [data-theme="dark"] .us-modal-btn.is-confirm { color: var(--bg-page); }

.us-modal-btn.is-danger[b-p5nbm4bh2m] {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}

.us-modal-btn.is-danger:hover:not(:disabled)[b-p5nbm4bh2m] {
    background: #b91c1c;
    border-color: #b91c1c;
}

/* Delete modal */
.us-delete-icon[b-p5nbm4bh2m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
    border-radius: 50%;
    flex-shrink: 0;
}

[b-p5nbm4bh2m] [data-theme="dark"] .us-delete-icon { color: #f87171; }

.us-delete-title[b-p5nbm4bh2m] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: -0.025em;
}

.us-delete-text[b-p5nbm4bh2m] {
    color: var(--text-secondary);
    font-size: 13.5px;
    margin: 0;
    line-height: 1.55;
    letter-spacing: -0.005em;
}

.us-delete-text strong[b-p5nbm4bh2m] { color: var(--text-primary); }

/* ============ Form ============ */
.us-field[b-p5nbm4bh2m] {
    margin-bottom: 18px;
}

.us-label[b-p5nbm4bh2m] {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.us-input[b-p5nbm4bh2m] {
    width: 100%;
    background: var(--bg-input);
    border: 1.5px solid var(--border-input);
    border-radius: 9px;
    padding: 10px 13px;
    color: var(--text-primary);
    font-size: 13.5px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.us-input:focus[b-p5nbm4bh2m] {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-ring);
}

.us-input.is-error[b-p5nbm4bh2m] { border-color: #dc2626; }
.us-input.is-success[b-p5nbm4bh2m] { border-color: #16a34a; }

.us-input[b-p5nbm4bh2m]::placeholder { color: var(--text-placeholder); }

.us-field-error[b-p5nbm4bh2m] {
    color: #dc2626;
    font-size: 12px;
    margin-top: 5px;
    display: block;
    letter-spacing: -0.005em;
}

[b-p5nbm4bh2m] [data-theme="dark"] .us-field-error { color: #f87171; }

.us-input-wrap[b-p5nbm4bh2m] { position: relative; }
.us-input-wrap .us-input[b-p5nbm4bh2m] { padding-right: 38px; }

.us-input-status[b-p5nbm4bh2m] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

.us-input-status.is-checking[b-p5nbm4bh2m] { color: var(--text-placeholder); }
.us-input-status.is-available[b-p5nbm4bh2m] { color: #16a34a; }
.us-input-status.is-exists[b-p5nbm4bh2m] { color: #dc2626; }

/* Role radio options */
.us-role-options[b-p5nbm4bh2m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.us-role-option[b-p5nbm4bh2m] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: var(--bg-card);
}

.us-role-option input[type=radio][b-p5nbm4bh2m] { display: none; }

.us-role-option:hover[b-p5nbm4bh2m] {
    border-color: var(--text-muted);
    background: var(--bg-hover);
}

.us-role-option.is-selected[b-p5nbm4bh2m] {
    border-color: var(--brand-primary);
    background: var(--brand-primary-light);
}

.us-role-content[b-p5nbm4bh2m] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.us-role-content-head[b-p5nbm4bh2m] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.us-role-desc[b-p5nbm4bh2m] {
    font-size: 12.5px;
    color: var(--text-muted);
    letter-spacing: -0.005em;
    line-height: 1.45;
}

/* Inline alert (in modal) */
.us-alert-inline[b-p5nbm4bh2m] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 9px;
    padding: 10px 13px;
    font-size: 13px;
    margin-top: 10px;
    letter-spacing: -0.005em;
}

[b-p5nbm4bh2m] [data-theme="dark"] .us-alert-inline {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

/* Invite success */
.us-invite-ok[b-p5nbm4bh2m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 12px 0;
}

.us-success-icon[b-p5nbm4bh2m] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

[b-p5nbm4bh2m] [data-theme="dark"] .us-success-icon { color: #4ade80; }

.us-invite-ok h5[b-p5nbm4bh2m] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    color: var(--text-primary);
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.025em;
}

.us-invite-ok p[b-p5nbm4bh2m] {
    color: var(--text-secondary);
    font-size: 13.5px;
    margin: 0;
    letter-spacing: -0.005em;
}

.us-invite-ok p.is-muted[b-p5nbm4bh2m] {
    color: var(--text-muted);
    font-size: 12.5px;
}

.us-invite-ok strong[b-p5nbm4bh2m] { color: var(--text-primary); }

/* Instances modal */
.us-instance-list[b-p5nbm4bh2m] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
    margin-bottom: 6px;
}

.us-instance[b-p5nbm4bh2m] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: var(--bg-card);
}

.us-instance input[type=checkbox][b-p5nbm4bh2m] { display: none; }

.us-instance:hover[b-p5nbm4bh2m] {
    border-color: var(--text-muted);
    background: var(--bg-hover);
}

.us-instance.is-checked[b-p5nbm4bh2m] {
    border-color: #16a34a;
    background: rgba(22, 163, 74, 0.08);
}

.us-instance-info[b-p5nbm4bh2m] {
    flex: 1;
    min-width: 0;
}

.us-instance-header[b-p5nbm4bh2m] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.us-instance-name[b-p5nbm4bh2m] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.us-instance-phone[b-p5nbm4bh2m] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    display: block;
}

.us-instance-dot[b-p5nbm4bh2m] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.us-instance-dot.is-connected[b-p5nbm4bh2m] { background: #16a34a; }
.us-instance-dot.is-disconnected[b-p5nbm4bh2m] { background: var(--text-placeholder); }

[b-p5nbm4bh2m] [data-theme="dark"] .us-instance-dot.is-connected { background: #4ade80; }

.us-instance-check[b-p5nbm4bh2m] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    color: transparent;
}

.us-instance.is-checked .us-instance-check[b-p5nbm4bh2m] {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.us-instances-loading[b-p5nbm4bh2m] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 13px;
    padding: 22px 0;
    justify-content: center;
}

.us-instances-empty[b-p5nbm4bh2m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-placeholder);
    padding: 28px 0;
    text-align: center;
}

.us-instances-empty p[b-p5nbm4bh2m] {
    color: var(--text-muted);
    font-size: 13.5px;
    margin: 0;
}

/* ============ Responsive ============ */
@media (max-width: 768px) {
    .us-table th:nth-child(4)[b-p5nbm4bh2m],
    .us-table td:nth-child(4)[b-p5nbm4bh2m],
    .us-table th:nth-child(5)[b-p5nbm4bh2m],
    .us-table td:nth-child(5)[b-p5nbm4bh2m] { display: none; }

    .us-email[b-p5nbm4bh2m] {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .us-action span:not(.us-spinner)[b-p5nbm4bh2m] { display: none; }
    .us-action[b-p5nbm4bh2m] { padding: 6px 8px; }
    .us-role[b-p5nbm4bh2m] { font-size: 9.5px; padding: 2px 7px; }

    .us-summary[b-p5nbm4bh2m] { gap: 14px; padding: 12px 16px; }
}
/* /Components/Pages/Admin/AdminSubNav.razor.rz.scp.css */
/* ============================
   Admin Sub Navigation — Premium
   ============================ */

.admin-subnav[b-ifyxdswn3f] {
    display: flex;
    gap: 2px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 5px;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    box-shadow: var(--shadow-xs);
    scrollbar-width: none;
}

.admin-subnav[b-ifyxdswn3f]::-webkit-scrollbar {
    display: none;
}

/* ::deep needed because NavLink is a child component —
   its rendered <a> elements don't get the CSS isolation attribute */
[b-ifyxdswn3f] .subnav-link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border-radius: var(--radius-md);
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-fast);
    letter-spacing: -0.01em;
}

    [b-ifyxdswn3f] .subnav-link:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }

    [b-ifyxdswn3f] .subnav-link.active {
        background: var(--brand-primary);
        color: white;
        font-weight: 600;
        box-shadow: 0 2px 8px var(--brand-primary-ring);
    }

        [b-ifyxdswn3f] .subnav-link.active svg {
            stroke: white;
        }

@media (max-width: 768px) {
    .admin-subnav[b-ifyxdswn3f] {
        border-radius: var(--radius-md);
        padding: 4px;
    }

    [b-ifyxdswn3f] .subnav-link {
        padding: 6px 10px;
        font-size: 0.775rem;
    }

        [b-ifyxdswn3f] .subnav-link svg {
            display: none;
        }
}
/* /Components/Pages/Admin/Approvals.razor.rz.scp.css */
/* =========================================================
   Approvals (scoped) — ap- prefix
   ========================================================= */

.ap-page[b-t6t3spenna] {
    max-width: 1100px;
    margin: 0 auto;
    font-family: 'Manrope', sans-serif;
}

/* ============ Header ============ */
.ap-head[b-t6t3spenna] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.ap-title[b-t6t3spenna] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.ap-sub[b-t6t3spenna] {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

.ap-refresh[b-t6t3spenna] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.ap-refresh:hover:not(:disabled)[b-t6t3spenna] {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.ap-refresh:disabled[b-t6t3spenna] {
    opacity: 0.55;
    cursor: not-allowed;
}

.is-spin[b-t6t3spenna] {
    animation: ap-spin-b-t6t3spenna 0.8s linear infinite;
}

@keyframes ap-spin-b-t6t3spenna {
    to { transform: rotate(360deg); }
}

/* ============ States ============ */
.ap-state[b-t6t3spenna] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 80px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.ap-spinner-lg[b-t6t3spenna] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: ap-spin-b-t6t3spenna 0.8s linear infinite;
}

.ap-alert[b-t6t3spenna] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}

[b-t6t3spenna] [data-theme="dark"] .ap-alert {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

.ap-empty[b-t6t3spenna] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 70px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.ap-empty-icon[b-t6t3spenna] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--badge-success-bg);
    color: var(--badge-success-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.ap-empty h3[b-t6t3spenna] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}

.ap-empty p[b-t6t3spenna] {
    color: var(--text-muted);
    font-size: 13.5px;
    margin: 0;
}

/* ============ Summary ============ */
.ap-summary[b-t6t3spenna] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

[b-t6t3spenna] [data-theme="dark"] .ap-summary {
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(22, 163, 74, 0.32);
}

.ap-summary-icon[b-t6t3spenna] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #dcfce7;
    color: #16a34a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[b-t6t3spenna] [data-theme="dark"] .ap-summary-icon {
    background: rgba(22, 163, 74, 0.18);
    color: #4ade80;
}

.ap-summary-text[b-t6t3spenna] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ap-summary-text strong[b-t6t3spenna] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 22px;
    color: #15803d;
    letter-spacing: -0.03em;
    font-weight: 700;
}

[b-t6t3spenna] [data-theme="dark"] .ap-summary-text strong { color: #4ade80; }

.ap-summary-text span[b-t6t3spenna] {
    color: #15803d;
    font-size: 13px;
}

[b-t6t3spenna] [data-theme="dark"] .ap-summary-text span { color: #86efac; }

/* ============ List & cards ============ */
.ap-list[b-t6t3spenna] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ap-card[b-t6t3spenna] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.18s, border-color 0.18s;
    flex-wrap: wrap;
}

.ap-card:hover[b-t6t3spenna] {
    box-shadow: var(--shadow-hover);
    border-color: var(--text-muted);
}

.ap-info[b-t6t3spenna] {
    min-width: 240px;
    flex: 1;
}

.ap-card-head[b-t6t3spenna] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.ap-name[b-t6t3spenna] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.025em;
}

.ap-badge[b-t6t3spenna] {
    font-size: 10.5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ap-badge.is-pending[b-t6t3spenna] {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-color);
}

.ap-badge.is-plan[b-t6t3spenna] {
    background: var(--brand-primary-light);
    color: var(--brand-primary);
}

.ap-meta[b-t6t3spenna] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ap-meta-row[b-t6t3spenna] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12.5px;
}

.ap-meta-label[b-t6t3spenna] {
    color: var(--text-muted);
    font-weight: 600;
    min-width: 88px;
}

.ap-meta-value[b-t6t3spenna] {
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

/* ============ Actions ============ */
.ap-actions[b-t6t3spenna] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.ap-field[b-t6t3spenna] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ap-field label[b-t6t3spenna] {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ap-field input[b-t6t3spenna],
.ap-field select[b-t6t3spenna] {
    padding: 8px 10px;
    border: 1.5px solid var(--border-input);
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: 'Manrope', sans-serif;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ap-field input:focus[b-t6t3spenna],
.ap-field select:focus[b-t6t3spenna] {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-ring);
}

.ap-field.is-narrow input[b-t6t3spenna] { width: 72px; }
.ap-field select[b-t6t3spenna] { width: 120px; }

.ap-buttons[b-t6t3spenna] {
    display: flex;
    gap: 6px;
    align-items: flex-end;
}

.ap-btn[b-t6t3spenna] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
    border: 1.5px solid transparent;
}

.ap-btn:active:not(:disabled)[b-t6t3spenna] { transform: scale(0.97); }
.ap-btn:disabled[b-t6t3spenna] { opacity: 0.55; cursor: not-allowed; }

.ap-btn.is-approve[b-t6t3spenna] {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
}

.ap-btn.is-approve:hover:not(:disabled)[b-t6t3spenna] {
    background: #15803d;
    border-color: #15803d;
}

.ap-btn.is-reject[b-t6t3spenna] {
    background: var(--bg-card);
    color: #dc2626;
    border-color: #fecaca;
}

.ap-btn.is-reject:hover:not(:disabled)[b-t6t3spenna] {
    background: #fef2f2;
    border-color: #dc2626;
}

[b-t6t3spenna] [data-theme="dark"] .ap-btn.is-reject {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

[b-t6t3spenna] [data-theme="dark"] .ap-btn.is-reject:hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.48);
}

.ap-btn.is-ghost[b-t6t3spenna] {
    background: var(--bg-input);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.ap-btn.is-ghost:hover:not(:disabled)[b-t6t3spenna] {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.ap-spinner-sm[b-t6t3spenna] {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ap-spin-b-t6t3spenna 0.7s linear infinite;
}

/* ============ Modal ============ */
.ap-overlay[b-t6t3spenna] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
    animation: ap-fade-b-t6t3spenna 0.15s ease-out;
}

@keyframes ap-fade-b-t6t3spenna {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ap-modal[b-t6t3spenna] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    box-shadow: var(--shadow-modal);
    animation: ap-modal-in-b-t6t3spenna 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

@keyframes ap-modal-in-b-t6t3spenna {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.ap-modal-head[b-t6t3spenna] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.ap-modal-head h3[b-t6t3spenna] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.ap-modal-close[b-t6t3spenna] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.ap-modal-close:hover[b-t6t3spenna] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ap-modal-body[b-t6t3spenna] {
    padding: 18px 20px;
}

.ap-modal-target[b-t6t3spenna] {
    margin: 0 0 12px;
    font-size: 13.5px;
    color: var(--text-secondary);
}

.ap-modal-target strong[b-t6t3spenna] { color: var(--text-primary); }
.ap-modal-target span[b-t6t3spenna] { color: var(--text-muted); }

.ap-modal-label[b-t6t3spenna] {
    display: block;
    font-weight: 700;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.ap-modal-textarea[b-t6t3spenna] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--border-input);
    border-radius: 10px;
    font-size: 13.5px;
    font-family: 'Manrope', sans-serif;
    resize: vertical;
    background: var(--bg-input);
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    letter-spacing: -0.01em;
}

.ap-modal-textarea:focus[b-t6t3spenna] {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-ring);
}

.ap-modal-actions[b-t6t3spenna] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--border-color);
}

@media (prefers-reduced-motion: reduce) {
    .ap-spinner-lg[b-t6t3spenna], .is-spin[b-t6t3spenna], .ap-spinner-sm[b-t6t3spenna] { animation: none; }
    .ap-overlay[b-t6t3spenna], .ap-modal[b-t6t3spenna] { animation: none; }
    .ap-btn:active:not(:disabled)[b-t6t3spenna] { transform: none; }
}

/* ============ Responsive ============ */
@media (max-width: 880px) {
    .ap-card[b-t6t3spenna] {
        flex-direction: column;
        align-items: stretch;
    }
    .ap-actions[b-t6t3spenna] {
        justify-content: space-between;
    }
}

@media (max-width: 576px) {
    .ap-buttons[b-t6t3spenna] { width: 100%; }
    .ap-btn[b-t6t3spenna] { flex: 1; justify-content: center; }
    .ap-field.is-narrow input[b-t6t3spenna] { width: 100%; }
    .ap-field select[b-t6t3spenna] { width: 100%; }
}
/* /Components/Pages/Admin/AuditLogs.razor.rz.scp.css */
/* =========================================================
   Audit Logs (scoped) — al- prefix
   ========================================================= */

.al-page[b-6qs4pn6ot7] {
    max-width: 1400px;
    margin: 0 auto;
    font-family: 'Manrope', sans-serif;
}

/* ============ Header ============ */
.al-head[b-6qs4pn6ot7] {
    margin-bottom: 22px;
}

.al-title[b-6qs4pn6ot7] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.al-sub[b-6qs4pn6ot7] {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

/* ============ Filter bar ============ */
.al-filters[b-6qs4pn6ot7] {
    display: grid;
    grid-template-columns: 1.4fr 1.4fr 1fr 1fr auto;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    align-items: end;
    box-shadow: var(--shadow-sm);
}

.al-field[b-6qs4pn6ot7] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.al-field label[b-6qs4pn6ot7] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.al-input[b-6qs4pn6ot7] {
    width: 100%;
    padding: 9px 11px;
    border: 1.5px solid var(--border-input);
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--text-primary);
    background: var(--bg-input);
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    letter-spacing: -0.01em;
}

.al-input:focus[b-6qs4pn6ot7] {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-ring);
}

.al-filter-actions[b-6qs4pn6ot7] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ============ Buttons ============ */
.al-btn[b-6qs4pn6ot7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1.5px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.al-btn:active:not(:disabled)[b-6qs4pn6ot7] { transform: scale(0.97); }
.al-btn:disabled[b-6qs4pn6ot7] { opacity: 0.55; cursor: not-allowed; }

.al-btn.is-primary[b-6qs4pn6ot7] {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}

.al-btn.is-primary:hover:not(:disabled)[b-6qs4pn6ot7] {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

[b-6qs4pn6ot7] [data-theme="dark"] .al-btn.is-primary { color: var(--bg-page); }

.al-btn.is-ghost[b-6qs4pn6ot7] {
    background: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.al-btn.is-ghost:hover:not(:disabled)[b-6qs4pn6ot7] {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.al-btn-link[b-6qs4pn6ot7] {
    background: none;
    border: none;
    color: var(--brand-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    padding: 9px 8px;
    font-family: 'Manrope', sans-serif;
    transition: color 0.15s;
}

.al-btn-link:hover:not(:disabled)[b-6qs4pn6ot7] {
    color: var(--brand-primary-hover);
    text-decoration: underline;
}

.al-btn-link:disabled[b-6qs4pn6ot7] { opacity: 0.5; cursor: not-allowed; }

/* ============ States ============ */
.al-state[b-6qs4pn6ot7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 70px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.al-spinner-lg[b-6qs4pn6ot7] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: al-spin-b-6qs4pn6ot7 0.8s linear infinite;
}

@keyframes al-spin-b-6qs4pn6ot7 {
    to { transform: rotate(360deg); }
}

.al-alert[b-6qs4pn6ot7] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

[b-6qs4pn6ot7] [data-theme="dark"] .al-alert {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

.al-empty[b-6qs4pn6ot7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.al-empty-icon[b-6qs4pn6ot7] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.al-empty h3[b-6qs4pn6ot7] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}

.al-empty p[b-6qs4pn6ot7] {
    color: var(--text-muted);
    font-size: 13.5px;
    margin: 0;
}

/* ============ Summary ============ */
.al-summary[b-6qs4pn6ot7] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 4px;
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 8px;
}

.al-summary-total[b-6qs4pn6ot7] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.al-summary-label[b-6qs4pn6ot7] { color: var(--text-muted); }
.al-summary-sep[b-6qs4pn6ot7] { color: var(--text-placeholder); }

/* ============ Table ============ */
.al-table-wrap[b-6qs4pn6ot7] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow-x: auto;
    box-shadow: var(--shadow-sm);
}

.al-table[b-6qs4pn6ot7] {
    width: 100%;
    border-collapse: collapse;
}

.al-table th[b-6qs4pn6ot7] {
    padding: 12px 16px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-input);
    white-space: nowrap;
}

.al-table td[b-6qs4pn6ot7] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13.5px;
    color: var(--text-primary);
    vertical-align: top;
}

.al-table tbody tr[b-6qs4pn6ot7] {
    cursor: pointer;
    transition: background 0.12s;
}

.al-table tbody tr:hover[b-6qs4pn6ot7] {
    background: var(--bg-hover);
}

.al-table tbody tr.is-expanded[b-6qs4pn6ot7] {
    background: var(--bg-hover);
}

.al-table tbody tr.al-metadata-row[b-6qs4pn6ot7] {
    cursor: default;
}

.al-ts[b-6qs4pn6ot7] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.al-ts-date[b-6qs4pn6ot7] {
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.al-ts-time[b-6qs4pn6ot7] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.al-badge[b-6qs4pn6ot7] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.al-badge.is-success[b-6qs4pn6ot7] {
    background: var(--badge-success-bg);
    color: var(--badge-success-color);
}

.al-badge.is-warning[b-6qs4pn6ot7] {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-color);
}

.al-badge.is-danger[b-6qs4pn6ot7] {
    background: var(--status-offline-bg);
    color: var(--status-offline-color);
}

.al-badge.is-neutral[b-6qs4pn6ot7] {
    background: var(--chip-bg);
    color: var(--chip-color);
}

.al-actor[b-6qs4pn6ot7] { max-width: 240px; }

.al-actor-email[b-6qs4pn6ot7] {
    font-weight: 600;
    word-break: break-all;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.al-actor-role[b-6qs4pn6ot7] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

.al-target[b-6qs4pn6ot7] { max-width: 320px; }

.al-target-type[b-6qs4pn6ot7] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.al-target-label[b-6qs4pn6ot7] {
    font-weight: 500;
    word-break: break-word;
    color: var(--text-secondary);
    margin-top: 1px;
}

.al-ip[b-6qs4pn6ot7] {
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.al-expand-col[b-6qs4pn6ot7] {
    width: 28px;
    color: var(--text-muted);
}

.al-chev[b-6qs4pn6ot7] {
    transition: transform 0.18s ease;
}

.al-chev.is-rotated[b-6qs4pn6ot7] {
    transform: rotate(180deg);
}

.al-muted[b-6qs4pn6ot7] {
    color: var(--text-muted);
    font-style: italic;
}

.al-metadata-row td[b-6qs4pn6ot7] {
    padding: 0 16px 14px !important;
    background: var(--bg-hover);
}

.al-metadata[b-6qs4pn6ot7] {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    overflow-x: auto;
    white-space: pre;
    line-height: 1.5;
}

/* ============ Pagination ============ */
.al-pagination[b-6qs4pn6ot7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding: 4px;
}

.al-pagination-info[b-6qs4pn6ot7] {
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .al-spinner-lg[b-6qs4pn6ot7] { animation: none; }
    .al-btn:active:not(:disabled)[b-6qs4pn6ot7] { transform: none; }
    .al-chev[b-6qs4pn6ot7] { transition: none; }
}

/* ============ Responsive ============ */
@media (max-width: 900px) {
    .al-filters[b-6qs4pn6ot7] {
        grid-template-columns: 1fr 1fr;
    }
    .al-filter-actions[b-6qs4pn6ot7] {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
    .al-ip[b-6qs4pn6ot7] { display: none; }
    .al-expand-col[b-6qs4pn6ot7] { display: none; }
}

@media (max-width: 576px) {
    .al-filters[b-6qs4pn6ot7] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Admin/Companies.razor.rz.scp.css */
/* =========================================================
   Companies (scoped) — co- prefix
   ========================================================= */

.co-page[b-a6sryuhuut] {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Manrope', sans-serif;
}

/* ============ Header ============ */
.co-head[b-a6sryuhuut] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.co-title[b-a6sryuhuut] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.co-sub[b-a6sryuhuut] {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

.co-cta[b-a6sryuhuut] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.18s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 12px var(--brand-primary-ring);
}

.co-cta:hover[b-a6sryuhuut] {
    background: var(--brand-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--brand-primary-ring);
}

.co-cta:active[b-a6sryuhuut] { transform: scale(0.99); }

[b-a6sryuhuut] [data-theme="dark"] .co-cta { color: var(--bg-page); }

/* ============ States ============ */
.co-state[b-a6sryuhuut] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 80px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.co-spinner-lg[b-a6sryuhuut] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: co-spin-b-a6sryuhuut 0.8s linear infinite;
}

@keyframes co-spin-b-a6sryuhuut {
    to { transform: rotate(360deg); }
}

.co-spinner-sm[b-a6sryuhuut] {
    width: 13px;
    height: 13px;
    border: 2px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: co-spin-b-a6sryuhuut 0.7s linear infinite;
}

.co-spinner-sm.is-light[b-a6sryuhuut] {
    border-color: rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
}

.co-alert[b-a6sryuhuut] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}

.co-alert.is-inline[b-a6sryuhuut] {
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 10px;
}

[b-a6sryuhuut] [data-theme="dark"] .co-alert {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

.co-empty[b-a6sryuhuut] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 70px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    gap: 6px;
}

.co-empty-icon[b-a6sryuhuut] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--brand-primary-light);
    color: var(--brand-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.co-empty h3[b-a6sryuhuut] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.co-empty p[b-a6sryuhuut] {
    color: var(--text-muted);
    font-size: 13.5px;
    margin: 0 0 14px;
}

/* ============ Summary ============ */
.co-summary[b-a6sryuhuut] {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 16px 22px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}

.co-summary-item[b-a6sryuhuut] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.co-summary-value[b-a6sryuhuut] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.co-summary-value.is-success[b-a6sryuhuut] { color: #16a34a; }
.co-summary-value.is-danger[b-a6sryuhuut] { color: #dc2626; }
.co-summary-value.is-warning[b-a6sryuhuut] { color: #b45309; }
.co-summary-value.is-muted[b-a6sryuhuut] { color: var(--text-muted); }

[b-a6sryuhuut] [data-theme="dark"] .co-summary-value.is-success { color: #4ade80; }
[b-a6sryuhuut] [data-theme="dark"] .co-summary-value.is-danger { color: #f87171; }
[b-a6sryuhuut] [data-theme="dark"] .co-summary-value.is-warning { color: #fbbf24; }

.co-summary-label[b-a6sryuhuut] {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.co-summary-divider[b-a6sryuhuut] {
    width: 1px;
    height: 32px;
    background: var(--border-color);
}

/* ============ Table ============ */
.co-table-wrap[b-a6sryuhuut] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow-x: auto;
    box-shadow: var(--shadow-sm);
}

.co-table[b-a6sryuhuut] {
    width: 100%;
    border-collapse: collapse;
}

.co-table th[b-a6sryuhuut] {
    padding: 12px 16px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-input);
    white-space: nowrap;
}

.co-table td[b-a6sryuhuut] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13.5px;
    color: var(--text-primary);
    vertical-align: middle;
}

.co-table tbody tr[b-a6sryuhuut] {
    transition: background 0.12s;
}

.co-table tbody tr:hover[b-a6sryuhuut] {
    background: var(--table-hover-bg);
}

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

.co-tc[b-a6sryuhuut] {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.co-cell[b-a6sryuhuut] {
    display: flex;
    flex-direction: column;
}

.co-cell-name[b-a6sryuhuut] {
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.015em;
}

.co-cell-email[b-a6sryuhuut] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.co-date[b-a6sryuhuut] {
    font-size: 13px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ============ Plan badge ============ */
.co-plan[b-a6sryuhuut] {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
}

.co-plan.is-trial[b-a6sryuhuut] {
    background: var(--badge-unknown-bg);
    color: var(--badge-unknown-color);
}

.co-plan.is-basic[b-a6sryuhuut] {
    background: var(--metric-blue-bg);
    color: var(--metric-blue-color);
}

.co-plan.is-pro[b-a6sryuhuut] {
    background: var(--metric-violet-bg);
    color: var(--metric-violet-color);
}

.co-plan.is-enterprise[b-a6sryuhuut] {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-color);
}

/* ============ Status badge ============ */
.co-status[b-a6sryuhuut] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.co-status.is-active[b-a6sryuhuut] {
    color: #15803d;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.co-status.is-blocked[b-a6sryuhuut] {
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.co-status.is-pending[b-a6sryuhuut] {
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
}

.co-status.is-rejected[b-a6sryuhuut] {
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}

[b-a6sryuhuut] [data-theme="dark"] .co-status.is-active {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.22);
}

[b-a6sryuhuut] [data-theme="dark"] .co-status.is-blocked {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.22);
}

[b-a6sryuhuut] [data-theme="dark"] .co-status.is-pending {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.22);
}

[b-a6sryuhuut] [data-theme="dark"] .co-status.is-rejected {
    color: #9ca3af;
    background: rgba(156, 163, 175, 0.08);
    border-color: rgba(156, 163, 175, 0.18);
}

/* ============ Row actions ============ */
.co-actions[b-a6sryuhuut] {
    display: flex;
    gap: 6px;
}

.co-act[b-a6sryuhuut] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    color: var(--text-secondary);
    padding: 0;
}

.co-act:hover:not(:disabled)[b-a6sryuhuut] {
    transform: translateY(-1px);
}

.co-act:active:not(:disabled)[b-a6sryuhuut] { transform: scale(0.94); }

.co-act:disabled[b-a6sryuhuut] { opacity: 0.55; cursor: not-allowed; }

.co-act.is-edit:hover:not(:disabled)[b-a6sryuhuut] {
    color: #2563eb;
    border-color: #93c5fd;
    background: #eff6ff;
}

.co-act.is-delete:hover:not(:disabled)[b-a6sryuhuut] {
    color: #dc2626;
    border-color: #fca5a5;
    background: #fef2f2;
}

.co-act.is-warning:hover:not(:disabled)[b-a6sryuhuut] {
    color: #d97706;
    border-color: #fcd34d;
    background: #fffbeb;
}

.co-act.is-success:hover:not(:disabled)[b-a6sryuhuut] {
    color: #16a34a;
    border-color: #86efac;
    background: #f0fdf4;
}

[b-a6sryuhuut] [data-theme="dark"] .co-act.is-edit:hover:not(:disabled) {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.36);
}

[b-a6sryuhuut] [data-theme="dark"] .co-act.is-delete:hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.36);
}

[b-a6sryuhuut] [data-theme="dark"] .co-act.is-warning:hover:not(:disabled) {
    background: rgba(217, 119, 6, 0.12);
    border-color: rgba(217, 119, 6, 0.36);
}

[b-a6sryuhuut] [data-theme="dark"] .co-act.is-success:hover:not(:disabled) {
    background: rgba(22, 163, 74, 0.12);
    border-color: rgba(22, 163, 74, 0.36);
}

/* ============ Modal ============ */
.co-overlay[b-a6sryuhuut] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
    animation: co-fade-b-a6sryuhuut 0.15s ease-out;
}

@keyframes co-fade-b-a6sryuhuut {
    from { opacity: 0; }
    to { opacity: 1; }
}

.co-modal[b-a6sryuhuut] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-modal);
    animation: co-modal-in-b-a6sryuhuut 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes co-modal-in-b-a6sryuhuut {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.co-modal-head[b-a6sryuhuut] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
}

.co-modal-head h3[b-a6sryuhuut] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.co-modal-sub[b-a6sryuhuut] {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 4px 0 0;
    letter-spacing: -0.01em;
}

.co-modal-close[b-a6sryuhuut] {
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.co-modal-close:hover[b-a6sryuhuut] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.co-modal-body[b-a6sryuhuut] {
    padding: 20px 24px;
}

.co-modal-foot[b-a6sryuhuut] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
}

/* ============ Form ============ */
.co-field[b-a6sryuhuut] {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}

.co-field label[b-a6sryuhuut] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.co-input[b-a6sryuhuut] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--border-input);
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--text-primary);
    background: var(--bg-input);
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    letter-spacing: -0.01em;
}

.co-input:focus[b-a6sryuhuut] {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-ring);
}

.co-textarea[b-a6sryuhuut] {
    resize: vertical;
    min-height: 80px;
}

.co-row[b-a6sryuhuut] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.co-divider[b-a6sryuhuut] {
    height: 1px;
    background: var(--border-color);
    margin: 18px 0;
}

.co-section[b-a6sryuhuut] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}

.co-hint[b-a6sryuhuut] {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 5px;
    letter-spacing: -0.01em;
}

.co-info[b-a6sryuhuut] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    padding: 10px 12px;
    border-radius: 9px;
    margin-top: 6px;
    letter-spacing: -0.01em;
}

.co-info strong[b-a6sryuhuut] { color: #b45309; }

[b-a6sryuhuut] [data-theme="dark"] .co-info {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

[b-a6sryuhuut] [data-theme="dark"] .co-info strong { color: #fcd34d; }

/* ============ Modal buttons ============ */
.co-btn[b-a6sryuhuut] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.co-btn:active:not(:disabled)[b-a6sryuhuut] { transform: scale(0.97); }
.co-btn:disabled[b-a6sryuhuut] { opacity: 0.6; cursor: not-allowed; }

.co-btn.is-primary[b-a6sryuhuut] {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}

.co-btn.is-primary:hover:not(:disabled)[b-a6sryuhuut] {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

[b-a6sryuhuut] [data-theme="dark"] .co-btn.is-primary { color: var(--bg-page); }

.co-btn.is-ghost[b-a6sryuhuut] {
    background: var(--bg-input);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.co-btn.is-ghost:hover:not(:disabled)[b-a6sryuhuut] {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
    .co-spinner-lg[b-a6sryuhuut], .co-spinner-sm[b-a6sryuhuut] { animation: none; }
    .co-overlay[b-a6sryuhuut], .co-modal[b-a6sryuhuut] { animation: none; }
    .co-cta:hover[b-a6sryuhuut], .co-act:hover[b-a6sryuhuut] { transform: none; }
    .co-btn:active:not(:disabled)[b-a6sryuhuut], .co-act:active:not(:disabled)[b-a6sryuhuut] { transform: none; }
}

/* ============ Responsive ============ */
@media (max-width: 768px) {
    .co-head[b-a6sryuhuut] { flex-direction: column; align-items: flex-start; }
    .co-row[b-a6sryuhuut] { grid-template-columns: 1fr; }
    .co-summary[b-a6sryuhuut] { gap: 14px; padding: 14px; }
    .co-summary-divider[b-a6sryuhuut] { display: none; }
}
/* /Components/Pages/Admin/Dashboard.razor.rz.scp.css */
/* =========================================================
   Admin Dashboard (scoped) — ad- prefix
   ========================================================= */

.ad-page[b-vr4ini8syb] {
    max-width: 1240px;
    margin: 0 auto;
    font-family: 'Manrope', sans-serif;
}

/* ============ Header ============ */
.ad-head[b-vr4ini8syb] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.ad-title[b-vr4ini8syb] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.ad-sub[b-vr4ini8syb] {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

.ad-refresh[b-vr4ini8syb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.ad-refresh:hover:not(:disabled)[b-vr4ini8syb] {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.ad-refresh:disabled[b-vr4ini8syb] {
    opacity: 0.55;
    cursor: not-allowed;
}

.is-spin[b-vr4ini8syb] {
    animation: ad-spin-b-vr4ini8syb 0.8s linear infinite;
}

@keyframes ad-spin-b-vr4ini8syb {
    to { transform: rotate(360deg); }
}

/* ============ States ============ */
.ad-state[b-vr4ini8syb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 80px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.ad-spinner-lg[b-vr4ini8syb] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: ad-spin-b-vr4ini8syb 0.8s linear infinite;
}

.ad-alert[b-vr4ini8syb] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

[b-vr4ini8syb] [data-theme="dark"] .ad-alert {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

/* ============ KPI Cards ============ */
.ad-kpis[b-vr4ini8syb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.ad-kpi[b-vr4ini8syb] {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 18px 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ad-kpi:hover[b-vr4ini8syb] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    border-color: var(--text-muted);
}

.ad-kpi-icon[b-vr4ini8syb] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ad-kpi-icon.is-users[b-vr4ini8syb] {
    background: var(--metric-violet-bg);
    color: var(--metric-violet-color);
}

.ad-kpi-icon.is-instances[b-vr4ini8syb] {
    background: var(--metric-blue-bg);
    color: var(--metric-blue-color);
}

.ad-kpi-icon.is-conversations[b-vr4ini8syb] {
    background: var(--metric-green-bg);
    color: var(--metric-green-color);
}

.ad-kpi-icon.is-sent[b-vr4ini8syb] {
    background: var(--metric-orange-bg);
    color: var(--metric-orange-color);
}

.ad-kpi-info[b-vr4ini8syb] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ad-kpi-value[b-vr4ini8syb] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.ad-kpi-label[b-vr4ini8syb] {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 6px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.ad-kpi-badge[b-vr4ini8syb] {
    font-size: 10.5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-weight: 700;
    margin-top: 7px;
    display: inline-block;
    width: fit-content;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ad-kpi-badge.is-success[b-vr4ini8syb] {
    background: var(--badge-success-bg);
    color: var(--badge-success-color);
}

.ad-kpi-badge.is-warning[b-vr4ini8syb] {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-color);
}

.ad-kpi-detail[b-vr4ini8syb] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 5px;
    letter-spacing: -0.01em;
}

/* ============ Cards (charts containers) ============ */
.ad-row[b-vr4ini8syb] {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 14px;
    margin-bottom: 18px;
}

.ad-card[b-vr4ini8syb] {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.ad-card-head[b-vr4ini8syb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    gap: 12px;
}

.ad-card-title[b-vr4ini8syb] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.025em;
}

.ad-chip[b-vr4ini8syb] {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
}

.ad-empty[b-vr4ini8syb] {
    text-align: center;
    padding: 32px;
    color: var(--text-placeholder);
    font-size: 13.5px;
}

.ad-legend[b-vr4ini8syb] {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-top: 14px;
}

.ad-legend-item[b-vr4ini8syb] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.ad-legend-color[b-vr4ini8syb] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.ad-legend-color.is-sent[b-vr4ini8syb] {
    background: linear-gradient(180deg, #f97316, #ea580c);
}

.ad-legend-color.is-received[b-vr4ini8syb] {
    background: linear-gradient(180deg, #a855f7, #9333ea);
}

/* ============ Delivery Ring ============ */
.ad-ring-wrap[b-vr4ini8syb] {
    display: flex;
    justify-content: center;
    padding: 8px 0;
}

.ad-ring[b-vr4ini8syb] {
    position: relative;
    width: 140px;
    height: 140px;
}

.ad-ring-svg[b-vr4ini8syb] {
    width: 100%;
    height: 100%;
}

.ad-ring-center[b-vr4ini8syb] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.ad-ring-value[b-vr4ini8syb] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #16a34a;
    display: block;
    line-height: 1;
    letter-spacing: -0.04em;
}

[b-vr4ini8syb] [data-theme="dark"] .ad-ring-value {
    color: #4ade80;
}

.ad-ring-label[b-vr4ini8syb] {
    font-size: 10.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin-top: 2px;
    display: block;
}

.ad-delivery-list[b-vr4ini8syb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
}

.ad-delivery-stat[b-vr4ini8syb] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.15s;
}

.ad-delivery-stat:hover[b-vr4ini8syb] {
    background: var(--bg-hover);
}

.ad-delivery-stat.is-total[b-vr4ini8syb] {
    border-top: 1px solid var(--border-subtle);
    margin-top: 4px;
    padding-top: 10px;
    font-weight: 700;
}

.ad-dot[b-vr4ini8syb] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ad-dot.is-delivered[b-vr4ini8syb] { background: #16a34a; }
.ad-dot.is-read[b-vr4ini8syb] { background: #2563eb; }
.ad-dot.is-pending[b-vr4ini8syb] { background: #f59e0b; }

.ad-delivery-label[b-vr4ini8syb] {
    flex: 1;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

.ad-delivery-value[b-vr4ini8syb] {
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ============ Hourly chart ============ */
.ad-hourly-chart[b-vr4ini8syb] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 150px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
    overflow-x: auto;
}

.ad-hbg[b-vr4ini8syb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 28px;
}

.ad-hbg-value[b-vr4ini8syb] {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 3px;
    font-variant-numeric: tabular-nums;
}

.ad-hbar[b-vr4ini8syb] {
    width: 18px;
    border-radius: 5px 5px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    transition: filter 0.15s, transform 0.15s;
}

.ad-hbar:hover[b-vr4ini8syb] {
    filter: brightness(1.12);
    transform: translateY(-2px);
}

.ad-hb.is-sent[b-vr4ini8syb] {
    background: linear-gradient(180deg, #f97316, #ea580c);
}

.ad-hb.is-received[b-vr4ini8syb] {
    background: linear-gradient(180deg, #a855f7, #9333ea);
}

.ad-hbg-label[b-vr4ini8syb] {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 5px;
    font-weight: 500;
}

/* ============ Daily chart ============ */
.ad-daily[b-vr4ini8syb] {
    margin-bottom: 18px;
}

.ad-daily-chart[b-vr4ini8syb] {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 170px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
}

.ad-daily-col[b-vr4ini8syb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.ad-daily-bars[b-vr4ini8syb] {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 145px;
}

.ad-daily-bar[b-vr4ini8syb] {
    width: 16px;
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.15s, transform 0.15s;
    cursor: default;
}

.ad-daily-bar:hover[b-vr4ini8syb] {
    filter: brightness(1.12);
    transform: translateY(-2px);
}

.ad-daily-bar.is-sent[b-vr4ini8syb] {
    background: linear-gradient(180deg, #f97316, #ea580c);
}

.ad-daily-bar.is-received[b-vr4ini8syb] {
    background: linear-gradient(180deg, #a855f7, #9333ea);
}

.ad-bar-val[b-vr4ini8syb] {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ad-daily-label[b-vr4ini8syb] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 7px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* ============ Instances table ============ */
.ad-instances[b-vr4ini8syb] {
    margin-bottom: 24px;
}

.ad-table-wrap[b-vr4ini8syb] {
    overflow-x: auto;
}

.ad-table[b-vr4ini8syb] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.ad-table th[b-vr4ini8syb] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 11px 14px;
    border-bottom: 2px solid var(--table-border-header);
    text-align: left;
    white-space: nowrap;
    background: var(--bg-input);
}

.ad-table td[b-vr4ini8syb] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--table-border-row);
    color: var(--text-primary);
    vertical-align: middle;
}

.ad-table tbody tr[b-vr4ini8syb] {
    transition: background 0.12s;
}

.ad-table tbody tr:hover[b-vr4ini8syb] {
    background: var(--table-hover-bg);
}

.ad-table .ad-tc[b-vr4ini8syb] {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ad-inst-cell[b-vr4ini8syb] {
    display: flex;
    flex-direction: column;
}

.ad-inst-name[b-vr4ini8syb] {
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.ad-inst-phone[b-vr4ini8syb] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.ad-pill[b-vr4ini8syb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ad-pill.is-online[b-vr4ini8syb] {
    background: var(--status-online-bg);
    color: var(--status-online-color);
}

.ad-pill.is-offline[b-vr4ini8syb] {
    background: var(--status-offline-bg);
    color: var(--status-offline-color);
}

.ad-pill-dot[b-vr4ini8syb] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.ad-pill.is-online .ad-pill-dot[b-vr4ini8syb] {
    background: var(--status-online-dot);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
    animation: ad-pulse-b-vr4ini8syb 2s ease-in-out infinite;
}

.ad-pill.is-offline .ad-pill-dot[b-vr4ini8syb] {
    background: var(--status-offline-dot);
}

@keyframes ad-pulse-b-vr4ini8syb {
    0%, 100% { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }
    50% { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.08); }
}

.ad-unread[b-vr4ini8syb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    padding: 0 7px;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.ad-muted[b-vr4ini8syb] {
    color: var(--text-placeholder);
}

@media (prefers-reduced-motion: reduce) {
    .ad-spinner-lg[b-vr4ini8syb], .is-spin[b-vr4ini8syb] { animation: none; }
    .ad-pill.is-online .ad-pill-dot[b-vr4ini8syb] { animation: none; }
    .ad-kpi:hover[b-vr4ini8syb], .ad-hbar:hover[b-vr4ini8syb], .ad-daily-bar:hover[b-vr4ini8syb] { transform: none; }
}

/* ============ Responsive ============ */
@media (max-width: 1024px) {
    .ad-kpis[b-vr4ini8syb] { grid-template-columns: repeat(2, 1fr); }
    .ad-row[b-vr4ini8syb] { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .ad-head[b-vr4ini8syb] { flex-direction: column; align-items: flex-start; }
    .ad-daily-bar[b-vr4ini8syb] { width: 12px; }
}

@media (max-width: 576px) {
    .ad-kpis[b-vr4ini8syb] { grid-template-columns: 1fr; }
    .ad-card[b-vr4ini8syb] { padding: 16px; }
}
/* /Components/Pages/Admin/Invoices.razor.rz.scp.css */
/* =========================================================
   Invoices (scoped) — iv- prefix
   ========================================================= */

.iv-page[b-npr3updpkx] {
    max-width: 1240px;
    margin: 0 auto;
    font-family: 'Manrope', sans-serif;
}

/* ============ Header ============ */
.iv-head[b-npr3updpkx] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.iv-title[b-npr3updpkx] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.iv-sub[b-npr3updpkx] {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

.iv-head-actions[b-npr3updpkx] {
    display: flex;
    gap: 8px;
}

/* ============ Buttons ============ */
.iv-btn[b-npr3updpkx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1.5px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.iv-btn:active:not(:disabled)[b-npr3updpkx] { transform: scale(0.97); }
.iv-btn:disabled[b-npr3updpkx] { opacity: 0.55; cursor: not-allowed; }

.iv-btn.is-primary[b-npr3updpkx] {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}

.iv-btn.is-primary:hover:not(:disabled)[b-npr3updpkx] {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

[b-npr3updpkx] [data-theme="dark"] .iv-btn.is-primary { color: var(--bg-page); }

.iv-btn.is-ghost[b-npr3updpkx] {
    background: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.iv-btn.is-ghost:hover:not(:disabled)[b-npr3updpkx] {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.iv-btn-link[b-npr3updpkx] {
    background: none;
    border: none;
    color: var(--brand-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    padding: 9px 8px;
    font-family: 'Manrope', sans-serif;
    transition: color 0.15s;
}

.iv-btn-link:hover:not(:disabled)[b-npr3updpkx] {
    color: var(--brand-primary-hover);
    text-decoration: underline;
}

.iv-btn-link:disabled[b-npr3updpkx] { opacity: 0.5; cursor: not-allowed; }

/* ============ Spinners ============ */
@keyframes iv-spin-b-npr3updpkx {
    to { transform: rotate(360deg); }
}

.iv-spinner-lg[b-npr3updpkx] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: iv-spin-b-npr3updpkx 0.8s linear infinite;
}

.iv-spinner-sm[b-npr3updpkx] {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: iv-spin-b-npr3updpkx 0.7s linear infinite;
    display: inline-block;
}

/* ============ States ============ */
.iv-state[b-npr3updpkx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 70px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.iv-alert[b-npr3updpkx] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
}

[b-npr3updpkx] [data-theme="dark"] .iv-alert {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

.iv-empty[b-npr3updpkx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.iv-empty-icon[b-npr3updpkx] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.iv-empty h3[b-npr3updpkx] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}

.iv-empty p[b-npr3updpkx] {
    color: var(--text-muted);
    font-size: 13.5px;
    margin: 0;
}

/* ============ Filters ============ */
.iv-filters[b-npr3updpkx] {
    padding: 16px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
}

.iv-filters-grid[b-npr3updpkx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    align-items: end;
}

.iv-field[b-npr3updpkx] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.iv-field label[b-npr3updpkx] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.iv-input[b-npr3updpkx] {
    width: 100%;
    padding: 9px 11px;
    border: 1.5px solid var(--border-input);
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--text-primary);
    background: var(--bg-input);
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    letter-spacing: -0.01em;
}

.iv-input:focus[b-npr3updpkx] {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-ring);
}

.iv-field-actions[b-npr3updpkx] {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.iv-filter-count[b-npr3updpkx] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
    font-size: 12.5px;
    color: var(--text-muted);
    letter-spacing: -0.01em;
}

.iv-filter-count strong[b-npr3updpkx] {
    color: var(--text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ============ Summary ============ */
.iv-summary[b-npr3updpkx] {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 16px 22px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}

.iv-summary-item[b-npr3updpkx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.iv-summary-val[b-npr3updpkx] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.035em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.iv-summary-val.is-success[b-npr3updpkx] { color: #16a34a; }
.iv-summary-val.is-danger[b-npr3updpkx] { color: #dc2626; }
.iv-summary-val.is-pending[b-npr3updpkx] { color: #d97706; }
.iv-summary-val.is-amount[b-npr3updpkx] { color: var(--brand-primary); }

[b-npr3updpkx] [data-theme="dark"] .iv-summary-val.is-success { color: #4ade80; }
[b-npr3updpkx] [data-theme="dark"] .iv-summary-val.is-danger { color: #f87171; }
[b-npr3updpkx] [data-theme="dark"] .iv-summary-val.is-pending { color: #fbbf24; }

.iv-summary-label[b-npr3updpkx] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 5px;
    font-weight: 500;
    letter-spacing: -0.005em;
}

.iv-summary-sep[b-npr3updpkx] {
    width: 1px;
    height: 36px;
    background: var(--border-color);
}

/* ============ Table ============ */
.iv-table-wrap[b-npr3updpkx] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow-x: auto;
    box-shadow: var(--shadow-sm);
}

.iv-table[b-npr3updpkx] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.iv-table th[b-npr3updpkx] {
    padding: 12px 16px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-input);
    white-space: nowrap;
}

.iv-table td[b-npr3updpkx] {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    vertical-align: middle;
}

.iv-table tbody tr[b-npr3updpkx] {
    transition: background 0.12s;
}

.iv-table tbody tr:hover[b-npr3updpkx] {
    background: var(--bg-hover);
}

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

.iv-table-empty[b-npr3updpkx] {
    text-align: center;
    padding: 36px;
    color: var(--text-muted);
    font-size: 13.5px;
}

.iv-company[b-npr3updpkx] {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.iv-amount[b-npr3updpkx] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.iv-date[b-npr3updpkx] {
    font-size: 12.5px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ============ Status badges ============ */
.iv-badge[b-npr3updpkx] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.iv-badge.is-pending[b-npr3updpkx] {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-color);
}

.iv-badge.is-paid[b-npr3updpkx] {
    background: var(--badge-success-bg);
    color: var(--badge-success-color);
}

.iv-badge.is-overdue[b-npr3updpkx] {
    background: var(--status-offline-bg);
    color: var(--status-offline-color);
}

.iv-badge.is-cancelled[b-npr3updpkx] {
    background: var(--chip-bg);
    color: var(--chip-color);
}

/* ============ Actions ============ */
.iv-actions[b-npr3updpkx] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.iv-action[b-npr3updpkx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.iv-action.is-success[b-npr3updpkx] {
    color: #16a34a;
    border-color: rgba(22, 163, 74, 0.32);
}

.iv-action.is-success:hover[b-npr3updpkx] {
    background: rgba(22, 163, 74, 0.08);
    border-color: #16a34a;
}

.iv-action.is-cancel:hover[b-npr3updpkx] {
    color: #dc2626;
    border-color: #fca5a5;
    background: rgba(220, 38, 38, 0.06);
}

.iv-action.is-warn[b-npr3updpkx] {
    color: #b45309;
    border-color: rgba(180, 83, 9, 0.32);
}

.iv-action.is-warn:hover[b-npr3updpkx] {
    background: rgba(180, 83, 9, 0.08);
    border-color: #b45309;
}

[b-npr3updpkx] [data-theme="dark"] .iv-action.is-success { color: #4ade80; }
[b-npr3updpkx] [data-theme="dark"] .iv-action.is-warn { color: #fbbf24; }

.iv-paid-date[b-npr3updpkx] {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
}

/* ============ Modal ============ */
.iv-modal-overlay[b-npr3updpkx] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
    animation: iv-fade-b-npr3updpkx 0.15s ease;
}

@keyframes iv-fade-b-npr3updpkx {
    from { opacity: 0; }
    to { opacity: 1; }
}

.iv-modal[b-npr3updpkx] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 500px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    animation: iv-pop-b-npr3updpkx 0.18s ease;
}

@keyframes iv-pop-b-npr3updpkx {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.iv-modal-head[b-npr3updpkx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
}

.iv-modal-title[b-npr3updpkx] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.025em;
}

.iv-modal-sub[b-npr3updpkx] {
    font-size: 13px;
    color: var(--text-muted);
    margin: 4px 0 0;
    letter-spacing: -0.01em;
}

.iv-modal-close[b-npr3updpkx] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.iv-modal-close:hover[b-npr3updpkx] {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.iv-modal-body[b-npr3updpkx] {
    padding: 20px 24px;
}

.iv-modal-foot[b-npr3updpkx] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
}

.iv-form-group[b-npr3updpkx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.iv-form-label[b-npr3updpkx] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.iv-form-row[b-npr3updpkx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .iv-spinner-lg[b-npr3updpkx], .iv-spinner-sm[b-npr3updpkx] { animation: none; }
    .iv-btn:active:not(:disabled)[b-npr3updpkx] { transform: none; }
    .iv-modal-overlay[b-npr3updpkx], .iv-modal[b-npr3updpkx] { animation: none; }
}

/* ============ Responsive ============ */
@media (max-width: 900px) {
    .iv-summary[b-npr3updpkx] { gap: 14px; }
    .iv-summary-sep[b-npr3updpkx] { display: none; }
}

@media (max-width: 768px) {
    .iv-head[b-npr3updpkx] { flex-direction: column; align-items: stretch; }
    .iv-head-actions[b-npr3updpkx] { width: 100%; }
    .iv-btn.is-primary[b-npr3updpkx] { justify-content: center; }
    .iv-form-row[b-npr3updpkx] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Admin/Reports/AttendanceReport.razor.rz.scp.css */
/* =========================================================
   Admin Reports (scoped) — rp- prefix
   ========================================================= */

.rp-page[b-1gzyq4zlq7] {
    max-width: 1240px;
    margin: 0 auto;
    font-family: 'Manrope', sans-serif;
}

/* ============ Header ============ */
.rp-head[b-1gzyq4zlq7] {
    margin-bottom: 22px;
}

.rp-title[b-1gzyq4zlq7] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.rp-sub[b-1gzyq4zlq7] {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

/* ============ Filters ============ */
.rp-filters[b-1gzyq4zlq7] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    align-items: end;
    box-shadow: var(--shadow-sm);
}

.rp-field[b-1gzyq4zlq7] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.rp-field label[b-1gzyq4zlq7] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rp-input[b-1gzyq4zlq7] {
    width: 100%;
    padding: 9px 11px;
    border: 1.5px solid var(--border-input);
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--text-primary);
    background: var(--bg-input);
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    letter-spacing: -0.01em;
}

.rp-input:focus[b-1gzyq4zlq7] {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-ring);
}

.rp-filter-actions[b-1gzyq4zlq7] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ============ Buttons ============ */
.rp-btn[b-1gzyq4zlq7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1.5px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.rp-btn:active:not(:disabled)[b-1gzyq4zlq7] { transform: scale(0.97); }
.rp-btn:disabled[b-1gzyq4zlq7] { opacity: 0.55; cursor: not-allowed; }

.rp-btn.is-primary[b-1gzyq4zlq7] {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}

.rp-btn.is-primary:hover:not(:disabled)[b-1gzyq4zlq7] {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

[b-1gzyq4zlq7] [data-theme="dark"] .rp-btn.is-primary { color: var(--bg-page); }

.is-spin[b-1gzyq4zlq7] {
    animation: rp-spin-b-1gzyq4zlq7 0.8s linear infinite;
}

@keyframes rp-spin-b-1gzyq4zlq7 {
    to { transform: rotate(360deg); }
}

/* ============ States ============ */
.rp-state[b-1gzyq4zlq7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 70px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.rp-spinner-lg[b-1gzyq4zlq7] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: rp-spin-b-1gzyq4zlq7 0.8s linear infinite;
}

.rp-alert[b-1gzyq4zlq7] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

[b-1gzyq4zlq7] [data-theme="dark"] .rp-alert {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

/* ============ KPI Cards ============ */
.rp-kpis[b-1gzyq4zlq7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.rp-kpi[b-1gzyq4zlq7] {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 18px 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.rp-kpi:hover[b-1gzyq4zlq7] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    border-color: var(--text-muted);
}

.rp-kpi-icon[b-1gzyq4zlq7] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rp-kpi-icon.is-total[b-1gzyq4zlq7] { background: var(--metric-violet-bg); color: var(--metric-violet-color); }
.rp-kpi-icon.is-sent[b-1gzyq4zlq7] { background: var(--metric-orange-bg); color: var(--metric-orange-color); }
.rp-kpi-icon.is-received[b-1gzyq4zlq7] { background: var(--metric-green-bg); color: var(--metric-green-color); }
.rp-kpi-icon.is-convs[b-1gzyq4zlq7] { background: var(--metric-blue-bg); color: var(--metric-blue-color); }

.rp-kpi-info[b-1gzyq4zlq7] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rp-kpi-value[b-1gzyq4zlq7] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.rp-kpi-label[b-1gzyq4zlq7] {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 6px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* ============ Averages ============ */
.rp-avg-row[b-1gzyq4zlq7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.rp-avg[b-1gzyq4zlq7] {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rp-avg-value[b-1gzyq4zlq7] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--brand-primary);
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.rp-avg-label[b-1gzyq4zlq7] {
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* ============ Cards ============ */
.rp-card[b-1gzyq4zlq7] {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
}

.rp-card-head[b-1gzyq4zlq7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    gap: 12px;
}

.rp-card-title[b-1gzyq4zlq7] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.025em;
}

.rp-chip[b-1gzyq4zlq7] {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
}

/* ============ Daily chart ============ */
.rp-daily-chart[b-1gzyq4zlq7] {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 170px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
    overflow-x: auto;
}

.rp-daily-col[b-1gzyq4zlq7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 32px;
}

.rp-daily-bars[b-1gzyq4zlq7] {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 145px;
}

.rp-daily-bar[b-1gzyq4zlq7] {
    width: 16px;
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.15s, transform 0.15s;
    cursor: default;
}

.rp-daily-bar:hover[b-1gzyq4zlq7] {
    filter: brightness(1.12);
    transform: translateY(-2px);
}

.rp-daily-bar.is-sent[b-1gzyq4zlq7] { background: linear-gradient(180deg, #f97316, #ea580c); }
.rp-daily-bar.is-received[b-1gzyq4zlq7] { background: linear-gradient(180deg, #a855f7, #9333ea); }

.rp-bar-val[b-1gzyq4zlq7] {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rp-daily-label[b-1gzyq4zlq7] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 7px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.rp-legend[b-1gzyq4zlq7] {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-top: 14px;
}

.rp-legend-item[b-1gzyq4zlq7] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.rp-legend-color[b-1gzyq4zlq7] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.rp-legend-color.is-sent[b-1gzyq4zlq7] { background: linear-gradient(180deg, #f97316, #ea580c); }
.rp-legend-color.is-received[b-1gzyq4zlq7] { background: linear-gradient(180deg, #a855f7, #9333ea); }

/* ============ Table ============ */
.rp-table-wrap[b-1gzyq4zlq7] {
    overflow-x: auto;
}

.rp-table[b-1gzyq4zlq7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.rp-table th[b-1gzyq4zlq7] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 11px 14px;
    border-bottom: 2px solid var(--table-border-header);
    text-align: left;
    white-space: nowrap;
    background: var(--bg-input);
}

.rp-table td[b-1gzyq4zlq7] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--table-border-row);
    color: var(--text-primary);
    vertical-align: middle;
}

.rp-table tbody tr[b-1gzyq4zlq7] {
    transition: background 0.12s;
}

.rp-table tbody tr:hover[b-1gzyq4zlq7] {
    background: var(--table-hover-bg);
}

.rp-tc[b-1gzyq4zlq7] {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.rp-strong[b-1gzyq4zlq7] { font-weight: 700; }

.rp-contact[b-1gzyq4zlq7] {
    display: flex;
    flex-direction: column;
}

.rp-contact-name[b-1gzyq4zlq7] {
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.rp-contact-phone[b-1gzyq4zlq7] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.rp-muted[b-1gzyq4zlq7] {
    color: var(--text-placeholder);
}

@media (prefers-reduced-motion: reduce) {
    .rp-spinner-lg[b-1gzyq4zlq7], .is-spin[b-1gzyq4zlq7] { animation: none; }
    .rp-kpi:hover[b-1gzyq4zlq7], .rp-daily-bar:hover[b-1gzyq4zlq7] { transform: none; }
}

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

@media (max-width: 768px) {
    .rp-filters[b-1gzyq4zlq7] { grid-template-columns: 1fr 1fr; }
    .rp-filter-actions[b-1gzyq4zlq7] { grid-column: 1 / -1; justify-content: flex-end; }
    .rp-daily-bar[b-1gzyq4zlq7] { width: 12px; }
}

@media (max-width: 576px) {
    .rp-kpis[b-1gzyq4zlq7] { grid-template-columns: 1fr; }
    .rp-avg-row[b-1gzyq4zlq7] { grid-template-columns: 1fr; }
    .rp-filters[b-1gzyq4zlq7] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Admin/Reports/PeakHoursReport.razor.rz.scp.css */
/* =========================================================
   Peak Hours Report (scoped) — rp- prefix
   ========================================================= */

.rp-page[b-1jxaq99qt5] {
    max-width: 1240px;
    margin: 0 auto;
    font-family: 'Manrope', sans-serif;
}

/* ============ Header ============ */
.rp-head[b-1jxaq99qt5] {
    margin-bottom: 22px;
}

.rp-title[b-1jxaq99qt5] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.rp-sub[b-1jxaq99qt5] {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

/* ============ Filters ============ */
.rp-filters[b-1jxaq99qt5] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    align-items: end;
    box-shadow: var(--shadow-sm);
}

.rp-field[b-1jxaq99qt5] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.rp-field label[b-1jxaq99qt5] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rp-input[b-1jxaq99qt5] {
    width: 100%;
    padding: 9px 11px;
    border: 1.5px solid var(--border-input);
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--text-primary);
    background: var(--bg-input);
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    letter-spacing: -0.01em;
}

.rp-input:focus[b-1jxaq99qt5] {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-ring);
}

.rp-filter-actions[b-1jxaq99qt5] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ============ Buttons ============ */
.rp-btn[b-1jxaq99qt5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1.5px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.rp-btn:active:not(:disabled)[b-1jxaq99qt5] { transform: scale(0.97); }
.rp-btn:disabled[b-1jxaq99qt5] { opacity: 0.55; cursor: not-allowed; }

.rp-btn.is-primary[b-1jxaq99qt5] {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}

.rp-btn.is-primary:hover:not(:disabled)[b-1jxaq99qt5] {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

[b-1jxaq99qt5] [data-theme="dark"] .rp-btn.is-primary { color: var(--bg-page); }

.is-spin[b-1jxaq99qt5] {
    animation: rp-spin-b-1jxaq99qt5 0.8s linear infinite;
}

@keyframes rp-spin-b-1jxaq99qt5 {
    to { transform: rotate(360deg); }
}

/* ============ States ============ */
.rp-state[b-1jxaq99qt5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 70px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.rp-spinner-lg[b-1jxaq99qt5] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: rp-spin-b-1jxaq99qt5 0.8s linear infinite;
}

.rp-alert[b-1jxaq99qt5] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

[b-1jxaq99qt5] [data-theme="dark"] .rp-alert {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

/* ============ Cards ============ */
.rp-card[b-1jxaq99qt5] {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
}

.rp-card-head[b-1jxaq99qt5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    gap: 12px;
}

.rp-card-title[b-1jxaq99qt5] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.025em;
}

.rp-chip[b-1jxaq99qt5] {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
}

.rp-empty[b-1jxaq99qt5] {
    text-align: center;
    padding: 36px;
    color: var(--text-placeholder);
    font-size: 13.5px;
}

/* ============ Heatmap ============ */
.rp-heat-wrap[b-1jxaq99qt5] {
    overflow-x: auto;
}

.rp-heat-grid[b-1jxaq99qt5] {
    display: grid;
    grid-template-columns: 56px repeat(24, 1fr);
    gap: 3px;
    min-width: 760px;
}

.rp-heat-corner[b-1jxaq99qt5] { }

.rp-heat-hour[b-1jxaq99qt5] {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 4px 0;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

.rp-heat-day[b-1jxaq99qt5] {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    padding-right: 8px;
    letter-spacing: -0.01em;
}

.rp-heat-cell[b-1jxaq99qt5] {
    aspect-ratio: 1;
    border-radius: 5px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: default;
}

.rp-heat-cell.is-empty[b-1jxaq99qt5] {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
}

.rp-heat-cell:not(.is-empty):hover[b-1jxaq99qt5] {
    transform: scale(1.15);
    z-index: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.rp-heat-val[b-1jxaq99qt5] {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.rp-heat-val.is-light[b-1jxaq99qt5] {
    color: #fff;
}

/* ============ Legend ============ */
.rp-heat-legend[b-1jxaq99qt5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}

.rp-heat-legend-text[b-1jxaq99qt5] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: -0.005em;
}

.rp-heat-gradient[b-1jxaq99qt5] {
    display: flex;
    gap: 3px;
}

.rp-heat-step[b-1jxaq99qt5] {
    width: 22px;
    height: 14px;
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .rp-spinner-lg[b-1jxaq99qt5], .is-spin[b-1jxaq99qt5] { animation: none; }
    .rp-heat-cell:hover[b-1jxaq99qt5] { transform: none; }
}

/* ============ Responsive ============ */
@media (max-width: 768px) {
    .rp-filters[b-1jxaq99qt5] { grid-template-columns: 1fr 1fr; }
    .rp-filter-actions[b-1jxaq99qt5] { grid-column: 1 / -1; justify-content: flex-end; }

    .rp-heat-grid[b-1jxaq99qt5] {
        grid-template-columns: 44px repeat(24, 1fr);
    }

    .rp-heat-cell[b-1jxaq99qt5] {
        min-height: 22px;
    }

    .rp-heat-val[b-1jxaq99qt5] {
        font-size: 9px;
    }
}

@media (max-width: 576px) {
    .rp-filters[b-1jxaq99qt5] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Admin/Reports/PerformanceReport.razor.rz.scp.css */
/* =========================================================
   Performance Report (scoped) — rp- prefix
   ========================================================= */

.rp-page[b-zlvtlyz2eh] {
    max-width: 1240px;
    margin: 0 auto;
    font-family: 'Manrope', sans-serif;
}

/* ============ Header ============ */
.rp-head[b-zlvtlyz2eh] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.rp-title[b-zlvtlyz2eh] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.rp-sub[b-zlvtlyz2eh] {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

/* ============ Buttons ============ */
.rp-btn[b-zlvtlyz2eh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1.5px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.rp-btn:active:not(:disabled)[b-zlvtlyz2eh] { transform: scale(0.97); }
.rp-btn:disabled[b-zlvtlyz2eh] { opacity: 0.55; cursor: not-allowed; }

.rp-btn.is-ghost[b-zlvtlyz2eh] {
    background: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.rp-btn.is-ghost:hover:not(:disabled)[b-zlvtlyz2eh] {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.is-spin[b-zlvtlyz2eh] {
    animation: rp-spin-b-zlvtlyz2eh 0.8s linear infinite;
}

@keyframes rp-spin-b-zlvtlyz2eh {
    to { transform: rotate(360deg); }
}

/* ============ States ============ */
.rp-state[b-zlvtlyz2eh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 70px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.rp-spinner-lg[b-zlvtlyz2eh] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: rp-spin-b-zlvtlyz2eh 0.8s linear infinite;
}

.rp-alert[b-zlvtlyz2eh] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

[b-zlvtlyz2eh] [data-theme="dark"] .rp-alert {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

/* ============ Cards ============ */
.rp-card[b-zlvtlyz2eh] {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
}

.rp-card-head[b-zlvtlyz2eh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    gap: 12px;
}

.rp-card-title[b-zlvtlyz2eh] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.025em;
}

.rp-chip[b-zlvtlyz2eh] {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
}

.rp-empty[b-zlvtlyz2eh] {
    text-align: center;
    padding: 32px;
    color: var(--text-placeholder);
    font-size: 13.5px;
}

/* ============ Table ============ */
.rp-table-wrap[b-zlvtlyz2eh] {
    overflow-x: auto;
}

.rp-table[b-zlvtlyz2eh] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.rp-table th[b-zlvtlyz2eh] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 11px 14px;
    border-bottom: 2px solid var(--table-border-header);
    text-align: left;
    white-space: nowrap;
    background: var(--bg-input);
}

.rp-table td[b-zlvtlyz2eh] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--table-border-row);
    color: var(--text-primary);
    vertical-align: middle;
}

.rp-table tbody tr[b-zlvtlyz2eh] {
    transition: background 0.12s;
}

.rp-table tbody tr:hover[b-zlvtlyz2eh] {
    background: var(--table-hover-bg);
}

.rp-tc[b-zlvtlyz2eh] {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.rp-inst[b-zlvtlyz2eh] {
    display: flex;
    flex-direction: column;
}

.rp-inst-name[b-zlvtlyz2eh] {
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.rp-inst-phone[b-zlvtlyz2eh] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

/* ============ Pills ============ */
.rp-pill[b-zlvtlyz2eh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rp-pill.is-online[b-zlvtlyz2eh] {
    background: var(--status-online-bg);
    color: var(--status-online-color);
}

.rp-pill.is-offline[b-zlvtlyz2eh] {
    background: var(--status-offline-bg);
    color: var(--status-offline-color);
}

.rp-pill-dot[b-zlvtlyz2eh] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.rp-pill.is-online .rp-pill-dot[b-zlvtlyz2eh] {
    background: var(--status-online-dot);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
    animation: rp-pulse-b-zlvtlyz2eh 2s ease-in-out infinite;
}

.rp-pill.is-offline .rp-pill-dot[b-zlvtlyz2eh] {
    background: var(--status-offline-dot);
}

@keyframes rp-pulse-b-zlvtlyz2eh {
    0%, 100% { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }
    50% { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.08); }
}

/* ============ Rate bars ============ */
.rp-rate[b-zlvtlyz2eh] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 150px;
}

.rp-rate-track[b-zlvtlyz2eh] {
    flex: 1;
    height: 8px;
    background: var(--border-subtle);
    border-radius: 999px;
    overflow: hidden;
}

.rp-rate-fill[b-zlvtlyz2eh] {
    height: 100%;
    border-radius: 999px;
    transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rp-rate-fill.is-delivery[b-zlvtlyz2eh] { background: linear-gradient(90deg, #16a34a, #22c55e); }
.rp-rate-fill.is-read[b-zlvtlyz2eh] { background: linear-gradient(90deg, #2563eb, #60a5fa); }

.rp-rate-val[b-zlvtlyz2eh] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 48px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ============ Summary ============ */
.rp-summary[b-zlvtlyz2eh] {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
    flex-wrap: wrap;
}

.rp-summary-item[b-zlvtlyz2eh] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
}

.rp-dot[b-zlvtlyz2eh] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rp-dot.is-delivered[b-zlvtlyz2eh] { background: #16a34a; }
.rp-dot.is-read[b-zlvtlyz2eh] { background: #2563eb; }
.rp-dot.is-pending[b-zlvtlyz2eh] { background: #f59e0b; }

.rp-summary-label[b-zlvtlyz2eh] {
    color: var(--text-muted);
    letter-spacing: -0.01em;
}

.rp-summary-val[b-zlvtlyz2eh] {
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .rp-spinner-lg[b-zlvtlyz2eh], .is-spin[b-zlvtlyz2eh] { animation: none; }
    .rp-pill.is-online .rp-pill-dot[b-zlvtlyz2eh] { animation: none; }
}

/* ============ Responsive ============ */
@media (max-width: 768px) {
    .rp-head[b-zlvtlyz2eh] { flex-direction: column; align-items: flex-start; }
    .rp-summary[b-zlvtlyz2eh] { flex-direction: column; gap: 8px; align-items: flex-start; }
}
/* /Components/Pages/Admin/Reports/TagsReport.razor.rz.scp.css */
/* =========================================================
   Tags Report (scoped) — rp- prefix
   ========================================================= */

.rp-page[b-86ho8o0fx1] {
    max-width: 1240px;
    margin: 0 auto;
    font-family: 'Manrope', sans-serif;
}

/* ============ Header ============ */
.rp-head[b-86ho8o0fx1] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.rp-title[b-86ho8o0fx1] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.rp-sub[b-86ho8o0fx1] {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

/* ============ Buttons ============ */
.rp-btn[b-86ho8o0fx1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1.5px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.rp-btn:active:not(:disabled)[b-86ho8o0fx1] { transform: scale(0.97); }
.rp-btn:disabled[b-86ho8o0fx1] { opacity: 0.55; cursor: not-allowed; }

.rp-btn.is-ghost[b-86ho8o0fx1] {
    background: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.rp-btn.is-ghost:hover:not(:disabled)[b-86ho8o0fx1] {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.is-spin[b-86ho8o0fx1] {
    animation: rp-spin-b-86ho8o0fx1 0.8s linear infinite;
}

@keyframes rp-spin-b-86ho8o0fx1 {
    to { transform: rotate(360deg); }
}

/* ============ States ============ */
.rp-state[b-86ho8o0fx1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 70px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.rp-spinner-lg[b-86ho8o0fx1] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: rp-spin-b-86ho8o0fx1 0.8s linear infinite;
}

.rp-alert[b-86ho8o0fx1] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

[b-86ho8o0fx1] [data-theme="dark"] .rp-alert {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

/* ============ KPI Cards ============ */
.rp-kpis[b-86ho8o0fx1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.rp-kpi[b-86ho8o0fx1] {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 18px 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.rp-kpi:hover[b-86ho8o0fx1] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    border-color: var(--text-muted);
}

.rp-kpi-icon[b-86ho8o0fx1] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rp-kpi-icon.is-tags[b-86ho8o0fx1] { background: var(--metric-orange-bg); color: var(--metric-orange-color); }
.rp-kpi-icon.is-convs[b-86ho8o0fx1] { background: var(--metric-green-bg); color: var(--metric-green-color); }

.rp-kpi-info[b-86ho8o0fx1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rp-kpi-value[b-86ho8o0fx1] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.rp-kpi-label[b-86ho8o0fx1] {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 6px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* ============ Cards ============ */
.rp-card[b-86ho8o0fx1] {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
}

.rp-card-head[b-86ho8o0fx1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    gap: 12px;
}

.rp-card-title[b-86ho8o0fx1] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.025em;
}

.rp-chip[b-86ho8o0fx1] {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
}

.rp-empty[b-86ho8o0fx1] {
    text-align: center;
    padding: 36px;
    color: var(--text-placeholder);
    font-size: 13.5px;
}

/* ============ Tag Bars ============ */
.rp-tag-bars[b-86ho8o0fx1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rp-tag-row[b-86ho8o0fx1] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rp-tag-label[b-86ho8o0fx1] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    flex-shrink: 0;
}

.rp-tag-dot[b-86ho8o0fx1] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--bg-card);
}

.rp-tag-meta[b-86ho8o0fx1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rp-tag-name[b-86ho8o0fx1] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.rp-tag-instance[b-86ho8o0fx1] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.rp-tag-track[b-86ho8o0fx1] {
    flex: 1;
    height: 24px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow: hidden;
}

.rp-tag-fill[b-86ho8o0fx1] {
    height: 100%;
    border-radius: 8px;
    transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rp-tag-value[b-86ho8o0fx1] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 64px;
}

.rp-tag-count[b-86ho8o0fx1] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.rp-tag-pct[b-86ho8o0fx1] {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 3px;
    font-weight: 600;
    letter-spacing: -0.005em;
    font-variant-numeric: tabular-nums;
}

/* ============ Table ============ */
.rp-table-wrap[b-86ho8o0fx1] {
    overflow-x: auto;
}

.rp-table[b-86ho8o0fx1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.rp-table th[b-86ho8o0fx1] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 11px 14px;
    border-bottom: 2px solid var(--table-border-header);
    text-align: left;
    white-space: nowrap;
    background: var(--bg-input);
}

.rp-table td[b-86ho8o0fx1] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--table-border-row);
    color: var(--text-primary);
    vertical-align: middle;
}

.rp-table tbody tr[b-86ho8o0fx1] {
    transition: background 0.12s;
}

.rp-table tbody tr:hover[b-86ho8o0fx1] {
    background: var(--table-hover-bg);
}

.rp-tc[b-86ho8o0fx1] {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.rp-strong[b-86ho8o0fx1] { font-weight: 700; }

.rp-tag-cell[b-86ho8o0fx1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rp-tag-swatch[b-86ho8o0fx1] {
    width: 14px;
    height: 14px;
    border-radius: 5px;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.rp-tag-cell-name[b-86ho8o0fx1] {
    font-weight: 700;
    letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
    .rp-spinner-lg[b-86ho8o0fx1], .is-spin[b-86ho8o0fx1] { animation: none; }
    .rp-kpi:hover[b-86ho8o0fx1] { transform: none; }
}

/* ============ Responsive ============ */
@media (max-width: 768px) {
    .rp-head[b-86ho8o0fx1] { flex-direction: column; align-items: flex-start; }
    .rp-kpis[b-86ho8o0fx1] { grid-template-columns: 1fr; }
    .rp-tag-row[b-86ho8o0fx1] { flex-wrap: wrap; }
    .rp-tag-label[b-86ho8o0fx1] { min-width: 0; flex-basis: 100%; }
}
/* /Components/Pages/Admin/Reports/UserAttendancesReport.razor.rz.scp.css */
/* =========================================================
   User Attendances Report (scoped) — rp- prefix
   ========================================================= */

.rp-page[b-00vax68wx1] {
    max-width: 1240px;
    margin: 0 auto;
    font-family: 'Manrope', sans-serif;
}

/* ============ Header ============ */
.rp-head[b-00vax68wx1] {
    margin-bottom: 22px;
}

.rp-title[b-00vax68wx1] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.rp-sub[b-00vax68wx1] {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

/* ============ Filters ============ */
.rp-filters[b-00vax68wx1] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    align-items: end;
    box-shadow: var(--shadow-sm);
}

.rp-field[b-00vax68wx1] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.rp-field label[b-00vax68wx1] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rp-input[b-00vax68wx1] {
    width: 100%;
    padding: 9px 11px;
    border: 1.5px solid var(--border-input);
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--text-primary);
    background: var(--bg-input);
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    letter-spacing: -0.01em;
}

.rp-input:focus[b-00vax68wx1] {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-ring);
}

.rp-filter-actions[b-00vax68wx1] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ============ Buttons ============ */
.rp-btn[b-00vax68wx1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1.5px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.rp-btn:active:not(:disabled)[b-00vax68wx1] { transform: scale(0.97); }
.rp-btn:disabled[b-00vax68wx1] { opacity: 0.55; cursor: not-allowed; }

.rp-btn.is-primary[b-00vax68wx1] {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}

.rp-btn.is-primary:hover:not(:disabled)[b-00vax68wx1] {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

[b-00vax68wx1] [data-theme="dark"] .rp-btn.is-primary { color: var(--bg-page); }

.is-spin[b-00vax68wx1] {
    animation: rp-spin-b-00vax68wx1 0.8s linear infinite;
}

@keyframes rp-spin-b-00vax68wx1 {
    to { transform: rotate(360deg); }
}

/* ============ States ============ */
.rp-state[b-00vax68wx1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 70px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.rp-spinner-lg[b-00vax68wx1] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: rp-spin-b-00vax68wx1 0.8s linear infinite;
}

.rp-alert[b-00vax68wx1] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

[b-00vax68wx1] [data-theme="dark"] .rp-alert {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

/* ============ Cards ============ */
.rp-card[b-00vax68wx1] {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
}

.rp-card-head[b-00vax68wx1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    gap: 12px;
}

.rp-card-title[b-00vax68wx1] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.025em;
}

.rp-chip[b-00vax68wx1] {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
}

.rp-empty[b-00vax68wx1] {
    text-align: center;
    padding: 36px;
    color: var(--text-placeholder);
    font-size: 13.5px;
}

/* ============ Table ============ */
.rp-table-wrap[b-00vax68wx1] {
    overflow-x: auto;
}

.rp-table[b-00vax68wx1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.rp-table th[b-00vax68wx1] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 11px 14px;
    border-bottom: 2px solid var(--table-border-header);
    text-align: left;
    white-space: nowrap;
    background: var(--bg-input);
}

.rp-table td[b-00vax68wx1] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--table-border-row);
    color: var(--text-primary);
    vertical-align: middle;
}

.rp-table tbody tr[b-00vax68wx1] {
    transition: background 0.12s;
}

.rp-table tbody tr:hover[b-00vax68wx1] {
    background: var(--table-hover-bg);
}

.rp-tc[b-00vax68wx1] {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.rp-strong[b-00vax68wx1] { font-weight: 700; }

.rp-user-name[b-00vax68wx1] {
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.rp-user-email[b-00vax68wx1] {
    color: var(--text-muted);
    font-size: 12.5px;
    word-break: break-all;
}

/* ============ Role badge ============ */
.rp-role[b-00vax68wx1] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rp-role.administrator[b-00vax68wx1],
.rp-role.superadmin[b-00vax68wx1] {
    background: var(--metric-violet-bg);
    color: var(--metric-violet-color);
}

.rp-role.standard[b-00vax68wx1] {
    background: var(--metric-blue-bg);
    color: var(--metric-blue-color);
}

.rp-role.readonly[b-00vax68wx1] {
    background: var(--bg-input);
    color: var(--text-muted);
}

/* ============ Pills ============ */
.rp-pill[b-00vax68wx1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rp-pill.is-online[b-00vax68wx1] {
    background: var(--status-online-bg);
    color: var(--status-online-color);
}

.rp-pill.is-offline[b-00vax68wx1] {
    background: var(--status-offline-bg);
    color: var(--status-offline-color);
}

.rp-pill-dot[b-00vax68wx1] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.rp-pill.is-online .rp-pill-dot[b-00vax68wx1] {
    background: var(--status-online-dot);
}

.rp-pill.is-offline .rp-pill-dot[b-00vax68wx1] {
    background: var(--status-offline-dot);
}

@media (prefers-reduced-motion: reduce) {
    .rp-spinner-lg[b-00vax68wx1], .is-spin[b-00vax68wx1] { animation: none; }
}

/* ============ Responsive ============ */
@media (max-width: 768px) {
    .rp-filters[b-00vax68wx1] { grid-template-columns: 1fr 1fr; }
    .rp-filter-actions[b-00vax68wx1] { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (max-width: 576px) {
    .rp-filters[b-00vax68wx1] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Admin/Reports/UsersReport.razor.rz.scp.css */
/* =========================================================
   Users Report (scoped) — rp- prefix
   ========================================================= */

.rp-page[b-zh31r8ffxw] {
    max-width: 1240px;
    margin: 0 auto;
    font-family: 'Manrope', sans-serif;
}

/* ============ Header ============ */
.rp-head[b-zh31r8ffxw] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.rp-title[b-zh31r8ffxw] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.rp-sub[b-zh31r8ffxw] {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

/* ============ Buttons ============ */
.rp-btn[b-zh31r8ffxw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1.5px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.rp-btn:active:not(:disabled)[b-zh31r8ffxw] { transform: scale(0.97); }
.rp-btn:disabled[b-zh31r8ffxw] { opacity: 0.55; cursor: not-allowed; }

.rp-btn.is-ghost[b-zh31r8ffxw] {
    background: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.rp-btn.is-ghost:hover:not(:disabled)[b-zh31r8ffxw] {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.is-spin[b-zh31r8ffxw] {
    animation: rp-spin-b-zh31r8ffxw 0.8s linear infinite;
}

@keyframes rp-spin-b-zh31r8ffxw {
    to { transform: rotate(360deg); }
}

/* ============ States ============ */
.rp-state[b-zh31r8ffxw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 70px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.rp-spinner-lg[b-zh31r8ffxw] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: rp-spin-b-zh31r8ffxw 0.8s linear infinite;
}

.rp-alert[b-zh31r8ffxw] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

[b-zh31r8ffxw] [data-theme="dark"] .rp-alert {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

/* ============ Cards ============ */
.rp-card[b-zh31r8ffxw] {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
}

.rp-card-head[b-zh31r8ffxw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    gap: 12px;
}

.rp-card-title[b-zh31r8ffxw] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.025em;
}

.rp-chip[b-zh31r8ffxw] {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
}

.rp-empty[b-zh31r8ffxw] {
    text-align: center;
    padding: 36px;
    color: var(--text-placeholder);
    font-size: 13.5px;
}

/* ============ Table ============ */
.rp-table-wrap[b-zh31r8ffxw] {
    overflow-x: auto;
}

.rp-table[b-zh31r8ffxw] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.rp-table th[b-zh31r8ffxw] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 11px 14px;
    border-bottom: 2px solid var(--table-border-header);
    text-align: left;
    white-space: nowrap;
    background: var(--bg-input);
}

.rp-table td[b-zh31r8ffxw] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--table-border-row);
    color: var(--text-primary);
    vertical-align: middle;
}

.rp-table tbody tr[b-zh31r8ffxw] {
    transition: background 0.12s;
}

.rp-table tbody tr:hover[b-zh31r8ffxw] {
    background: var(--table-hover-bg);
}

.rp-tc[b-zh31r8ffxw] {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.rp-user-name[b-zh31r8ffxw] {
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.rp-user-email[b-zh31r8ffxw] {
    color: var(--text-muted);
    font-size: 12.5px;
    word-break: break-all;
}

/* ============ Role badge ============ */
.rp-role[b-zh31r8ffxw] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rp-role.administrator[b-zh31r8ffxw],
.rp-role.superadmin[b-zh31r8ffxw] {
    background: var(--metric-violet-bg);
    color: var(--metric-violet-color);
}

.rp-role.standard[b-zh31r8ffxw] {
    background: var(--metric-blue-bg);
    color: var(--metric-blue-color);
}

.rp-role.readonly[b-zh31r8ffxw] {
    background: var(--bg-input);
    color: var(--text-muted);
}

/* ============ Pills ============ */
.rp-pill[b-zh31r8ffxw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rp-pill.is-online[b-zh31r8ffxw] {
    background: var(--status-online-bg);
    color: var(--status-online-color);
}

.rp-pill.is-offline[b-zh31r8ffxw] {
    background: var(--status-offline-bg);
    color: var(--status-offline-color);
}

.rp-pill-dot[b-zh31r8ffxw] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.rp-pill.is-online .rp-pill-dot[b-zh31r8ffxw] {
    background: var(--status-online-dot);
}

.rp-pill.is-offline .rp-pill-dot[b-zh31r8ffxw] {
    background: var(--status-offline-dot);
}

@media (prefers-reduced-motion: reduce) {
    .rp-spinner-lg[b-zh31r8ffxw], .is-spin[b-zh31r8ffxw] { animation: none; }
}

/* ============ Responsive ============ */
@media (max-width: 768px) {
    .rp-head[b-zh31r8ffxw] { flex-direction: column; align-items: flex-start; }
}
/* /Components/Pages/Admin/SuperAdminCenter.razor.rz.scp.css */
/* =========================================================
   SuperAdmin Center (scoped) — sa- prefix
   ========================================================= */

.sa-page[b-lii2gix2sn] {
    max-width: 1400px;
    margin: 0 auto;
    font-family: 'Manrope', sans-serif;
}

/* ============ Header ============ */
.sa-head[b-lii2gix2sn] {
    margin-bottom: 22px;
}

.sa-title[b-lii2gix2sn] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.sa-sub[b-lii2gix2sn] {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

/* ============ Tab bar ============ */
.sa-tabbar[b-lii2gix2sn] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    border-bottom: 1.5px solid var(--border-color);
    padding-bottom: 0;
}

.sa-tab[b-lii2gix2sn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 9px 14px 11px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1.5px;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
    transition: color 0.15s, border-color 0.15s;
}

.sa-tab:hover[b-lii2gix2sn] {
    color: var(--text-primary);
}

.sa-tab.is-active[b-lii2gix2sn] {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

.sa-tab-badge[b-lii2gix2sn] {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.sa-tab-badge.is-warning[b-lii2gix2sn] {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-color);
}

.sa-tab-badge.is-danger[b-lii2gix2sn] {
    background: var(--status-offline-bg);
    color: var(--status-offline-color);
}

/* ============ KPI grid ============ */
.sa-kpi-grid[b-lii2gix2sn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}

.sa-kpi[b-lii2gix2sn] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px 18px 16px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s, box-shadow 0.15s;
}

.sa-kpi:hover[b-lii2gix2sn] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.sa-kpi-value[b-lii2gix2sn] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.05;
    margin-bottom: 6px;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.sa-kpi.is-success .sa-kpi-value[b-lii2gix2sn] { color: var(--badge-success-color); }
.sa-kpi.is-warning .sa-kpi-value[b-lii2gix2sn] { color: var(--badge-warning-color); }
.sa-kpi.is-danger .sa-kpi-value[b-lii2gix2sn] { color: var(--status-offline-color); }

.sa-kpi-sub[b-lii2gix2sn] {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: -0.02em;
}

.sa-kpi-label[b-lii2gix2sn] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ============ States ============ */
.sa-state[b-lii2gix2sn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 70px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.sa-spinner-lg[b-lii2gix2sn] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: sa-spin-b-lii2gix2sn 0.8s linear infinite;
}

@keyframes sa-spin-b-lii2gix2sn {
    to { transform: rotate(360deg); }
}

.sa-alert[b-lii2gix2sn] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

[b-lii2gix2sn] [data-theme="dark"] .sa-alert {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

.sa-empty[b-lii2gix2sn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.sa-empty-icon[b-lii2gix2sn] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.sa-empty-icon.is-success[b-lii2gix2sn] {
    background: var(--badge-success-bg);
    color: var(--badge-success-color);
}

.sa-empty h3[b-lii2gix2sn] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.sa-mt[b-lii2gix2sn] { margin-top: 16px; }

/* ============ Table ============ */
.sa-table-wrap[b-lii2gix2sn] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow-x: auto;
    box-shadow: var(--shadow-sm);
}

.sa-table[b-lii2gix2sn] {
    width: 100%;
    border-collapse: collapse;
}

.sa-table th[b-lii2gix2sn] {
    padding: 12px 16px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-input);
    white-space: nowrap;
}

.sa-table td[b-lii2gix2sn] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13.5px;
    color: var(--text-primary);
    vertical-align: middle;
}

.sa-table tbody tr:hover[b-lii2gix2sn] {
    background: var(--bg-hover);
}

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

.sa-num[b-lii2gix2sn] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ============ Info cell ============ */
.sa-info[b-lii2gix2sn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sa-info strong[b-lii2gix2sn] {
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.sa-info span[b-lii2gix2sn] {
    font-size: 11.5px;
    color: var(--text-muted);
}

.sa-notes-preview[b-lii2gix2sn] {
    display: block;
    font-size: 11.5px;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.sa-muted[b-lii2gix2sn] {
    font-size: 12.5px;
    color: var(--text-muted);
}

.sa-muted.is-stale[b-lii2gix2sn] {
    color: var(--status-offline-color);
    font-weight: 600;
}

.sa-code[b-lii2gix2sn] {
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-input);
    padding: 2px 7px;
    border-radius: 5px;
}

/* ============ Badges ============ */
.sa-plan[b-lii2gix2sn],
.sa-status[b-lii2gix2sn],
.sa-role[b-lii2gix2sn],
.sa-days[b-lii2gix2sn],
.sa-never[b-lii2gix2sn] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Plan badges */
.sa-plan.is-trial[b-lii2gix2sn]      { background: var(--chip-bg);            color: var(--chip-color); }
.sa-plan.is-basic[b-lii2gix2sn]      { background: var(--metric-blue-bg);     color: var(--metric-blue-color); }
.sa-plan.is-pro[b-lii2gix2sn]        { background: var(--metric-purple-bg);   color: var(--metric-purple-color); }
.sa-plan.is-enterprise[b-lii2gix2sn] { background: var(--badge-warning-bg);   color: var(--badge-warning-color); }

/* Status badges */
.sa-status.is-success[b-lii2gix2sn] { background: var(--badge-success-bg);  color: var(--badge-success-color); }
.sa-status.is-warning[b-lii2gix2sn] { background: var(--badge-warning-bg);  color: var(--badge-warning-color); }
.sa-status.is-danger[b-lii2gix2sn]  { background: var(--status-offline-bg); color: var(--status-offline-color); }

/* Role badges */
.sa-role.is-superadmin[b-lii2gix2sn] { background: var(--metric-purple-bg); color: var(--metric-purple-color); }
.sa-role.is-admin[b-lii2gix2sn]      { background: var(--metric-blue-bg);   color: var(--metric-blue-color); }
.sa-role.is-standard[b-lii2gix2sn]   { background: var(--chip-bg);          color: var(--chip-color); }

/* Days badges */
.sa-days.is-danger[b-lii2gix2sn]  { background: var(--status-offline-bg); color: var(--status-offline-color); }
.sa-days.is-warning[b-lii2gix2sn] { background: var(--badge-warning-bg);  color: var(--badge-warning-color); }
.sa-days.is-neutral[b-lii2gix2sn] { background: var(--chip-bg);           color: var(--chip-color); }

/* Never badge */
.sa-never[b-lii2gix2sn] {
    background: var(--status-offline-bg);
    color: var(--status-offline-color);
}

.sa-ok[b-lii2gix2sn] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--badge-success-color);
    letter-spacing: -0.01em;
}

/* ============ Quota bars ============ */
.sa-quota[b-lii2gix2sn] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sa-quota-track[b-lii2gix2sn] {
    flex: 0 0 110px;
    height: 8px;
    background: var(--border-color);
    border-radius: 999px;
    overflow: hidden;
}

.sa-quota-bar[b-lii2gix2sn] {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.sa-quota-bar.is-ok[b-lii2gix2sn]      { background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%); }
.sa-quota-bar.is-warning[b-lii2gix2sn] { background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%); }
.sa-quota-bar.is-danger[b-lii2gix2sn]  { background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%); }

.sa-quota-pct[b-lii2gix2sn] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.sa-quota-pct.is-over[b-lii2gix2sn] {
    color: var(--status-offline-color);
    font-weight: 700;
}

/* ============ MRR ============ */
.sa-mrr[b-lii2gix2sn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sa-mrr-total[b-lii2gix2sn] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.sa-mrr-total[b-lii2gix2sn]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.sa-mrr-label[b-lii2gix2sn] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sa-mrr-value[b-lii2gix2sn] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--badge-success-color);
    letter-spacing: -0.04em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

/* ============ Health card ============ */
.sa-health[b-lii2gix2sn] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-radius: 14px;
    border: 1px solid;
    box-shadow: var(--shadow-sm);
}

.sa-health.is-ok[b-lii2gix2sn] {
    background: var(--badge-success-bg);
    border-color: var(--badge-success-color);
}

.sa-health.is-error[b-lii2gix2sn] {
    background: var(--status-offline-bg);
    border-color: var(--status-offline-color);
}

.sa-health-icon[b-lii2gix2sn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--bg-card);
}

.sa-health.is-ok .sa-health-icon[b-lii2gix2sn] { color: var(--badge-success-color); }
.sa-health.is-error .sa-health-icon[b-lii2gix2sn] { color: var(--status-offline-color); }

.sa-health-info[b-lii2gix2sn] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sa-health-info strong[b-lii2gix2sn] {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.sa-health-info span[b-lii2gix2sn] {
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

/* ============ Buttons ============ */
.sa-btn[b-lii2gix2sn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1.5px solid transparent;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.sa-btn:active:not(:disabled)[b-lii2gix2sn] { transform: scale(0.97); }
.sa-btn:disabled[b-lii2gix2sn] { opacity: 0.55; cursor: not-allowed; }

.sa-btn.is-ghost[b-lii2gix2sn] {
    background: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.sa-btn.is-ghost:hover:not(:disabled)[b-lii2gix2sn] {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.sa-btn.is-primary[b-lii2gix2sn] {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
    padding: 8px 16px;
    font-size: 13px;
}

.sa-btn.is-primary:hover:not(:disabled)[b-lii2gix2sn] {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

[b-lii2gix2sn] [data-theme="dark"] .sa-btn.is-primary { color: var(--bg-page); }

.sa-btn.is-danger[b-lii2gix2sn] {
    background: var(--bg-card);
    color: var(--status-offline-color);
    border-color: rgba(220, 38, 38, 0.4);
}

.sa-btn.is-danger:hover:not(:disabled)[b-lii2gix2sn] {
    background: var(--status-offline-bg);
    border-color: var(--status-offline-color);
}

.sa-row-actions[b-lii2gix2sn] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.sa-spinner-xs[b-lii2gix2sn] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: sa-spin-b-lii2gix2sn 0.6s linear infinite;
}

/* ============ Modals ============ */
.sa-modal-overlay[b-lii2gix2sn] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: sa-fade-b-lii2gix2sn 0.18s ease;
}

@keyframes sa-fade-b-lii2gix2sn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.sa-modal[b-lii2gix2sn] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    width: 460px;
    max-width: 100%;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    animation: sa-modal-in-b-lii2gix2sn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sa-modal-in-b-lii2gix2sn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sa-modal-head[b-lii2gix2sn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color);
}

.sa-modal-head h5[b-lii2gix2sn] {
    margin: 0;
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.sa-modal-sub[b-lii2gix2sn] {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 3px 0 0;
    letter-spacing: -0.01em;
}

.sa-modal-close[b-lii2gix2sn] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.sa-modal-close:hover[b-lii2gix2sn] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.sa-modal-body[b-lii2gix2sn] {
    padding: 20px 22px;
}

.sa-modal-foot[b-lii2gix2sn] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--border-color);
}

.sa-modal-loading[b-lii2gix2sn] {
    text-align: center;
    padding: 24px 0;
}

.sa-field[b-lii2gix2sn] {
    margin-bottom: 12px;
}

.sa-label[b-lii2gix2sn] {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.sa-input[b-lii2gix2sn] {
    width: 100%;
    padding: 9px 11px;
    border: 1.5px solid var(--border-input);
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--text-primary);
    background: var(--bg-input);
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    letter-spacing: -0.01em;
}

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

.sa-textarea[b-lii2gix2sn] {
    resize: vertical;
    min-height: 110px;
    font-family: 'Manrope', sans-serif;
}

.sa-form-hint[b-lii2gix2sn] {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 6px 0 0;
    letter-spacing: -0.01em;
}

.sa-reset-link[b-lii2gix2sn] {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12px;
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    word-break: break-all;
    color: var(--text-primary);
    line-height: 1.5;
    margin-top: 8px;
}

/* ============ Responsive ============ */
@media (max-width: 900px) {
    .sa-kpi-grid[b-lii2gix2sn] {
        grid-template-columns: repeat(2, 1fr);
    }
    .sa-tabbar[b-lii2gix2sn] {
        gap: 0;
    }
    .sa-tab[b-lii2gix2sn] {
        padding: 8px 10px 10px;
        font-size: 12px;
    }
}

@media (max-width: 576px) {
    .sa-kpi-grid[b-lii2gix2sn] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sa-spinner-lg[b-lii2gix2sn],
    .sa-spinner-xs[b-lii2gix2sn] { animation: none; }
    .sa-modal-overlay[b-lii2gix2sn],
    .sa-modal[b-lii2gix2sn] { animation: none; }
    .sa-kpi[b-lii2gix2sn] { transition: none; }
    .sa-btn:active:not(:disabled)[b-lii2gix2sn] { transform: none; }
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* =========================================================
   Error — global error page (scoped)
   ========================================================= */

.er-page[b-7a5i6lzsj3] {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    font-family: 'Manrope', sans-serif;
}

.er-card[b-7a5i6lzsj3] {
    text-align: center;
    max-width: 520px;
    width: 100%;
}

/* ============ Icon ============ */
.er-icon-wrap[b-7a5i6lzsj3] {
    position: relative;
    width: 96px;
    height: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.er-icon-ring[b-7a5i6lzsj3] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.18) 0%, transparent 70%);
    animation: er-pulse-b-7a5i6lzsj3 2.4s ease-in-out infinite;
}

.er-icon-core[b-7a5i6lzsj3] {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fef2f2;
    color: #dc2626;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #fecaca;
}

[b-7a5i6lzsj3] [data-theme="dark"] .er-icon-core {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

@keyframes er-pulse-b-7a5i6lzsj3 {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .er-icon-ring[b-7a5i6lzsj3] { animation: none; }
}

/* ============ Copy ============ */
.er-title[b-7a5i6lzsj3] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    margin: 0 0 10px;
}

.er-sub[b-7a5i6lzsj3] {
    color: var(--text-muted);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0 0 22px;
    letter-spacing: -0.01em;
}

/* ============ Request id ============ */
.er-request-id[b-7a5i6lzsj3] {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 auto 24px;
    text-align: left;
    max-width: 420px;
}

.er-request-label[b-7a5i6lzsj3] {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.er-request-id code[b-7a5i6lzsj3] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    color: var(--text-secondary);
    word-break: break-all;
}

/* ============ Actions ============ */
.er-actions[b-7a5i6lzsj3] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.er-btn-primary[b-7a5i6lzsj3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background: var(--brand-primary);
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.18s, transform 0.1s, box-shadow 0.18s;
    box-shadow: 0 4px 12px var(--brand-primary-ring);
    letter-spacing: -0.01em;
}

.er-btn-primary:hover[b-7a5i6lzsj3] {
    background: var(--brand-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--brand-primary-ring);
}

[b-7a5i6lzsj3] [data-theme="dark"] .er-btn-primary { color: var(--bg-page); }

.er-btn-ghost[b-7a5i6lzsj3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.er-btn-ghost:hover[b-7a5i6lzsj3] {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* =========================================================
   Home v2 — Modern command-center layout
   Inspired by Linear + Intercom + Plain
   ========================================================= */

.hv2[b-en5ghkoddm] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 32px 48px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--text-primary);
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* =========== HERO =========== */
.hv2-hero[b-en5ghkoddm] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 4px 4px 12px;
}

.hv2-hero-left[b-en5ghkoddm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hv2-greeting-eyebrow[b-en5ghkoddm] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hv2-greeting[b-en5ghkoddm] {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--text-primary);
}

.hv2-status[b-en5ghkoddm] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 0;
    font-size: 13px;
}

.hv2-status-pill[b-en5ghkoddm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 12.5px;
}

.hv2-status-pill.ok[b-en5ghkoddm] { color: #15803d; background: var(--badge-success-bg); border-color: transparent; }
.hv2-status-pill.warn[b-en5ghkoddm] { color: var(--badge-warning-color); background: var(--badge-warning-bg); border-color: transparent; }
.hv2-status-pill.danger[b-en5ghkoddm] { color: var(--status-offline-color); background: var(--status-offline-bg); border-color: transparent; }

.hv2-dot[b-en5ghkoddm] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
}
.hv2-dot.ok[b-en5ghkoddm] { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }
.hv2-dot.warn[b-en5ghkoddm] { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
.hv2-dot.danger[b-en5ghkoddm] { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.18); }

.hv2-hero-right[b-en5ghkoddm] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hv2-period[b-en5ghkoddm] {
    display: inline-flex;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 3px;
}

.hv2-period-btn[b-en5ghkoddm] {
    border: 0;
    background: transparent;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.hv2-period-btn:hover[b-en5ghkoddm] { color: var(--text-primary); }
.hv2-period-btn.is-active[b-en5ghkoddm] {
    background: var(--brand-primary);
    color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.12);
}

.hv2-icon-btn[b-en5ghkoddm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}
.hv2-icon-btn:hover[b-en5ghkoddm] { color: var(--text-primary); background: var(--bg-hover); }
.hv2-icon-btn:disabled[b-en5ghkoddm] { opacity: 0.5; cursor: not-allowed; }

@keyframes hv2-spin-b-en5ghkoddm { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.hv2-spin[b-en5ghkoddm] { animation: hv2-spin-b-en5ghkoddm 0.8s linear infinite; }

/* =========== ERROR =========== */
.hv2-error[b-en5ghkoddm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--status-offline-bg);
    color: var(--status-offline-color);
    border: 1px solid rgba(239,68,68,0.25);
    font-size: 14px;
}
.hv2-error-retry[b-en5ghkoddm] {
    margin-left: auto;
    background: transparent;
    border: 1px solid currentColor;
    color: currentColor;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

/* =========== SKELETON =========== */
@keyframes hv2-shimmer-b-en5ghkoddm {
    0% { background-position: -800px 0; }
    100% { background-position: 800px 0; }
}
.hv2-skel[b-en5ghkoddm] {
    background: linear-gradient(90deg, var(--bg-card) 0%, var(--bg-hover) 50%, var(--bg-card) 100%);
    background-size: 1200px 100%;
    animation: hv2-shimmer-b-en5ghkoddm 1.6s ease-in-out infinite;
    border-radius: 14px;
}
.hv2-skel-pulse[b-en5ghkoddm] { height: 104px; }
.hv2-skel-grid[b-en5ghkoddm] { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hv2-skel-block[b-en5ghkoddm] { height: 280px; }
.hv2-skel-chart[b-en5ghkoddm] { height: 320px; }

/* =========== PULSE STRIP =========== */
.hv2-pulse[b-en5ghkoddm] {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: stretch;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 20px 8px;
    box-shadow: var(--shadow-xs);
}

.hv2-kpi[b-en5ghkoddm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 24px;
    min-width: 0;
}

.hv2-kpi-divider[b-en5ghkoddm] {
    width: 1px;
    background: var(--border-subtle);
    margin: 4px 0;
}

.hv2-kpi-head[b-en5ghkoddm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.hv2-kpi-label[b-en5ghkoddm] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.hv2-kpi-value[b-en5ghkoddm] {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.hv2-kpi-sub[b-en5ghkoddm] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

@keyframes hv2-pulse-anim-b-en5ghkoddm {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}
.hv2-kpi-pulse[b-en5ghkoddm] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245,158,11,0.18);
    animation: hv2-pulse-anim-b-en5ghkoddm 1.8s ease-in-out infinite;
}

.hv2-delta[b-en5ghkoddm] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.hv2-delta.up[b-en5ghkoddm] { color: #15803d; background: var(--badge-success-bg); }
.hv2-delta.down[b-en5ghkoddm] { color: var(--status-offline-color); background: var(--status-offline-bg); }

/* sparkline */
.hv2-spark[b-en5ghkoddm] {
    width: 100%;
    height: 28px;
    margin-top: 2px;
}
.hv2-spark-empty[b-en5ghkoddm] {
    width: 100%;
    height: 28px;
    margin-top: 2px;
    background: repeating-linear-gradient(
        90deg,
        var(--border-subtle) 0,
        var(--border-subtle) 2px,
        transparent 2px,
        transparent 6px
    );
    opacity: 0.5;
    border-radius: 2px;
    align-self: flex-end;
    height: 1px;
    margin-bottom: 13px;
    margin-top: 13px;
}
.hv2-spark-area[b-en5ghkoddm] { opacity: 0.15; }
.hv2-spark-line[b-en5ghkoddm] { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hv2-spark.accent .hv2-spark-area[b-en5ghkoddm] { fill: var(--brand-primary); }
.hv2-spark.accent .hv2-spark-line[b-en5ghkoddm] { stroke: var(--brand-primary); }
.hv2-spark.success .hv2-spark-area[b-en5ghkoddm] { fill: #22c55e; }
.hv2-spark.success .hv2-spark-line[b-en5ghkoddm] { stroke: #22c55e; }
.hv2-spark.info .hv2-spark-area[b-en5ghkoddm] { fill: #38bdf8; }
.hv2-spark.info .hv2-spark-line[b-en5ghkoddm] { stroke: #38bdf8; }

/* =========== CARDS (base) =========== */
.hv2-card[b-en5ghkoddm] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hv2-card-head[b-en5ghkoddm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.hv2-card-title[b-en5ghkoddm] {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.hv2-card-sub[b-en5ghkoddm] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

.hv2-count-pill[b-en5ghkoddm] {
    background: var(--status-offline-bg);
    color: var(--status-offline-color);
    font-size: 12px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.hv2-live-dot[b-en5ghkoddm] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
    animation: hv2-pulse-anim-b-en5ghkoddm 2s ease-in-out infinite;
}

/* =========== ROW (2-col) =========== */
.hv2-row[b-en5ghkoddm] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
}

/* =========== ATTENTION =========== */
.hv2-attention[b-en5ghkoddm] { min-height: 280px; }

.hv2-attn-list[b-en5ghkoddm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hv2-attn-item[b-en5ghkoddm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s ease;
    border: 1px solid transparent;
}
.hv2-attn-item:hover[b-en5ghkoddm] {
    background: var(--bg-hover);
    border-color: var(--border-subtle);
}

.hv2-attn-icon[b-en5ghkoddm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
}
.hv2-attn-icon.danger[b-en5ghkoddm] { background: var(--status-offline-bg); color: var(--status-offline-color); }
.hv2-attn-icon.warning[b-en5ghkoddm] { background: var(--badge-warning-bg); color: var(--badge-warning-color); }

.hv2-attn-body[b-en5ghkoddm] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.hv2-attn-title[b-en5ghkoddm] {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
}
.hv2-attn-sub[b-en5ghkoddm] {
    font-size: 12px;
    color: var(--text-muted);
}
.hv2-attn-chev[b-en5ghkoddm] { color: var(--text-muted); flex-shrink: 0; }

/* =========== ACTIVITY =========== */
.hv2-activity[b-en5ghkoddm] { min-height: 280px; }

.hv2-activity-list[b-en5ghkoddm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    position: relative;
}

.hv2-activity-item[b-en5ghkoddm] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 4px;
    position: relative;
}

.hv2-activity-bullet[b-en5ghkoddm] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
    background: var(--text-muted);
}
.hv2-activity-bullet.success[b-en5ghkoddm] { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.15); }
.hv2-activity-bullet.danger[b-en5ghkoddm] { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }
.hv2-activity-bullet.info[b-en5ghkoddm] { background: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,0.15); }
.hv2-activity-bullet.accent[b-en5ghkoddm] { background: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-ring); }

.hv2-activity-body[b-en5ghkoddm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.hv2-activity-title[b-en5ghkoddm] {
    font-size: 13.5px;
    color: var(--text-primary);
    line-height: 1.35;
}
.hv2-activity-sub[b-en5ghkoddm] {
    font-size: 12px;
    color: var(--text-muted);
}
.hv2-activity-time[b-en5ghkoddm] {
    font-size: 11.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    margin-top: 2px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* =========== EMPTY STATE (simples — usado em outros lugares) =========== */
.hv2-empty[b-en5ghkoddm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 36px 20px;
    color: var(--text-muted);
    text-align: center;
    flex: 1;
}
.hv2-empty svg[b-en5ghkoddm] { color: var(--text-muted); opacity: 0.6; margin-bottom: 4px; }
.hv2-empty p[b-en5ghkoddm] { margin: 0; font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.hv2-empty span[b-en5ghkoddm] { font-size: 12.5px; color: var(--text-muted); }

/* =========== EMPTY STATE — ILUSTRADO =========== */
.hv2-empty-art[b-en5ghkoddm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 20px 32px;
    text-align: center;
    flex: 1;
}
.hv2-empty-title[b-en5ghkoddm] {
    margin: 8px 0 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.hv2-empty-sub[b-en5ghkoddm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* --- Variante: SUCCESS (Precisa de você — tudo em ordem) --- */
.hv2-art-success[b-en5ghkoddm] {
    width: 120px;
    height: 120px;
    color: #22c55e;
}
.hv2-art-success svg[b-en5ghkoddm] { width: 100%; height: 100%; overflow: visible; }

.hv2-art-ring[b-en5ghkoddm] {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    transform-origin: 60px 60px;
}
.hv2-art-ring.r1[b-en5ghkoddm] { opacity: 0.16; animation: hv2-ring-spin-b-en5ghkoddm 12s linear infinite; }
.hv2-art-ring.r2[b-en5ghkoddm] { opacity: 0.28; stroke-dasharray: 6 8; animation: hv2-ring-spin-b-en5ghkoddm 9s linear infinite reverse; }
.hv2-art-core[b-en5ghkoddm] {
    fill: rgba(34,197,94,0.12);
    stroke: currentColor;
    stroke-width: 1.5;
    animation: hv2-core-breath-b-en5ghkoddm 3s ease-in-out infinite;
    transform-origin: 60px 60px;
}
.hv2-art-check[b-en5ghkoddm] {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: hv2-check-draw-b-en5ghkoddm 1s 0.25s ease-out forwards;
}
.hv2-art-spark[b-en5ghkoddm] {
    fill: currentColor;
    transform-origin: center;
}
.hv2-art-spark.s1[b-en5ghkoddm] { animation: hv2-twinkle-b-en5ghkoddm 2.4s ease-in-out infinite; }
.hv2-art-spark.s2[b-en5ghkoddm] { animation: hv2-twinkle-b-en5ghkoddm 2.4s 0.4s ease-in-out infinite; }
.hv2-art-spark.s3[b-en5ghkoddm] { animation: hv2-twinkle-b-en5ghkoddm 2.4s 0.8s ease-in-out infinite; }
.hv2-art-spark.s4[b-en5ghkoddm] { animation: hv2-twinkle-b-en5ghkoddm 2.4s 1.2s ease-in-out infinite; }
.hv2-art-spark.s5[b-en5ghkoddm] { animation: hv2-twinkle-b-en5ghkoddm 2.4s 1.6s ease-in-out infinite; }
.hv2-art-spark.s6[b-en5ghkoddm] { animation: hv2-twinkle-b-en5ghkoddm 2.4s 2.0s ease-in-out infinite; }

@keyframes hv2-ring-spin-b-en5ghkoddm {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}
@keyframes hv2-core-breath-b-en5ghkoddm {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
@keyframes hv2-check-draw-b-en5ghkoddm {
    to { stroke-dashoffset: 0; }
}
@keyframes hv2-twinkle-b-en5ghkoddm {
    0%, 100% { opacity: 0.1; transform: scale(0.7); }
    50% { opacity: 0.9; transform: scale(1.2); }
}

/* --- Variante: RADAR (Atividade — escutando) --- */
.hv2-art-radar[b-en5ghkoddm] {
    width: 120px;
    height: 120px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hv2-radar-wave[b-en5ghkoddm] {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid var(--brand-primary);
    width: 22px;
    height: 22px;
    opacity: 0;
    animation: hv2-radar-b-en5ghkoddm 2.8s ease-out infinite;
}
.hv2-radar-wave.w2[b-en5ghkoddm] { animation-delay: 0.9s; }
.hv2-radar-wave.w3[b-en5ghkoddm] { animation-delay: 1.8s; }
.hv2-radar-core[b-en5ghkoddm] {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand-primary);
    box-shadow:
        0 0 0 6px var(--brand-primary-ring),
        0 0 24px var(--brand-primary-ring);
    animation: hv2-core-breath-b-en5ghkoddm 2s ease-in-out infinite;
}

@keyframes hv2-radar-b-en5ghkoddm {
    0% {
        width: 22px;
        height: 22px;
        opacity: 0.6;
        border-width: 2px;
    }
    100% {
        width: 120px;
        height: 120px;
        opacity: 0;
        border-width: 1px;
    }
}

/* Respeitar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .hv2-art-ring[b-en5ghkoddm],
    .hv2-art-core[b-en5ghkoddm],
    .hv2-art-check[b-en5ghkoddm],
    .hv2-art-spark[b-en5ghkoddm],
    .hv2-radar-wave[b-en5ghkoddm],
    .hv2-radar-core[b-en5ghkoddm] {
        animation: none !important;
    }
    .hv2-art-check[b-en5ghkoddm] { stroke-dashoffset: 0; }
}

/* =========== CHART =========== */
.hv2-chart-card[b-en5ghkoddm] { padding-bottom: 8px; }
.hv2-chart-card.is-empty[b-en5ghkoddm] {
    padding: 14px 18px;
    gap: 10px;
}

.hv2-chart-empty-inline[b-en5ghkoddm] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 2px 2px;
    color: var(--brand-primary);
}
.hv2-chart-empty-spark[b-en5ghkoddm] {
    flex: 0 0 96px;
    width: 96px;
    height: 28px;
    opacity: 0.55;
}
.hv2-chart-empty-text[b-en5ghkoddm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.hv2-chart-empty-title[b-en5ghkoddm] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.hv2-chart-empty-sub[b-en5ghkoddm] {
    font-size: 12px;
    color: var(--text-muted);
}

.hv2-chart-legend[b-en5ghkoddm] {
    display: flex;
    gap: 16px;
}
.hv2-legend-item[b-en5ghkoddm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
}
.hv2-legend-item b[b-en5ghkoddm] {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.hv2-legend-swatch[b-en5ghkoddm] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}
.hv2-legend-swatch.sent[b-en5ghkoddm] { background: var(--brand-primary); }
.hv2-legend-swatch.received[b-en5ghkoddm] { background: #38bdf8; }

.hv2-chart-wrap[b-en5ghkoddm] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hv2-chart[b-en5ghkoddm] {
    width: 100%;
    height: 220px;
    overflow: visible;
}
.hv2-chart-grid[b-en5ghkoddm] {
    stroke: var(--border-subtle);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}
.hv2-chart-area[b-en5ghkoddm] {
    opacity: 0.16;
    transition: opacity 0.15s ease;
}
.hv2-chart-area.sent[b-en5ghkoddm] { fill: var(--brand-primary); }
.hv2-chart-area.received[b-en5ghkoddm] { fill: #38bdf8; }
.hv2-chart-line[b-en5ghkoddm] {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hv2-chart-line.sent[b-en5ghkoddm] { stroke: var(--brand-primary); }
.hv2-chart-line.received[b-en5ghkoddm] { stroke: #38bdf8; }
.hv2-chart-dot.sent[b-en5ghkoddm] { fill: var(--brand-primary); }
.hv2-chart-dot.received[b-en5ghkoddm] { fill: #38bdf8; }
.hv2-chart-dot[b-en5ghkoddm] {
    stroke: var(--bg-card);
    stroke-width: 2;
}

.hv2-chart-xaxis[b-en5ghkoddm] {
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
    font-size: 11.5px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* =========== CONNECTIONS =========== */
.hv2-conn-grid[b-en5ghkoddm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.hv2-conn-chip[b-en5ghkoddm] {
    background: var(--bg-hover);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 14px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hv2-conn-chip:hover[b-en5ghkoddm] {
    transform: translateY(-1px);
    border-color: var(--brand-primary);
    box-shadow: 0 4px 12px var(--brand-primary-ring);
}

.hv2-conn-chip-head[b-en5ghkoddm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hv2-conn-status[b-en5ghkoddm] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hv2-conn-status.ok[b-en5ghkoddm] { color: #15803d; }
.hv2-conn-status.warn[b-en5ghkoddm] { color: var(--badge-warning-color); }
.hv2-conn-status.danger[b-en5ghkoddm] { color: var(--status-offline-color); }

.hv2-conn-badge[b-en5ghkoddm] {
    background: var(--brand-primary);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.hv2-conn-name[b-en5ghkoddm] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hv2-conn-phone[b-en5ghkoddm] {
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.hv2-btn-primary[b-en5ghkoddm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--brand-primary);
    color: white;
    border: 0;
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.12);
}
.hv2-btn-primary:hover[b-en5ghkoddm] {
    background: var(--brand-primary-hover);
    transform: translateY(-1px);
}

/* =========== RESPONSIVE =========== */
@media (max-width: 1100px) {
    .hv2-pulse[b-en5ghkoddm] {
        grid-template-columns: 1fr 1fr;
        gap: 16px 0;
    }
    .hv2-kpi-divider[b-en5ghkoddm] { display: none; }
    .hv2-row[b-en5ghkoddm] { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .hv2[b-en5ghkoddm] { padding: 16px; gap: 16px; }
    .hv2-hero[b-en5ghkoddm] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .hv2-greeting[b-en5ghkoddm] { font-size: 22px; }
    .hv2-pulse[b-en5ghkoddm] { grid-template-columns: 1fr; padding: 4px; }
    .hv2-kpi[b-en5ghkoddm] { padding: 16px; border-top: 1px solid var(--border-subtle); }
    .hv2-kpi:first-child[b-en5ghkoddm] { border-top: 0; }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* =========================================================
   Login — auth form (scoped, renders inside AuthShell)
   ========================================================= */

.lg-head[b-jv3a6riqw2] {
    margin-bottom: 28px;
}

.lg-title[b-jv3a6riqw2] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.lg-sub[b-jv3a6riqw2] {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

/* ============ Form ============ */
.lg-form[b-jv3a6riqw2] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.lg-field[b-jv3a6riqw2] {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}

.lg-label[b-jv3a6riqw2] {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.lg-input-wrap[b-jv3a6riqw2] {
    position: relative;
    display: flex;
    align-items: center;
}

.lg-input-icon[b-jv3a6riqw2] {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.lg-input-wrap[b-jv3a6riqw2]  .lg-input {
    width: 100%;
    padding: 11px 14px 11px 44px;
    border: 1.5px solid var(--border-input);
    border-radius: 10px;
    font-size: 14.5px;
    color: var(--text-primary);
    background: var(--bg-input);
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.lg-input-wrap[b-jv3a6riqw2]  .lg-input.has-toggle { padding-right: 44px; }

.lg-input-wrap[b-jv3a6riqw2]  .lg-input:hover { border-color: var(--text-muted); }

.lg-input-wrap[b-jv3a6riqw2]  .lg-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px var(--brand-primary-ring);
}

.lg-input-wrap[b-jv3a6riqw2]  .lg-input::placeholder { color: var(--text-placeholder); }

.lg-toggle[b-jv3a6riqw2] {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.lg-toggle:hover[b-jv3a6riqw2] {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.lg-field-error[b-jv3a6riqw2] {
    color: #dc2626;
    font-size: 12.5px;
    margin-top: 6px;
    display: block;
    letter-spacing: -0.01em;
}

[b-jv3a6riqw2] [data-theme="dark"] .lg-field-error { color: #f87171; }

/* ============ Alert ============ */
.lg-alert[b-jv3a6riqw2] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 13.5px;
    letter-spacing: -0.01em;
    font-weight: 500;
}

.lg-alert svg[b-jv3a6riqw2] { flex-shrink: 0; }

[b-jv3a6riqw2] [data-theme="dark"] .lg-alert {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

/* ============ Forgot ============ */
.lg-forgot[b-jv3a6riqw2] {
    text-align: right;
    margin-top: -8px;
    margin-bottom: 14px;
}

.lg-forgot a[b-jv3a6riqw2] {
    color: var(--brand-primary);
    font-size: 13px;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: color 0.15s;
}

.lg-forgot a:hover[b-jv3a6riqw2] {
    color: var(--brand-primary-hover);
    text-decoration: underline;
}

/* ============ Submit button ============ */
.lg-submit[b-jv3a6riqw2] {
    width: 100%;
    padding: 12px 16px;
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, transform 0.1s, box-shadow 0.18s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    letter-spacing: -0.01em;
    font-family: 'Manrope', sans-serif;
    box-shadow: 0 4px 12px var(--brand-primary-ring);
}

.lg-submit:hover:not(:disabled)[b-jv3a6riqw2] {
    background: var(--brand-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--brand-primary-ring);
}

.lg-submit:active:not(:disabled)[b-jv3a6riqw2] { transform: scale(0.99); }

.lg-submit:disabled[b-jv3a6riqw2] {
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
}

[b-jv3a6riqw2] [data-theme="dark"] .lg-submit { color: var(--bg-page); }

.lg-spinner[b-jv3a6riqw2] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: lg-spin-b-jv3a6riqw2 0.7s linear infinite;
}

@keyframes lg-spin-b-jv3a6riqw2 {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .lg-spinner[b-jv3a6riqw2] { animation: none; }
    .lg-submit:hover:not(:disabled)[b-jv3a6riqw2] { transform: none; }
}

/* ============ Meta line ============ */
.lg-meta[b-jv3a6riqw2] {
    margin: 18px 0 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 13.5px;
}

.lg-meta a[b-jv3a6riqw2] {
    color: var(--brand-primary);
    font-weight: 600;
    text-decoration: none;
}

.lg-meta a:hover[b-jv3a6riqw2] { text-decoration: underline; }
/* /Components/Pages/NotFound.razor.rz.scp.css */
/* =========================================================
   NotFound — 404 page (scoped, inside MainLayout)
   ========================================================= */

.nf-page[b-wb1jisbz1h] {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    font-family: 'Manrope', sans-serif;
}

.nf-card[b-wb1jisbz1h] {
    text-align: center;
    max-width: 520px;
    width: 100%;
}

/* ============ Animated 404 ============ */
.nf-code-stack[b-wb1jisbz1h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 28px;
}

.nf-code-digit[b-wb1jisbz1h] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 120px;
    font-weight: 800;
    line-height: 1;
    color: var(--brand-primary);
    letter-spacing: -0.06em;
    background: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nf-code-orb[b-wb1jisbz1h] {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-primary-light);
    border: 2px solid var(--brand-primary);
    overflow: hidden;
}

.nf-code-glow[b-wb1jisbz1h] {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 30% 30%, var(--brand-primary) 0%, transparent 70%);
    opacity: 0.35;
    filter: blur(20px);
    animation: nf-pulse-b-wb1jisbz1h 3.2s ease-in-out infinite;
}

.nf-code-zero[b-wb1jisbz1h] {
    position: relative;
    z-index: 1;
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 72px;
    font-weight: 800;
    line-height: 1;
    color: var(--brand-primary);
    letter-spacing: -0.06em;
}

@keyframes nf-pulse-b-wb1jisbz1h {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .nf-code-glow[b-wb1jisbz1h] { animation: none; }
}

/* ============ Copy ============ */
.nf-title[b-wb1jisbz1h] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    margin: 0 0 10px;
}

.nf-sub[b-wb1jisbz1h] {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 28px;
    letter-spacing: -0.01em;
}

/* ============ Actions ============ */
.nf-actions[b-wb1jisbz1h] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.nf-btn-primary[b-wb1jisbz1h] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background: var(--brand-primary);
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.18s, transform 0.1s, box-shadow 0.18s;
    box-shadow: 0 4px 12px var(--brand-primary-ring);
    letter-spacing: -0.01em;
}

.nf-btn-primary:hover[b-wb1jisbz1h] {
    background: var(--brand-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--brand-primary-ring);
}

[b-wb1jisbz1h] [data-theme="dark"] .nf-btn-primary { color: var(--bg-page); }

.nf-btn-ghost[b-wb1jisbz1h] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background: transparent;
    color: var(--text-secondary);
    text-decoration: none;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    letter-spacing: -0.01em;
}

.nf-btn-ghost:hover[b-wb1jisbz1h] {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .nf-code-digit[b-wb1jisbz1h] { font-size: 88px; }
    .nf-code-orb[b-wb1jisbz1h] { width: 84px; height: 84px; }
    .nf-code-zero[b-wb1jisbz1h] { font-size: 54px; }
    .nf-title[b-wb1jisbz1h] { font-size: 22px; }
}
/* /Components/Pages/Plans.razor.rz.scp.css */
/* =========================================================
   Plans (scoped) — pl- prefix
   ========================================================= */

.pl-wrapper[b-v9up6eeb01] {
    min-height: 100vh;
    background: var(--bg-page);
    font-family: 'Manrope', sans-serif;
    color: var(--text-primary);
}

.pl-container[b-v9up6eeb01] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 24px 64px;
}

/* ============ Header ============ */
.pl-header[b-v9up6eeb01] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48px;
}

.pl-logo[b-v9up6eeb01] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: -0.04em;
}

.pl-nav[b-v9up6eeb01] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.pl-nav a[b-v9up6eeb01] {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: -0.01em;
    transition: color 0.15s;
}

.pl-nav a:hover[b-v9up6eeb01] { color: var(--brand-primary); }

.pl-nav-cta[b-v9up6eeb01] {
    background: var(--brand-primary);
    color: #fff !important;
    padding: 9px 16px;
    border-radius: 9px;
    box-shadow: 0 4px 12px var(--brand-primary-ring);
    transition: background 0.15s, transform 0.1s;
}

.pl-nav-cta:hover[b-v9up6eeb01] {
    background: var(--brand-primary-hover);
    color: #fff;
    transform: translateY(-1px);
}

[b-v9up6eeb01] [data-theme="dark"] .pl-nav-cta { color: var(--bg-page) !important; }

/* ============ Hero ============ */
.pl-hero[b-v9up6eeb01] {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}

.pl-hero h1[b-v9up6eeb01] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.04em;
    margin: 0 0 12px;
    color: var(--text-primary);
    line-height: 1.1;
}

.pl-hero p[b-v9up6eeb01] {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
    letter-spacing: -0.01em;
}

/* ============ Track headers ============ */
.pl-track-head[b-v9up6eeb01] {
    margin-bottom: 20px;
}

.pl-track-label[b-v9up6eeb01] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    letter-spacing: -0.025em;
}

.pl-track-head.is-oficial .pl-track-label[b-v9up6eeb01] { color: #16a34a; }

[b-v9up6eeb01] [data-theme="dark"] .pl-track-head.is-oficial .pl-track-label { color: #4ade80; }

.pl-track-desc[b-v9up6eeb01] {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

.pl-track-divider[b-v9up6eeb01] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 16px 0 40px;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pl-track-divider[b-v9up6eeb01]::before,
.pl-track-divider[b-v9up6eeb01]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

/* ============ Grids ============ */
.pl-grid[b-v9up6eeb01],
.pl-grid-oficial[b-v9up6eeb01] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin-bottom: 40px;
}

.pl-grid-oficial[b-v9up6eeb01] { margin-bottom: 16px; }

/* ============ Card ============ */
.pl-card[b-v9up6eeb01] {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.pl-card:hover[b-v9up6eeb01] {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.pl-card.is-popular[b-v9up6eeb01] {
    border-color: var(--brand-primary);
    box-shadow: 0 10px 30px var(--brand-primary-ring);
}

.pl-card.is-oficial[b-v9up6eeb01] {
    border-color: rgba(22, 163, 74, 0.32);
    background: #f0fdf4;
}

[b-v9up6eeb01] [data-theme="dark"] .pl-card.is-oficial {
    background: rgba(22, 163, 74, 0.08);
    border-color: rgba(22, 163, 74, 0.28);
}

.pl-card.is-popular-oficial[b-v9up6eeb01] {
    border-color: #16a34a;
    box-shadow: 0 10px 30px rgba(22, 163, 74, 0.18);
}

/* ============ Badge ============ */
.pl-badge[b-v9up6eeb01] {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand-primary);
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.pl-badge.is-oficial[b-v9up6eeb01] { background: #16a34a; }

[b-v9up6eeb01] [data-theme="dark"] .pl-badge { color: var(--bg-page); }

/* ============ Card head & price ============ */
.pl-card-head[b-v9up6eeb01] { margin-bottom: 18px; }

.pl-card-head h3[b-v9up6eeb01] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--text-primary);
    letter-spacing: -0.025em;
}

.pl-price[b-v9up6eeb01] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.pl-price-currency[b-v9up6eeb01] {
    font-size: 15px;
    color: var(--text-muted);
    font-weight: 600;
}

.pl-price-value[b-v9up6eeb01] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.04em;
}

.pl-price-value.is-oficial[b-v9up6eeb01] {
    font-size: 22px;
    color: #15803d;
}

[b-v9up6eeb01] [data-theme="dark"] .pl-price-value.is-oficial { color: #4ade80; }

.pl-price-period[b-v9up6eeb01] {
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: -0.01em;
}

/* ============ Features ============ */
.pl-features[b-v9up6eeb01] {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.pl-features li[b-v9up6eeb01] {
    font-size: 13px;
    color: var(--text-secondary);
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
    letter-spacing: -0.005em;
}

.pl-features li[b-v9up6eeb01]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-primary);
}

.pl-card.is-oficial .pl-features li[b-v9up6eeb01]::before,
.pl-card.is-popular-oficial .pl-features li[b-v9up6eeb01]::before {
    background: #16a34a;
}

.pl-features strong[b-v9up6eeb01] {
    color: var(--text-primary);
    font-weight: 700;
}

/* ============ CTA buttons ============ */
.pl-btn[b-v9up6eeb01] {
    display: block;
    text-align: center;
    padding: 11px 16px;
    border: 1.5px solid var(--brand-primary);
    color: var(--brand-primary);
    border-radius: 10px;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
    background: transparent;
}

.pl-btn:hover[b-v9up6eeb01] {
    background: var(--brand-primary-light);
    transform: translateY(-1px);
}

.pl-btn.is-primary[b-v9up6eeb01] {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
    box-shadow: 0 4px 12px var(--brand-primary-ring);
}

.pl-btn.is-primary:hover[b-v9up6eeb01] {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color: #fff;
}

[b-v9up6eeb01] [data-theme="dark"] .pl-btn.is-primary { color: var(--bg-page); }

.pl-btn.is-oficial[b-v9up6eeb01] {
    border-color: #16a34a;
    color: #15803d;
}

.pl-btn.is-oficial:hover[b-v9up6eeb01] {
    background: #dcfce7;
    color: #15803d;
}

[b-v9up6eeb01] [data-theme="dark"] .pl-btn.is-oficial {
    color: #4ade80;
    border-color: rgba(22, 163, 74, 0.48);
}

[b-v9up6eeb01] [data-theme="dark"] .pl-btn.is-oficial:hover {
    background: rgba(22, 163, 74, 0.16);
}

/* ============ Disclaimer ============ */
.pl-disclaimer[b-v9up6eeb01] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 48px;
    line-height: 1.5;
    letter-spacing: -0.005em;
}

.pl-disclaimer svg[b-v9up6eeb01] {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--text-muted);
}

/* ============ Compare ============ */
.pl-compare[b-v9up6eeb01] {
    margin: 48px 0;
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
    box-shadow: var(--shadow-sm);
}

.pl-compare h2[b-v9up6eeb01] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    text-align: center;
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 24px;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.pl-compare-grid[b-v9up6eeb01] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.pl-compare-col h4[b-v9up6eeb01] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.pl-compare-col ul[b-v9up6eeb01] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.pl-compare-col ul li[b-v9up6eeb01] {
    font-size: 13px;
    color: var(--text-secondary);
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
}

.pl-compare-col ul li[b-v9up6eeb01]::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--brand-primary);
    font-weight: 700;
    font-size: 12px;
}

/* ============ FAQ ============ */
.pl-faq[b-v9up6eeb01] {
    max-width: 880px;
    margin: 0 auto;
}

.pl-faq h2[b-v9up6eeb01] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 28px;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.pl-faq-grid[b-v9up6eeb01] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px 32px;
}

.pl-faq-grid h4[b-v9up6eeb01] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    margin: 0 0 6px;
    color: var(--text-primary);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.pl-faq-grid p[b-v9up6eeb01] {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
    letter-spacing: -0.005em;
}

@media (prefers-reduced-motion: reduce) {
    .pl-card:hover[b-v9up6eeb01],
    .pl-btn:hover[b-v9up6eeb01],
    .pl-nav-cta:hover[b-v9up6eeb01] { transform: none; }
}

/* ============ Responsive ============ */
@media (max-width: 768px) {
    .pl-hero h1[b-v9up6eeb01] { font-size: 28px; }
    .pl-compare-grid[b-v9up6eeb01] { grid-template-columns: 1fr; }
    .pl-compare[b-v9up6eeb01] { padding: 22px; }
}

@media (max-width: 480px) {
    .pl-container[b-v9up6eeb01] { padding: 18px 16px 48px; }
    .pl-header[b-v9up6eeb01] { margin-bottom: 32px; }
    .pl-nav[b-v9up6eeb01] { gap: 12px; }
}
/* /Components/Pages/Signup.razor.rz.scp.css */
/* =========================================================
   Signup — multi-section form (scoped, inside AuthShell)
   ========================================================= */

.sg-head[b-7sda7g64ub] {
    margin-bottom: 22px;
}

.sg-title[b-7sda7g64ub] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.sg-sub[b-7sda7g64ub] {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

/* ============ Plan banner ============ */
.sg-plan-banner[b-7sda7g64ub] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--brand-primary-light);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 22px;
}

.sg-plan-icon[b-7sda7g64ub] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px var(--brand-primary-ring);
}

.sg-plan-body[b-7sda7g64ub] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.sg-plan-label[b-7sda7g64ub] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--brand-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sg-plan-name[b-7sda7g64ub] {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.sg-plan-change[b-7sda7g64ub] {
    flex-shrink: 0;
    color: var(--brand-primary);
    font-weight: 600;
    font-size: 12.5px;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.sg-plan-change:hover[b-7sda7g64ub] {
    background: var(--bg-card);
    border-color: var(--border-color);
}

/* ============ Form ============ */
.sg-form[b-7sda7g64ub] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sg-section[b-7sda7g64ub] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--brand-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 18px 0 10px;
}

.sg-section:first-of-type[b-7sda7g64ub] { margin-top: 0; }

.sg-field[b-7sda7g64ub] {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.sg-label[b-7sda7g64ub] {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.sg-input-wrap[b-7sda7g64ub] {
    position: relative;
    display: flex;
    align-items: center;
}

.sg-field[b-7sda7g64ub]  .sg-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border-input);
    border-radius: 10px;
    font-size: 14.5px;
    color: var(--text-primary);
    background: var(--bg-input);
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.sg-field[b-7sda7g64ub]  .sg-input.has-toggle { padding-right: 44px; }

.sg-field[b-7sda7g64ub]  .sg-input:hover { border-color: var(--text-muted); }

.sg-field[b-7sda7g64ub]  .sg-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px var(--brand-primary-ring);
}

.sg-field[b-7sda7g64ub]  .sg-input::placeholder { color: var(--text-placeholder); }

.sg-toggle[b-7sda7g64ub] {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.sg-toggle:hover[b-7sda7g64ub] {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.sg-error[b-7sda7g64ub] {
    color: #dc2626;
    font-size: 12.5px;
    margin-top: 6px;
    display: block;
    letter-spacing: -0.01em;
}

[b-7sda7g64ub] [data-theme="dark"] .sg-error { color: #f87171; }

/* ============ Password strength ============ */
.sg-strength[b-7sda7g64ub] {
    margin-top: 10px;
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    animation: sg-fade-b-7sda7g64ub 0.18s ease-out;
}

@keyframes sg-fade-b-7sda7g64ub {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.sg-strength-bar[b-7sda7g64ub] {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.sg-seg[b-7sda7g64ub] {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: var(--border-subtle);
    transition: background 0.25s;
}

.sg-seg.empty[b-7sda7g64ub] { background: var(--border-subtle); }
.sg-seg.weak[b-7sda7g64ub] { background: #ef4444; }
.sg-seg.medium[b-7sda7g64ub] { background: #f59e0b; }
.sg-seg.good[b-7sda7g64ub] { background: #84cc16; }
.sg-seg.strong[b-7sda7g64ub] { background: #16a34a; }

.sg-rules[b-7sda7g64ub] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sg-rules li[b-7sda7g64ub] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    transition: color 0.2s;
}

.sg-rules .pending[b-7sda7g64ub] { color: var(--text-muted); }
.sg-rules .pending svg[b-7sda7g64ub] { color: var(--border-input); }

.sg-rules .ok[b-7sda7g64ub] {
    color: #15803d;
    font-weight: 500;
}

.sg-rules .ok svg[b-7sda7g64ub] { color: #16a34a; }

[b-7sda7g64ub] [data-theme="dark"] .sg-rules .ok { color: #4ade80; }
[b-7sda7g64ub] [data-theme="dark"] .sg-rules .ok svg { color: #4ade80; }

/* ============ Alert ============ */
.sg-alert[b-7sda7g64ub] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 13.5px;
    letter-spacing: -0.01em;
    font-weight: 500;
}

.sg-alert svg[b-7sda7g64ub] { flex-shrink: 0; }

[b-7sda7g64ub] [data-theme="dark"] .sg-alert {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

/* ============ Submit ============ */
.sg-submit[b-7sda7g64ub] {
    width: 100%;
    padding: 12px 16px;
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, transform 0.1s, box-shadow 0.18s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    letter-spacing: -0.01em;
    font-family: 'Manrope', sans-serif;
    text-decoration: none;
    box-shadow: 0 4px 12px var(--brand-primary-ring);
}

.sg-submit:hover:not(:disabled)[b-7sda7g64ub] {
    background: var(--brand-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--brand-primary-ring);
}

.sg-submit:active:not(:disabled)[b-7sda7g64ub] { transform: scale(0.99); }

.sg-submit:disabled[b-7sda7g64ub] {
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
}

[b-7sda7g64ub] [data-theme="dark"] .sg-submit { color: var(--bg-page); }

.sg-spinner[b-7sda7g64ub] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: sg-spin-b-7sda7g64ub 0.7s linear infinite;
}

@keyframes sg-spin-b-7sda7g64ub {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sg-spinner[b-7sda7g64ub] { animation: none; }
    .sg-strength[b-7sda7g64ub] { animation: none; }
    .sg-submit:hover:not(:disabled)[b-7sda7g64ub] { transform: none; }
}

/* ============ Meta ============ */
.sg-meta[b-7sda7g64ub] {
    margin: 18px 0 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 13.5px;
}

.sg-meta a[b-7sda7g64ub] {
    color: var(--brand-primary);
    font-weight: 600;
    text-decoration: none;
}

.sg-meta a:hover[b-7sda7g64ub] { text-decoration: underline; }

/* ============ Success state ============ */
.sg-success[b-7sda7g64ub] {
    padding: 12px 0;
}
/* /Components/Pages/WhatsApp/AgentReports.razor.rz.scp.css */
/* ============================
   Agent Reports Page
   ============================ */

.rpt-page[b-o1rtvgny6v] {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
}

.rpt-page-header[b-o1rtvgny6v] {
    margin-bottom: 2rem;
}

.rpt-title[b-o1rtvgny6v] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    letter-spacing: -0.04em;
}

.rpt-subtitle[b-o1rtvgny6v] {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}

/* ============================
   Filter bar
   ============================ */

.rpt-filters[b-o1rtvgny6v] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1rem 1.25rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.rpt-filter-group[b-o1rtvgny6v] {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    min-width: 160px;
}

.rpt-filter-group.grow[b-o1rtvgny6v] { flex: 1; }

.rpt-filter-label[b-o1rtvgny6v] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rpt-select[b-o1rtvgny6v],
.rpt-input-date[b-o1rtvgny6v] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--bg-input, var(--bg-card));
    transition: border-color 0.15s;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.rpt-select:focus[b-o1rtvgny6v],
.rpt-input-date:focus[b-o1rtvgny6v] {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px var(--brand-primary-ring);
}

.rpt-filter-actions[b-o1rtvgny6v] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    padding-bottom: 0;
}

.rpt-btn-generate[b-o1rtvgny6v] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1.125rem;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.rpt-btn-generate:hover:not(:disabled)[b-o1rtvgny6v] { opacity: 0.88; }
.rpt-btn-generate:disabled[b-o1rtvgny6v] { opacity: 0.5; cursor: not-allowed; }

.rpt-btn-export[b-o1rtvgny6v] {
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.rpt-btn-export:hover[b-o1rtvgny6v] { background: var(--bg-hover); }

/* ============================
   Error
   ============================ */

.rpt-alert-error[b-o1rtvgny6v] {
    padding: 0.75rem 1rem;
    background: #fff0f0;
    border: 1px solid #ffd0d0;
    border-radius: var(--radius-md);
    color: #c0392b;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

/* ============================
   Stat cards
   ============================ */

.rpt-stats[b-o1rtvgny6v] {
    display: flex;
    gap: 0.875rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.rpt-stat-card[b-o1rtvgny6v] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.25rem 1.5rem;
    min-width: 130px;
    flex: 1;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.rpt-stat-value[b-o1rtvgny6v] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.04em;
    line-height: 1;
}

.rpt-stat-label[b-o1rtvgny6v] {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    text-align: center;
}

/* ============================
   Empty state
   ============================ */

.rpt-empty[b-o1rtvgny6v] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 3rem 2.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.rpt-empty-title[b-o1rtvgny6v] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.rpt-empty-desc[b-o1rtvgny6v] {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}

/* ============================
   Table card
   ============================ */

.rpt-table-card[b-o1rtvgny6v] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.rpt-table[b-o1rtvgny6v] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

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

.rpt-table th[b-o1rtvgny6v] {
    padding: 0.75rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rpt-table th.left[b-o1rtvgny6v]  { text-align: left; }
.rpt-table th.center[b-o1rtvgny6v] { text-align: center; }

.rpt-table tbody tr[b-o1rtvgny6v] {
    border-bottom: 1px solid var(--border-subtle);
    transition: background 0.12s;
}

.rpt-table tbody tr:last-child[b-o1rtvgny6v] { border-bottom: none; }
.rpt-table tbody tr:hover[b-o1rtvgny6v] { background: var(--bg-hover); }

.rpt-table td[b-o1rtvgny6v] {
    padding: 0.75rem 1.25rem;
}

.rpt-agent-name[b-o1rtvgny6v] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.rpt-agent-email[b-o1rtvgny6v] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 1px;
}

.rpt-cell-center[b-o1rtvgny6v] {
    text-align: center;
    color: var(--text-secondary);
}

.rpt-cell-count[b-o1rtvgny6v] {
    text-align: center;
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1rem;
}
/* /Components/Pages/WhatsApp/BotFlows.razor.rz.scp.css */
/* ============================
   BotFlows Page
   ============================ */

.detail-page[b-cye2slvoll] { padding: 1.5rem; max-width: 900px; margin: 0 auto; }

.detail-header[b-cye2slvoll] {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap;
}
.header-left[b-cye2slvoll] { display: flex; align-items: center; gap: 0.75rem; }
.header-actions[b-cye2slvoll] { display: flex; gap: 0.5rem; }

.btn-back[b-cye2slvoll] {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    padding: 0.25rem; display: flex; align-items: center; transition: color 0.15s;
}
.btn-back:hover[b-cye2slvoll] { color: var(--brand-primary); }

.detail-title[b-cye2slvoll] { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.detail-subtitle[b-cye2slvoll] { font-size: 0.82rem; color: var(--text-muted); margin: 0; }

.btn-header[b-cye2slvoll] {
    display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem;
    border: none; border-radius: 8px; font-size: 0.875rem; font-weight: 600;
    cursor: pointer; transition: background 0.2s;
}
.btn-header.chat[b-cye2slvoll] { background: var(--brand-primary); color: #fff; }
.btn-header.chat:hover[b-cye2slvoll] { background: var(--brand-primary-hover); }
.btn-header.templates[b-cye2slvoll] {
    background: var(--bg-hover); color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.btn-header.templates:hover[b-cye2slvoll] { background: var(--border-color); }

.loading-state[b-cye2slvoll] { display: flex; justify-content: center; padding: 3rem; }

/* ============================
   Section Card
   ============================ */

.section-card[b-cye2slvoll] {
    background: var(--bg-card); border-radius: 12px; padding: 1.5rem;
    box-shadow: var(--shadow-sm); margin-bottom: 1rem; border: 1px solid var(--border-color);
}
.section-card-header[b-cye2slvoll] { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.section-icon[b-cye2slvoll] {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.section-icon.bot[b-cye2slvoll] { background: var(--brand-primary-light); color: var(--brand-primary); }
.section-heading[b-cye2slvoll] { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0; flex: 1; }

/* ============================
   Templates
   ============================ */

.templates-grid[b-cye2slvoll] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.875rem;
}
.template-card[b-cye2slvoll] {
    display: flex; align-items: flex-start; gap: 0.875rem; padding: 1rem;
    border: 1px solid var(--border-color); border-radius: 10px; cursor: pointer;
    transition: all 0.15s; background: var(--bg-page);
}
.template-card:hover[b-cye2slvoll] {
    border-color: var(--brand-primary);
    background: var(--brand-primary-light);
    box-shadow: 0 2px 8px var(--brand-primary-ring);
}
.template-icon[b-cye2slvoll] { font-size: 1.75rem; flex-shrink: 0; }
.template-name[b-cye2slvoll] { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
.template-desc[b-cye2slvoll] { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; line-height: 1.4; }
.template-keywords[b-cye2slvoll] { font-size: 0.72rem; color: var(--text-placeholder); margin-top: 0.3rem; }

/* ============================
   Editor
   ============================ */

.editor-card[b-cye2slvoll] { max-width: 100%; }
.editor-form[b-cye2slvoll] { display: flex; flex-direction: column; gap: 1rem; }
.form-row-2[b-cye2slvoll] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

@media (max-width: 600px) { .form-row-2[b-cye2slvoll] { grid-template-columns: 1fr; } }

.form-group[b-cye2slvoll] { display: flex; flex-direction: column; gap: 0.3rem; }
.form-label-sm[b-cye2slvoll] { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.required[b-cye2slvoll] { color: #dc2626; }
.form-hint[b-cye2slvoll] { font-size: 0.75rem; color: var(--text-placeholder); }

.ai-validation-group[b-cye2slvoll] {
    border-top: 1px dashed var(--border-color); padding-top: 0.75rem; margin-top: 0.25rem;
}
.ai-label[b-cye2slvoll] { color: var(--metric-purple-color) !important; display: flex; align-items: center; }

/* ============================
   Steps
   ============================ */

.steps-section[b-cye2slvoll] { display: flex; flex-direction: column; gap: 0.75rem; }
.steps-header[b-cye2slvoll] {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem;
}
.steps-label[b-cye2slvoll] { font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); }
.empty-steps[b-cye2slvoll] { color: var(--text-placeholder); font-size: 0.85rem; text-align: center; padding: 1rem; }

.btn-add-step[b-cye2slvoll] {
    display: flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.75rem;
    background: var(--brand-primary-light); color: var(--brand-primary);
    border: 1px dashed var(--brand-primary); border-radius: 6px;
    font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.2s;
}
.btn-add-step:hover[b-cye2slvoll] { background: var(--brand-primary-ring); }

.step-card[b-cye2slvoll] {
    border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden;
    background: var(--bg-page); transition: border-color 0.2s;
}
.step-card.step-escalation[b-cye2slvoll] {
    border-color: #fbbf24; background: var(--badge-connecting-bg);
}

.step-header[b-cye2slvoll] {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.875rem;
    background: var(--bg-hover); border-bottom: 1px solid var(--border-color);
}
.step-escalation .step-header[b-cye2slvoll] {
    background: var(--badge-connecting-bg); border-bottom-color: #fde68a;
}
.step-number[b-cye2slvoll] {
    width: 22px; height: 22px; background: var(--brand-primary); color: #fff;
    border-radius: 50%; font-size: 0.75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.step-escalation .step-number[b-cye2slvoll] { background: #f59e0b; }

.step-badge[b-cye2slvoll] { font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 99px; }
.step-badge.message[b-cye2slvoll] { background: var(--metric-blue-bg); color: var(--metric-blue-color); }
.step-badge.question[b-cye2slvoll] { background: var(--metric-green-bg); color: var(--metric-green-color); }
.step-badge.escalation[b-cye2slvoll] { background: var(--badge-connecting-bg); color: var(--badge-connecting-color); }
.step-badge.ai[b-cye2slvoll] { background: var(--metric-purple-bg); color: var(--metric-purple-color); }
.step-badge.custom[b-cye2slvoll] { background: var(--metric-green-bg); color: var(--metric-green-color); }

.step-actions[b-cye2slvoll] { margin-left: auto; display: flex; gap: 0.25rem; }
.step-btn[b-cye2slvoll] {
    background: none; border: 1px solid var(--border-color); border-radius: 5px;
    padding: 0.2rem 0.4rem; font-size: 0.75rem; cursor: pointer;
    color: var(--text-muted); transition: all 0.15s;
}
.step-btn:hover:not(:disabled)[b-cye2slvoll] { background: var(--bg-hover); color: var(--text-primary); }
.step-btn:disabled[b-cye2slvoll] { opacity: 0.3; cursor: not-allowed; }
.step-btn.danger:hover:not(:disabled)[b-cye2slvoll] {
    background: #fef2f2; border-color: #fecaca; color: #dc3545;
}

.step-body[b-cye2slvoll] { padding: 0.875rem; display: flex; flex-direction: column; gap: 0.75rem; }

.escalation-group[b-cye2slvoll] { display: flex; flex-direction: column; gap: 0.3rem; }
.escalation-check[b-cye2slvoll] {
    display: flex; align-items: flex-start; gap: 0.5rem;
    font-size: 0.82rem; color: var(--text-secondary); cursor: pointer;
}
.escalation-check input[b-cye2slvoll] { margin-top: 2px; accent-color: var(--brand-primary); }

/* Custom flow toggle */
.custom-flow-group[b-cye2slvoll] {
    border: 1px solid var(--metric-green-color); border-radius: 8px;
    padding: 0.875rem; background: var(--metric-green-bg);
}
.custom-flow-check[b-cye2slvoll] { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; }
.custom-flow-check input[type="checkbox"][b-cye2slvoll] {
    margin-top: 3px; accent-color: var(--brand-primary);
    width: 16px; height: 16px; flex-shrink: 0;
}
.custom-flow-check-content[b-cye2slvoll] { display: flex; flex-direction: column; gap: 0.2rem; }
.custom-flow-check-title[b-cye2slvoll] { font-size: 0.85rem; font-weight: 700; color: var(--metric-green-color); }
.custom-flow-check-desc[b-cye2slvoll] { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.4; }

/* Editor footer */
.editor-footer[b-cye2slvoll] {
    display: flex; justify-content: flex-end; gap: 0.75rem;
    padding-top: 0.5rem; border-top: 1px solid var(--border-color);
}

.btn-cancel[b-cye2slvoll] {
    padding: 0.5rem 1.25rem; background: none; border: 1px solid var(--border-color);
    border-radius: 8px; font-size: 0.875rem; font-weight: 600;
    color: var(--text-muted); cursor: pointer; transition: all 0.15s;
}
.btn-cancel:hover[b-cye2slvoll] { background: var(--bg-hover); }

.btn-save[b-cye2slvoll] {
    padding: 0.5rem 1.5rem; background: var(--brand-primary); color: #fff;
    border: none; border-radius: 8px; font-size: 0.875rem; font-weight: 600;
    cursor: pointer; transition: background 0.2s;
    display: flex; align-items: center; gap: 0.4rem;
    box-shadow: 0 2px 6px var(--brand-primary-ring);
}
.btn-save:hover:not(:disabled)[b-cye2slvoll] { background: var(--brand-primary-hover); }
.btn-save:disabled[b-cye2slvoll] { opacity: 0.65; cursor: not-allowed; }

/* ============================
   Flow List
   ============================ */

.flows-list[b-cye2slvoll] { display: flex; flex-direction: column; gap: 0.75rem; }

.flow-card[b-cye2slvoll] {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px;
    padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; transition: box-shadow 0.2s, border-color 0.2s;
}
.flow-card:hover[b-cye2slvoll] { box-shadow: var(--shadow-hover); border-color: var(--border-input); }

.flow-card-left[b-cye2slvoll] { display: flex; align-items: center; gap: 0.875rem; flex: 1; min-width: 0; }

.flow-icon[b-cye2slvoll] {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.flow-icon.active[b-cye2slvoll] { background: var(--brand-primary-light); color: var(--brand-primary); }
.flow-icon.inactive[b-cye2slvoll] { background: var(--bg-hover); color: var(--text-placeholder); }

.flow-name[b-cye2slvoll] { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }
.flow-keywords[b-cye2slvoll] {
    font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px;
}
.flow-meta[b-cye2slvoll] {
    font-size: 0.75rem; color: var(--text-placeholder); margin-top: 0.1rem;
    display: flex; align-items: center; gap: 0.25rem;
}

.flow-card-right[b-cye2slvoll] { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.status-badge[b-cye2slvoll] { font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 99px; }
.status-badge.active[b-cye2slvoll] { background: var(--badge-success-bg); color: var(--badge-success-color); }
.status-badge.inactive[b-cye2slvoll] { background: var(--bg-hover); color: var(--text-muted); }

.flow-btn[b-cye2slvoll] {
    width: 32px; height: 32px; border-radius: 7px; border: 1px solid var(--border-color);
    background: none; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-muted); transition: all 0.15s;
}
.flow-btn:hover[b-cye2slvoll] { background: var(--bg-hover); color: var(--text-primary); }
.flow-btn.edit:hover[b-cye2slvoll] {
    color: var(--brand-primary); border-color: var(--brand-primary);
    background: var(--brand-primary-light);
}
.flow-btn.toggle:hover[b-cye2slvoll] { color: #f59e0b; border-color: #f59e0b; background: var(--badge-connecting-bg); }
.flow-btn.delete:hover[b-cye2slvoll] { color: #dc3545; border-color: #fecaca; background: #fef2f2; }

.templates-intro[b-cye2slvoll] {
    font-size: 0.82rem; color: var(--text-muted); margin-bottom: 1.25rem;
}

.empty-actions[b-cye2slvoll] {
    display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap;
}

/* ============================
   Empty State
   ============================ */

.empty-state[b-cye2slvoll] {
    text-align: center; padding: 4rem 2rem; background: var(--bg-card);
    border-radius: 12px; border: 1px dashed var(--border-color);
}
.empty-icon[b-cye2slvoll] { margin-bottom: 1rem; }
.empty-title[b-cye2slvoll] { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; }
.empty-text[b-cye2slvoll] {
    color: var(--text-muted); font-size: 0.875rem;
    max-width: 400px; margin: 0 auto 1.5rem; line-height: 1.5;
}
/* /Components/Pages/WhatsApp/Campaigns.razor.rz.scp.css */
/* ============================
   Campaigns Page
   ============================ */

.cpg-page[b-slfkbpr3bk] {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
}

.cpg-page-header[b-slfkbpr3bk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    gap: 1rem;
}

.cpg-title[b-slfkbpr3bk] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    letter-spacing: -0.04em;
}

.cpg-subtitle[b-slfkbpr3bk] {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}

.cpg-btn-create[b-slfkbpr3bk] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.cpg-btn-create:hover:not(:disabled)[b-slfkbpr3bk] { opacity: 0.88; }
.cpg-btn-create:disabled[b-slfkbpr3bk] { opacity: 0.5; cursor: not-allowed; }

/* ============================
   Loading / Empty
   ============================ */

.cpg-loading[b-slfkbpr3bk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    padding: 3rem 0;
    justify-content: center;
}

.cpg-empty[b-slfkbpr3bk] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 3.5rem 2.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.cpg-empty-icon[b-slfkbpr3bk] {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-lg);
    background: var(--brand-primary-light);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.cpg-empty-title[b-slfkbpr3bk] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.02em;
}

.cpg-empty-desc[b-slfkbpr3bk] {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0 0 1.5rem 0;
}

/* ============================
   Instance bar
   ============================ */

.cpg-instance-bar[b-slfkbpr3bk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.cpg-label[b-slfkbpr3bk] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.cpg-instance-tabs[b-slfkbpr3bk] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.cpg-instance-tab[b-slfkbpr3bk] {
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.cpg-instance-tab:hover[b-slfkbpr3bk] { background: var(--bg-hover); color: var(--text-primary); }
.cpg-instance-tab.active[b-slfkbpr3bk] { background: var(--brand-primary); color: white; border-color: var(--brand-primary); }

/* ============================
   Content card
   ============================ */

.cpg-content[b-slfkbpr3bk] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.cpg-content-header[b-slfkbpr3bk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.cpg-count[b-slfkbpr3bk] {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* ============================
   Alerts
   ============================ */

.cpg-alert[b-slfkbpr3bk] {
    margin: 0.75rem 1.25rem 0;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
}

.cpg-alert-error[b-slfkbpr3bk] { background: #fff0f0; border: 1px solid #ffd0d0; color: #c0392b; }
.cpg-alert-success[b-slfkbpr3bk] { background: #f0fff4; border: 1px solid #b7e4c7; color: #276749; }

/* ============================
   Campaign list
   ============================ */

.cpg-list[b-slfkbpr3bk] {
    display: flex;
    flex-direction: column;
}

.cpg-card[b-slfkbpr3bk] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    transition: background 0.12s;
}

.cpg-card:last-child[b-slfkbpr3bk] { border-bottom: none; }
.cpg-card:hover[b-slfkbpr3bk] { background: var(--bg-hover); }

.cpg-card-top[b-slfkbpr3bk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.cpg-card-info[b-slfkbpr3bk] { min-width: 0; }

.cpg-card-name[b-slfkbpr3bk] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    margin: 0 0 2px 0;
}

.cpg-card-template[b-slfkbpr3bk] {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-family: monospace;
}

.cpg-card-right[b-slfkbpr3bk] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.cpg-stats[b-slfkbpr3bk] {
    display: flex;
    gap: 1.25rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
    margin-bottom: 0.625rem;
}

.cpg-stat-sent[b-slfkbpr3bk] { color: #15803d; }
.cpg-stat-failed[b-slfkbpr3bk] { color: #dc2626; }
.cpg-stat-date[b-slfkbpr3bk] { color: var(--text-muted); }

/* ============================
   Status badges
   ============================ */

.cpg-badge[b-slfkbpr3bk] {
    display: inline-block;
    padding: 0.1875rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.71rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.cpg-badge-draft[b-slfkbpr3bk]    { background: var(--bg-hover); color: var(--text-secondary); }
.cpg-badge-running[b-slfkbpr3bk]  { background: #dbeafe; color: #1d4ed8; }
.cpg-badge-completed[b-slfkbpr3bk]{ background: #dcfce7; color: #15803d; }
.cpg-badge-failed[b-slfkbpr3bk]   { background: #fee2e2; color: #dc2626; }
.cpg-badge-cancelled[b-slfkbpr3bk]{ background: var(--bg-hover); color: var(--text-muted); }

/* ============================
   Action buttons
   ============================ */

.cpg-btn-send[b-slfkbpr3bk] {
    padding: 0.3125rem 0.875rem;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cpg-btn-send:hover:not(:disabled)[b-slfkbpr3bk] { opacity: 0.88; }
.cpg-btn-send:disabled[b-slfkbpr3bk] { opacity: 0.5; cursor: not-allowed; }

.cpg-btn-cancel-item[b-slfkbpr3bk] {
    padding: 0.3125rem 0.75rem;
    background: transparent;
    color: #dc2626;
    border: 1px solid #fca5a5;
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.cpg-btn-cancel-item:hover[b-slfkbpr3bk] { background: #fff5f5; }

/* ============================
   Modal
   ============================ */

.cpg-modal-overlay[b-slfkbpr3bk] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.cpg-modal[b-slfkbpr3bk] {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 520px;
    box-shadow: var(--shadow-modal);
    overflow: hidden;
}

.cpg-modal-header[b-slfkbpr3bk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.cpg-modal-header h3[b-slfkbpr3bk] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.03em;
}

.cpg-modal-close[b-slfkbpr3bk] {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0 0.25rem;
}

.cpg-modal-close:hover[b-slfkbpr3bk] { color: var(--text-primary); }

.cpg-modal-body[b-slfkbpr3bk] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 60vh;
    overflow-y: auto;
}

.cpg-modal-footer[b-slfkbpr3bk] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
}

/* ============================
   Form fields (modal)
   ============================ */

.cpg-field[b-slfkbpr3bk] {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
}

.cpg-field label[b-slfkbpr3bk] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.cpg-field small[b-slfkbpr3bk] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.cpg-input[b-slfkbpr3bk],
.cpg-select[b-slfkbpr3bk],
.cpg-textarea[b-slfkbpr3bk] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--bg-input, var(--bg-card));
    transition: border-color 0.15s;
    box-sizing: border-box;
    font-family: inherit;
}

.cpg-input:focus[b-slfkbpr3bk],
.cpg-select:focus[b-slfkbpr3bk],
.cpg-textarea:focus[b-slfkbpr3bk] {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px var(--brand-primary-ring);
}

.cpg-textarea[b-slfkbpr3bk] { resize: vertical; }

.cpg-mode-tabs[b-slfkbpr3bk] {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
}

.cpg-mode-tab[b-slfkbpr3bk] {
    padding: 0.3125rem 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.cpg-mode-tab:hover[b-slfkbpr3bk] { background: var(--bg-hover); }
.cpg-mode-tab.active[b-slfkbpr3bk] { background: var(--brand-primary); color: white; border-color: var(--brand-primary); }

.cpg-csv-success[b-slfkbpr3bk] {
    font-size: 0.78rem;
    color: #15803d;
    margin-top: 0.25rem;
}

/* ============================
   Footer buttons
   ============================ */

.cpg-btn-secondary[b-slfkbpr3bk] {
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.cpg-btn-secondary:hover[b-slfkbpr3bk] { background: var(--bg-hover); }

.cpg-btn-primary[b-slfkbpr3bk] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
}

.cpg-btn-primary:hover:not(:disabled)[b-slfkbpr3bk] { opacity: 0.88; }
.cpg-btn-primary:disabled[b-slfkbpr3bk] { opacity: 0.5; cursor: not-allowed; }
/* /Components/Pages/WhatsApp/Chat.razor.rz.scp.css */
/* ============================================================
   Chatly — WhatsApp Chat  |  Clean Premium Design
   ============================================================ */

/* ============================
   Container principal
   ============================ */

.chat-container[b-u6dgy9mjck] {
    display: flex;
    height: calc(100vh - 56px);
    background: var(--bg-page);
    border-radius: 16px;
    overflow: hidden;
    margin: -1.5rem -2rem;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

/* ============================
   Painel Esquerdo — Conversas
   ============================ */

.conversations-panel[b-u6dgy9mjck] {
    width: 360px;
    min-width: 300px;
    background: var(--bg-card);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
}

.conversations-header[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--brand-primary);
    color: #fff;
    min-height: 60px;
}

.btn-back[b-u6dgy9mjck] {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

    .btn-back:hover[b-u6dgy9mjck] {
        background: rgba(255,255,255,0.15);
    }

.conversations-title[b-u6dgy9mjck] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    flex: 1;
    letter-spacing: -0.02em;
}

.connection-indicator[b-u6dgy9mjck] {
    font-size: 0.68rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .connection-indicator.connected[b-u6dgy9mjck] { color: #4ade80; }
    .connection-indicator.disconnected[b-u6dgy9mjck] { color: #f87171; }

/* Busca de conversas */
.conversation-search-bar[b-u6dgy9mjck] {
    padding: 7px 10px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--bg-hover);
}

.conversation-search-input-wrapper[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    background: var(--bg-hover);
    border-radius: 18px;
    padding: 2px 10px;
    gap: 8px;
}

    .conversation-search-input-wrapper .search-icon[b-u6dgy9mjck] { color: var(--text-muted); }

.conversation-search-input[b-u6dgy9mjck] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.84rem;
    padding: 6px 0;
    color: var(--text-primary);
    min-width: 0;
}

    .conversation-search-input[b-u6dgy9mjck]::placeholder { color: var(--text-muted); }

.btn-search-clear[b-u6dgy9mjck] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    transition: color 0.12s;
}

    .btn-search-clear:hover[b-u6dgy9mjck] { color: var(--text-primary); }

/* Filtros de tag */
.tag-filter-bar[b-u6dgy9mjck] {
    display: flex;
    gap: 5px;
    padding: 6px 10px;
    overflow-x: auto;
    background: var(--bg-card);
    border-bottom: 1px solid var(--bg-hover);
    scrollbar-width: none;
}

    .tag-filter-bar[b-u6dgy9mjck]::-webkit-scrollbar { display: none; }

.tag-filter-chip[b-u6dgy9mjck] {
    background: transparent;
    border: 1.5px solid var(--tag-color);
    color: var(--tag-color);
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 0.73rem;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 600;
    transition: all 0.12s;
}

    .tag-filter-chip.selected[b-u6dgy9mjck] {
        background: var(--tag-color);
        color: #fff;
    }

    .tag-filter-chip:hover[b-u6dgy9mjck] { opacity: 0.8; }

.tag-filter-clear[b-u6dgy9mjck] {
    border-color: var(--text-muted);
    color: var(--text-muted);
}

    .tag-filter-clear:hover[b-u6dgy9mjck] {
        background: var(--text-muted);
        color: #fff;
    }

/* Abas Ativas / Resolvidas */
.conversation-tabs[b-u6dgy9mjck] {
    display: flex;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
}

.conv-tab[b-u6dgy9mjck] {
    flex: 1;
    padding: 10px 8px;
    border: none;
    background: transparent;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

    .conv-tab.active[b-u6dgy9mjck] {
        color: var(--brand-primary);
        border-bottom-color: var(--brand-primary);
    }

    .conv-tab:hover:not(.active)[b-u6dgy9mjck] {
        color: var(--text-secondary);
        background: var(--bg-hover);
    }

.conv-tab-count[b-u6dgy9mjck] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-primary);
    color: #fff;
    border-radius: 10px;
    font-size: 0.64rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    line-height: 1;
}

.conv-tab-count-resolved[b-u6dgy9mjck] {
    background: var(--text-muted);
}

/* Tag Manager Overlay */
.tag-manager-overlay[b-u6dgy9mjck] {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(2px);
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 56px;
}

.tag-manager-panel[b-u6dgy9mjck] {
    background: var(--bg-card);
    border-radius: 14px;
    width: 300px;
    max-height: 440px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid var(--border-color);
    overflow: hidden;
    animation: tagManagerIn 0.18s ease-out;
}

@@keyframes tagManagerIn {
    from[b-u6dgy9mjck] { opacity: 0; transform: scale(0.95) translateY(-8px); }
    to[b-u6dgy9mjck]   { opacity: 1; transform: scale(1) translateY(0); }
}

.tag-manager-header[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.tag-manager-title-row[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tag-manager-icon[b-u6dgy9mjck] {
    width: 28px;
    height: 28px;
    background: var(--brand-primary-light);
    color: var(--brand-primary);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tag-manager-title[b-u6dgy9mjck] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.tag-manager-close[b-u6dgy9mjck] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: all 0.12s;
    flex-shrink: 0;
}

    .tag-manager-close:hover[b-u6dgy9mjck] { background: var(--bg-hover); color: var(--text-primary); }

.tag-manager-body[b-u6dgy9mjck] {
    flex: 1;
    overflow-y: auto;
    padding: 14px 14px 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.tag-create-form[b-u6dgy9mjck] { margin-bottom: 12px; }

.tag-input-row[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tag-color-swatch[b-u6dgy9mjck] {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    cursor: pointer;
}

    .tag-color-swatch input[type="color"][b-u6dgy9mjck] {
        position: absolute;
        inset: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        padding: 0;
        border: none;
    }

.tag-color-preview[b-u6dgy9mjck] {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 2px solid var(--border-color);
    transition: border-color 0.12s;
    pointer-events: none;
}

.tag-color-swatch:hover .tag-color-preview[b-u6dgy9mjck] { border-color: var(--brand-primary); }

.tag-name-input[b-u6dgy9mjck] {
    flex: 1;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.84rem;
    outline: none;
    background: var(--bg-input, var(--bg-hover));
    color: var(--text-primary);
    min-width: 0;
    transition: border-color 0.15s;
    font-family: inherit;
}

    .tag-name-input:focus[b-u6dgy9mjck] { border-color: var(--brand-primary); background: var(--bg-card); }
    .tag-name-input[b-u6dgy9mjck]::placeholder { color: var(--text-muted); }

.tag-create-btn[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.82rem;
    cursor: pointer;
    flex-shrink: 0;
    font-weight: 600;
    transition: background 0.15s;
    white-space: nowrap;
}

    .tag-create-btn:hover:not(:disabled)[b-u6dgy9mjck] { background: var(--brand-primary-hover); }
    .tag-create-btn:disabled[b-u6dgy9mjck] { opacity: 0.45; cursor: not-allowed; }

.tag-list[b-u6dgy9mjck] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tag-manager-item[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    transition: background 0.1s;
}

    .tag-manager-item:hover[b-u6dgy9mjck] { background: var(--bg-hover); }

.tag-dot[b-u6dgy9mjck] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tag-manager-name[b-u6dgy9mjck] {
    flex: 1;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-chip-preview[b-u6dgy9mjck] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.68rem;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0.85;
}

.btn-tag-delete[b-u6dgy9mjck] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: all 0.12s;
    opacity: 0;
}

.tag-manager-item:hover .btn-tag-delete[b-u6dgy9mjck] { opacity: 1; }
    .btn-tag-delete:hover[b-u6dgy9mjck] { background: #fee2e2; color: #ef4444; }

.tag-empty-state[b-u6dgy9mjck] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 0 8px;
    text-align: center;
}

.tag-empty-msg[b-u6dgy9mjck] {
    color: var(--text-secondary);
    font-size: 0.84rem;
    margin: 0;
    font-weight: 600;
}

.tag-empty-hint[b-u6dgy9mjck] {
    color: var(--text-muted);
    font-size: 0.76rem;
}

/* Lista de conversas */
.conversations-list[b-u6dgy9mjck] {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

    .conversations-list[b-u6dgy9mjck]::-webkit-scrollbar { width: 4px; }
    .conversations-list[b-u6dgy9mjck]::-webkit-scrollbar-track { background: transparent; }
    .conversations-list[b-u6dgy9mjck]::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }

.conversations-loading[b-u6dgy9mjck],
.conversations-empty[b-u6dgy9mjck] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 16px;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Item de conversa */
.conversation-item[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--bg-hover);
    transition: background 0.1s;
    position: relative;
}

    .conversation-item:hover[b-u6dgy9mjck] { background: var(--bg-hover); }
    .conversation-item.selected[b-u6dgy9mjck] { background: var(--border-color); }
    .conversation-item.ready-for-service[b-u6dgy9mjck] { border-left: 3px solid #22c55e; }
    .conversation-item.ready-for-service.selected[b-u6dgy9mjck] { background: #f0fdf4; }

.priority-indicator[b-u6dgy9mjck] {
    position: absolute;
    top: 5px;
    right: 44px;
    display: flex;
    align-items: center;
    gap: 3px;
    background: #22c55e;
    color: #fff;
    border-radius: 99px;
    padding: 2px 6px;
    font-size: 0.62rem;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

.conversation-avatar[b-u6dgy9mjck] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 600;
    flex-shrink: 0;
}

.conversation-avatar-img[b-u6dgy9mjck] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.conversation-info[b-u6dgy9mjck] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.conversation-top[b-u6dgy9mjck] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 3px;
}

.conversation-name[b-u6dgy9mjck] {
    font-size: 0.89rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.conversation-time[b-u6dgy9mjck] {
    font-size: 0.72rem;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 8px;
}

/* CRITICAL: flex row com preview e badge */
.conversation-bottom-row[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.conversation-preview[b-u6dgy9mjck] {
    font-size: 0.81rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.unread-badge[b-u6dgy9mjck] {
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--brand-primary);
    color: #fff;
    font-size: 0.67rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

.conversation-tags[b-u6dgy9mjck] {
    display: flex;
    gap: 3px;
    margin-top: 3px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.tag-chip[b-u6dgy9mjck] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.63rem;
    color: #fff;
    white-space: nowrap;
    font-weight: 600;
    line-height: 1.5;
}

.tag-chip-small[b-u6dgy9mjck] {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.7rem;
    color: #fff;
    white-space: nowrap;
    font-weight: 600;
}

.tag-chip-more[b-u6dgy9mjck] {
    font-size: 0.63rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.btn-tag-assign[b-u6dgy9mjck] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: none;
    align-items: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.conversation-item:hover .btn-tag-assign[b-u6dgy9mjck] { display: flex; }
.btn-tag-assign:hover[b-u6dgy9mjck] { background: var(--border-color); }

.tag-assign-dropdown[b-u6dgy9mjck] {
    position: absolute;
    right: 10px;
    top: 100%;
    background: var(--bg-card);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.14);
    padding: 8px;
    z-index: 50;
    min-width: 160px;
    border: 1px solid var(--border-color);
}

.tag-assign-option[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
    font-size: 0.84rem;
    color: var(--text-primary);
}

    .tag-assign-option input[type="checkbox"][b-u6dgy9mjck] { accent-color: var(--brand-primary); }

.tag-assign-empty[b-u6dgy9mjck] {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 4px;
}

/* ============================
   Painel Direito — Mensagens
   ============================ */

.messages-panel[b-u6dgy9mjck] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-page);
    position: relative;
    min-width: 0;
    overflow: hidden;
}

/* Fundo pontilhado sutil */
.messages-panel[b-u6dgy9mjck]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='0.9' fill='%23b2a9c8' fill-opacity='0.15'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

.messages-panel > *[b-u6dgy9mjck] { position: relative; z-index: 1; }

/* Banner de instância desconectada */
.instance-status-banner[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    gap: 12px;
    flex-shrink: 0;
}

    .instance-status-banner.disconnected[b-u6dgy9mjck] {
        background: #fef3c7;
        border-bottom: 1px solid #fde68a;
    }

.status-banner-content[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #92400e;
    flex: 1;
    min-width: 0;
}

.status-banner-text[b-u6dgy9mjck] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 0.8rem;
}

    .status-banner-text strong[b-u6dgy9mjck] { font-weight: 700; color: #78350f; }
    .status-banner-text span[b-u6dgy9mjck] { opacity: 0.85; }

.btn-reconnect[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #92400e;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

    .btn-reconnect:hover:not(:disabled)[b-u6dgy9mjck] { background: #78350f; }
    .btn-reconnect:disabled[b-u6dgy9mjck] { opacity: 0.55; cursor: not-allowed; }

/* Modal QR Code */
.qr-modal-overlay[b-u6dgy9mjck] {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(3px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-modal-panel[b-u6dgy9mjck] {
    background: var(--bg-card);
    border-radius: 12px;
    width: 90%;
    max-width: 360px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.2);
    overflow: hidden;
    animation: qrModalIn 0.2s ease-out;
}

@@keyframes qrModalIn {
    from[b-u6dgy9mjck] { opacity: 0; transform: scale(0.94) translateY(8px); }
    to[b-u6dgy9mjck]   { opacity: 1; transform: scale(1) translateY(0); }
}

.qr-modal-header[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
}

    .qr-modal-header h6[b-u6dgy9mjck] {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--text-primary);
        letter-spacing: -0.02em;
    }

.btn-close-qr-modal[b-u6dgy9mjck] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    transition: all 0.12s;
}

    .btn-close-qr-modal:hover[b-u6dgy9mjck] { background: var(--bg-hover); color: var(--text-primary); }

.qr-modal-body[b-u6dgy9mjck] {
    padding: 16px;
    text-align: center;
}

.qr-instructions[b-u6dgy9mjck] {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0 0 14px;
    line-height: 1.5;
}

.qr-loading[b-u6dgy9mjck] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 0;
    color: var(--text-muted);
    font-size: 0.84rem;
}

.qr-image-container[b-u6dgy9mjck] {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.qr-code-image[b-u6dgy9mjck] {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.btn-refresh-qr[b-u6dgy9mjck] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-hover);
    border: none;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    margin-bottom: 14px;
    transition: background 0.15s;
}

    .btn-refresh-qr:hover:not(:disabled)[b-u6dgy9mjck] { background: var(--border-color); }
    .btn-refresh-qr:disabled[b-u6dgy9mjck] { opacity: 0.5; cursor: not-allowed; }

.qr-error[b-u6dgy9mjck] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    color: #dc2626;
    font-size: 0.84rem;
    margin-bottom: 8px;
}

.qr-status-info[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.qr-status-dot[b-u6dgy9mjck] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

    .qr-status-dot.connected[b-u6dgy9mjck] { background: #22c55e; }
    .qr-status-dot.disconnected[b-u6dgy9mjck] { background: #dc2626; }

/* Placeholder */
.messages-placeholder[b-u6dgy9mjck] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-page);
}

    .messages-placeholder[b-u6dgy9mjck]::before { display: none; }

.placeholder-content[b-u6dgy9mjck] {
    text-align: center;
    color: var(--text-muted);
    padding: 32px;
}

    .placeholder-content h4[b-u6dgy9mjck] {
        color: var(--text-secondary);
        margin: 14px 0 8px;
        font-weight: 300;
        font-size: 1.4rem;
        letter-spacing: -0.03em;
    }

    .placeholder-content p[b-u6dgy9mjck] {
        font-size: 0.875rem;
        margin: 0;
    }

/* ============================
   Header do Chat
   ============================ */

.chat-header[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--brand-primary);
    color: #fff;
    min-height: 60px;
    flex-shrink: 0;
}

.chat-header-avatar[b-u6dgy9mjck] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 600;
    flex-shrink: 0;
}

.chat-header-avatar-img[b-u6dgy9mjck] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.chat-header-info[b-u6dgy9mjck] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.chat-header-name[b-u6dgy9mjck] {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-header-phone[b-u6dgy9mjck] {
    font-size: 0.77rem;
    opacity: 0.8;
}

.btn-close-attendance[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    border-radius: 18px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
}

    .btn-close-attendance:hover:not(:disabled)[b-u6dgy9mjck] {
        background: rgba(255,255,255,0.26);
    }

    .btn-close-attendance:disabled[b-u6dgy9mjck] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.conv-closed-badge[b-u6dgy9mjck] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
    border-radius: 12px;
    font-size: 0.73rem;
    font-weight: 600;
    flex-shrink: 0;
}

.btn-reopen-attendance[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    border-radius: 18px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
}

    .btn-reopen-attendance:hover:not(:disabled)[b-u6dgy9mjck] {
        background: rgba(255,255,255,0.30);
    }

    .btn-reopen-attendance:disabled[b-u6dgy9mjck] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.assignee-badge[b-u6dgy9mjck] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    flex-shrink: 0;
    max-width: 180px;
    overflow: hidden;
}

    .assignee-badge span[b-u6dgy9mjck] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.assignee-badge-me[b-u6dgy9mjck] {
    background: rgba(37, 211, 102, 0.22);
    color: #fff;
    border: 1px solid rgba(37, 211, 102, 0.5);
}

.assignee-badge-other[b-u6dgy9mjck] {
    background: rgba(255, 193, 7, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 193, 7, 0.45);
}

.btn-reassign[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    border-radius: 18px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
}

    .btn-reassign:hover:not(:disabled)[b-u6dgy9mjck] {
        background: rgba(255, 255, 255, 0.26);
        border-color: rgba(255, 255, 255, 0.55);
    }

.btn-cobrar[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: rgba(34, 197, 94, 0.18);
    border: 1px solid rgba(34, 197, 94, 0.55);
    color: #fff;
    border-radius: 18px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
}

    .btn-cobrar:hover[b-u6dgy9mjck] {
        background: rgba(34, 197, 94, 0.32);
        border-color: rgba(34, 197, 94, 0.75);
    }

/* Cobrança modal (dentro do chat) */
.cobrar-overlay[b-u6dgy9mjck] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    backdrop-filter: blur(3px);
}

.cobrar-modal[b-u6dgy9mjck] {
    background: var(--bg-card, #fff);
    border-radius: 12px;
    width: 480px;
    max-width: 95vw;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.cobrar-modal-header[b-u6dgy9mjck] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color);
}

    .cobrar-modal-header h5[b-u6dgy9mjck] {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-primary);
    }

.cobrar-modal-sub[b-u6dgy9mjck] {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 3px 0 0;
}

.cobrar-close[b-u6dgy9mjck] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px;
}

    .cobrar-close:hover[b-u6dgy9mjck] { color: var(--text-primary); }

.cobrar-modal-body[b-u6dgy9mjck] { padding: 20px 22px; }

.cobrar-modal-footer[b-u6dgy9mjck] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--border-color);
}

.cobrar-form-group[b-u6dgy9mjck] { margin-bottom: 14px; }

.cobrar-form-row[b-u6dgy9mjck] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cobrar-label[b-u6dgy9mjck] {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.cobrar-input[b-u6dgy9mjck] {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--text-primary);
    background: var(--bg-card, #fff);
    box-sizing: border-box;
}

    .cobrar-input:focus[b-u6dgy9mjck] {
        outline: none;
        border-color: var(--brand-primary, #3b82f6);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

.cobrar-btn-cancel[b-u6dgy9mjck] {
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

    .cobrar-btn-cancel:hover[b-u6dgy9mjck] { background: var(--bg-hover, #f8fafc); }
    .cobrar-btn-cancel:disabled[b-u6dgy9mjck] { opacity: 0.6; cursor: not-allowed; }

.cobrar-btn-confirm[b-u6dgy9mjck] {
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    background: var(--brand-primary, #3b82f6);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .cobrar-btn-confirm:hover[b-u6dgy9mjck] { filter: brightness(1.08); }
    .cobrar-btn-confirm:disabled[b-u6dgy9mjck] { opacity: 0.6; cursor: not-allowed; }

.cobrar-alert-error[b-u6dgy9mjck] {
    background: #fef2f2;
    color: #dc2626;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #fecaca;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.cobrar-spin[b-u6dgy9mjck] {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cobrar-spin-b-u6dgy9mjck 0.6s linear infinite;
}

@keyframes cobrar-spin-b-u6dgy9mjck { to { transform: rotate(360deg); } }

.assignment-lock-banner[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin: 0 12px 8px 12px;
    background: rgba(255, 193, 7, 0.12);
    color: #8c6d10;
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 8px;
    font-size: 0.82rem;
}

.reassign-current[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-input, rgba(0,0,0,0.04));
    border-radius: 6px;
    font-size: 0.85rem;
}

.reassign-current-label[b-u6dgy9mjck] {
    color: var(--text-muted, var(--text-muted));
}

.btn-reopen-attendance[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: rgba(37, 211, 102, 0.2);
    color: rgba(255,255,255,0.95);
    border: 1px solid rgba(37, 211, 102, 0.4);
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
}

    .btn-reopen-attendance:hover:not(:disabled)[b-u6dgy9mjck] {
        background: rgba(37, 211, 102, 0.35);
        border-color: rgba(37, 211, 102, 0.6);
    }

    .btn-reopen-attendance:disabled[b-u6dgy9mjck] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.btn-search-messages[b-u6dgy9mjck],
.btn-new-chat[b-u6dgy9mjck],
.btn-tag-manage[b-u6dgy9mjck] {
    background: none;
    border: none;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

    .btn-search-messages:hover[b-u6dgy9mjck],
    .btn-new-chat:hover[b-u6dgy9mjck],
    .btn-tag-manage:hover[b-u6dgy9mjck] {
        background: rgba(255,255,255,0.15);
        color: #fff;
    }

/* ============================
   Busca de Mensagens
   ============================ */

.message-search-bar[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.message-search-input-wrapper[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    background: var(--bg-hover);
    border-radius: 8px;
    padding: 3px 10px;
    gap: 8px;
    flex: 1;
}

    .message-search-input-wrapper .search-icon[b-u6dgy9mjck] { color: var(--text-muted); }

.message-search-input[b-u6dgy9mjck] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.84rem;
    padding: 6px 0;
    color: var(--text-primary);
}

    .message-search-input[b-u6dgy9mjck]::placeholder { color: var(--text-muted); }

.message-search-nav[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.message-search-count[b-u6dgy9mjck] {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    padding: 0 4px;
}

    .message-search-count.no-results[b-u6dgy9mjck] { color: #f87171; }

.btn-search-nav[b-u6dgy9mjck] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 3px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    transition: all 0.12s;
}

    .btn-search-nav:hover[b-u6dgy9mjck] { color: var(--brand-primary); background: var(--border-color); }

.btn-search-close[b-u6dgy9mjck] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: all 0.12s;
}

    .btn-search-close:hover[b-u6dgy9mjck] { color: var(--text-primary); background: var(--border-color); }

/* ============================
   Área de Mensagens
   ============================ */

.messages-area[b-u6dgy9mjck] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

    .messages-area[b-u6dgy9mjck]::-webkit-scrollbar { width: 4px; }
    .messages-area[b-u6dgy9mjck]::-webkit-scrollbar-track { background: transparent; }
    .messages-area[b-u6dgy9mjck]::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }

.messages-loading[b-u6dgy9mjck],
.messages-empty[b-u6dgy9mjck] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px;
    color: var(--text-muted);
    font-size: 0.875rem;
    flex: 1;
}

/* Load More */
.load-more-indicator[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.btn-load-more[b-u6dgy9mjck] {
    background: var(--bg-hover);
    border: none;
    padding: 5px 14px;
    border-radius: 16px;
    font-size: 0.77rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.12s;
}

    .btn-load-more:hover[b-u6dgy9mjck] { background: var(--border-color); }

/* ============================
   Linhas e Bolhas de Mensagem
   ============================ */

.message-row[b-u6dgy9mjck] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    margin-bottom: 2px;
    padding: 0 8px;
    animation: msgIn 0.15s ease-out;
}

@@keyframes msgIn {
    from[b-u6dgy9mjck] { opacity: 0; transform: translateY(4px); }
    to[b-u6dgy9mjck]   { opacity: 1; transform: translateY(0); }
}

    .message-row.outbound[b-u6dgy9mjck] { justify-content: flex-end; }
    .message-row.inbound[b-u6dgy9mjck]  { justify-content: flex-start; }

/* Agrupamento de mensagens consecutivas do mesmo lado */
.message-row.msg-single[b-u6dgy9mjck],
.message-row.msg-group-end[b-u6dgy9mjck] { margin-bottom: 6px; }

.message-row.msg-group-start[b-u6dgy9mjck],
.message-row.msg-group-mid[b-u6dgy9mjck] { margin-bottom: 2px; }

/* Suprimir tail para mensagens não-finais de grupo */
.message-row.msg-group-start .bubble-outbound[b-u6dgy9mjck]::after,
.message-row.msg-group-mid   .bubble-outbound[b-u6dgy9mjck]::after,
.message-row.msg-group-start .bubble-inbound[b-u6dgy9mjck]::after,
.message-row.msg-group-mid   .bubble-inbound[b-u6dgy9mjck]::after { display: none; }

/* Arredondar canto onde tail seria removido */
.message-row.msg-group-start .bubble-outbound[b-u6dgy9mjck],
.message-row.msg-group-mid   .bubble-outbound[b-u6dgy9mjck] { border-top-right-radius: 8px; }
.message-row.msg-group-start .bubble-inbound[b-u6dgy9mjck],
.message-row.msg-group-mid   .bubble-inbound[b-u6dgy9mjck]  { border-top-left-radius: 8px; }

/* Botão de ação da mensagem (⋮) */
.msg-action-btn[b-u6dgy9mjck] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    align-self: flex-start;
    margin-top: 4px;
}

    .message-row:hover .msg-action-btn[b-u6dgy9mjck] { opacity: 1; }
    .msg-action-btn:hover[b-u6dgy9mjck] { background: rgba(0,0,0,0.08); color: var(--text-secondary); }

/* Bolha base */
.message-bubble[b-u6dgy9mjck] {
    max-width: 60%;
    padding: 6px 8px 6px;
    border-radius: 8px;
    position: relative;
    word-wrap: break-word;
    box-shadow: 0 1px 1px rgba(11,20,26,0.12);
    display: flex;
    flex-direction: column;
    min-width: 70px;
}

/* Bolha outbound (enviada) */
.bubble-outbound[b-u6dgy9mjck] {
    background: var(--brand-primary-light);
    border-top-right-radius: 2px;
}

    .bubble-outbound[b-u6dgy9mjck]::after {
        content: '';
        position: absolute;
        top: 0;
        right: -7px;
        width: 0;
        height: 0;
        border-left: 7px solid var(--brand-primary-light);
        border-bottom: 7px solid transparent;
    }

/* Bolha inbound (recebida) */
.bubble-inbound[b-u6dgy9mjck] {
    background: var(--bg-card);
    border-top-left-radius: 2px;
}

    .bubble-inbound[b-u6dgy9mjck]::after {
        content: '';
        position: absolute;
        top: 0;
        left: -7px;
        width: 0;
        height: 0;
        border-right: 7px solid var(--bg-card);
        border-bottom: 7px solid transparent;
    }

/* Texto da mensagem */
.message-text[b-u6dgy9mjck] {
    font-size: 0.875rem;
    color: var(--text-primary);
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

    .message-text[b-u6dgy9mjck]  strong { font-weight: 700; }
    .message-text[b-u6dgy9mjck]  em { font-style: italic; }
    .message-text[b-u6dgy9mjck]  del { text-decoration: line-through; opacity: 0.7; }

    .message-text[b-u6dgy9mjck]  code.wa-code {
        background: rgba(0,0,0,0.07);
        padding: 1px 4px;
        border-radius: 4px;
        font-family: 'Courier New', monospace;
        font-size: 0.85em;
        color: #c7254e;
    }

    .message-text[b-u6dgy9mjck]  pre.wa-codeblock {
        background: rgba(0,0,0,0.06);
        padding: 7px 10px;
        border-radius: 6px;
        font-family: 'Courier New', monospace;
        font-size: 0.84em;
        margin: 3px 0;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

/* Timestamp + ícone de status */
.message-time[b-u6dgy9mjck] {
    font-size: 0.67rem;
    color: var(--text-muted);
    align-self: flex-end;
    margin-top: 1px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3px;
}

.bubble-outbound .message-time[b-u6dgy9mjck] { color: var(--text-muted); }

/* SVGs de status dentro de .message-time */
.message-time svg[b-u6dgy9mjck] {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Highlight de busca */
.bubble-search-match[b-u6dgy9mjck] {
    outline: 2px solid #fbbf24;
    outline-offset: -2px;
    border-radius: 8px;
}

.bubble-search-current[b-u6dgy9mjck] {
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
    background: var(--brand-primary-light) !important;
    border-radius: 8px;
}

/* ============================
   Mídia
   ============================ */

.bubble-media[b-u6dgy9mjck] {
    flex-direction: column;
    align-items: stretch;
    padding: 4px;
    max-width: 320px;
}

    .bubble-media .message-text[b-u6dgy9mjck] { padding: 2px 6px 0; }
    .bubble-media .message-time[b-u6dgy9mjck] { padding: 0 6px 2px; }

.media-content[b-u6dgy9mjck] { border-radius: 7px; overflow: hidden; }

.media-image img[b-u6dgy9mjck] {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    display: block;
    border-radius: 7px;
    cursor: pointer;
}

.media-placeholder[b-u6dgy9mjck] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0,0,0,0.05);
    color: var(--text-muted);
    font-size: 0.84rem;
    gap: 4px;
    border-radius: 7px;
}

.media-video .media-placeholder[b-u6dgy9mjck] { min-height: 110px; }

.media-audio[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    min-width: 200px;
}

    .media-audio:has(.media-audio-label)[b-u6dgy9mjck] {
        padding: 8px 12px;
        background: rgba(0,0,0,0.05);
        border-radius: 18px;
    }

.media-audio-label[b-u6dgy9mjck] { font-size: 0.84rem; color: var(--text-primary); }

.media-audio-sent[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 0.84rem;
    color: var(--text-primary);
    opacity: .85;
}

/* ── Player de áudio customizado ─────────────────────────────────────────────
   Os estilos do player (.msg-audio-*) estão em app.css (CSS global) para evitar
   problemas de CSS isolation do Blazor em elementos dentro de branches @if/@else.
   ─────────────────────────────────────────────────────────────────────────── */

.media-document[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: rgba(0,0,0,0.05);
    border-radius: 7px;
    min-width: 180px;
}

.media-doc-name[b-u6dgy9mjck] {
    font-size: 0.84rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.media-sticker img[b-u6dgy9mjck] { width: 140px; height: 140px; object-fit: contain; }

/* Preview de mídia selecionada */
.media-preview-bar[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    gap: 10px;
    flex-shrink: 0;
}

.media-preview-info[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.media-preview-thumb[b-u6dgy9mjck] {
    width: 38px;
    height: 38px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.media-preview-details[b-u6dgy9mjck] { display: flex; flex-direction: column; min-width: 0; }

.media-preview-name[b-u6dgy9mjck] {
    font-size: 0.84rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.media-preview-size[b-u6dgy9mjck] { font-size: 0.73rem; color: var(--text-muted); }

.media-send-error[b-u6dgy9mjck] {
    font-size: 0.78rem;
    color: #e53935;
    padding: 4px 12px 6px;
}

.media-sending-placeholder[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--text-muted);
    font-size: 0.84rem;
    min-width: 140px;
}

.btn-media-remove[b-u6dgy9mjck] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

    .btn-media-remove:hover[b-u6dgy9mjck] { background: #fee2e2; color: #f87171; }

/* ============================
   Área de Input
   ============================ */

.message-input-area[b-u6dgy9mjck] {
    padding: 8px 10px;
    background: var(--bg-hover);
    flex-shrink: 0;
}

.message-input-container[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-card);
    border-radius: 24px;
    padding: 4px 6px 4px 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
    border: 1px solid rgba(0,0,0,0.05);
}

.message-input[b-u6dgy9mjck] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.925rem;
    padding: 7px 4px;
    background: transparent;
    color: var(--text-primary);
    min-width: 0;
    font-family: inherit;
}

    .message-input[b-u6dgy9mjck]::placeholder { color: var(--text-muted); }

.btn-emoji[b-u6dgy9mjck],
.btn-quick-reply[b-u6dgy9mjck],
.btn-attach[b-u6dgy9mjck],
.btn-mic[b-u6dgy9mjck] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

    .btn-emoji:hover:not(:disabled)[b-u6dgy9mjck],
    .btn-quick-reply:hover:not(:disabled)[b-u6dgy9mjck],
    .btn-attach:hover:not(:disabled)[b-u6dgy9mjck],
    .btn-mic:hover:not(:disabled)[b-u6dgy9mjck] {
        color: var(--brand-primary);
        background: var(--bg-hover);
    }

    .btn-emoji.active[b-u6dgy9mjck],
    .btn-quick-reply.active[b-u6dgy9mjck] {
        color: var(--brand-primary);
        background: var(--bg-hover);
    }

    .btn-emoji:disabled[b-u6dgy9mjck],
    .btn-quick-reply:disabled[b-u6dgy9mjck],
    .btn-attach:disabled[b-u6dgy9mjck],
    .btn-mic:disabled[b-u6dgy9mjck] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.btn-send[b-u6dgy9mjck] {
    background: var(--brand-primary);
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 7px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
    box-shadow: 0 1px 5px var(--brand-primary-ring);
}

    .btn-send:hover:not(:disabled)[b-u6dgy9mjck] {
        background: var(--brand-primary-hover);
        transform: scale(1.06);
    }

    .btn-send:disabled[b-u6dgy9mjck] {
        background: #d0d0d0;
        color: #a0a0a0;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

/* ============================
   Gravação de Áudio
   ============================ */

.recording-container[b-u6dgy9mjck] {
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 35%, transparent) !important;
}

.recording-indicator[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    padding: 0 8px;
}

.recording-dot[b-u6dgy9mjck] {
    width: 10px;
    height: 10px;
    background: var(--brand-primary);
    border-radius: 50%;
    animation: recPulse 1s ease-in-out infinite;
}

@@keyframes recPulse {
    0%[b-u6dgy9mjck], 100%[b-u6dgy9mjck] { opacity: 1; transform: scale(1); }
    50%[b-u6dgy9mjck]       { opacity: 0.4; transform: scale(0.8); }
}

.recording-timer[b-u6dgy9mjck] {
    font-size: 0.9rem;
    color: var(--brand-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.btn-recording-cancel[b-u6dgy9mjck],
.btn-recording-discard[b-u6dgy9mjck] {
    background: none;
    border: none;
    color: var(--brand-primary);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

    .btn-recording-cancel:hover[b-u6dgy9mjck],
    .btn-recording-discard:hover[b-u6dgy9mjck] { background: color-mix(in srgb, var(--brand-primary) 12%, transparent); }

.btn-recording-stop[b-u6dgy9mjck],
.btn-send-audio[b-u6dgy9mjck] {
    background: var(--brand-primary);
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

    .btn-recording-stop:hover[b-u6dgy9mjck],
    .btn-send-audio:hover:not(:disabled)[b-u6dgy9mjck] { background: var(--brand-primary-hover); }

    .btn-send-audio:disabled[b-u6dgy9mjck] { background: #d0d0d0; color: #a0a0a0; cursor: not-allowed; }

.recorded-container[b-u6dgy9mjck] {
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 35%, transparent) !important;
}

.recorded-audio-info[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    padding: 0 8px;
}

.recorded-audio-label[b-u6dgy9mjck] { font-size: 0.84rem; color: #166534; font-weight: 500; }

/* ============================
   Emoji Picker
   ============================ */

.emoji-picker-popup[b-u6dgy9mjck] {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
    max-height: 320px;
    display: flex;
    flex-direction: column;
    z-index: 25;
    overflow: hidden;
}

.emoji-picker-header[b-u6dgy9mjck] {
    padding: 8px 10px 0;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.emoji-category-tabs[b-u6dgy9mjck] {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
}

    .emoji-category-tabs[b-u6dgy9mjck]::-webkit-scrollbar { display: none; }

.emoji-category-tab[b-u6dgy9mjck] {
    background: none;
    border: none;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.12s;
    flex-shrink: 0;
}

    .emoji-category-tab:hover[b-u6dgy9mjck] { background: var(--bg-hover); }
    .emoji-category-tab.active[b-u6dgy9mjck] { background: var(--brand-primary-light); }

.emoji-picker-search[b-u6dgy9mjck] {
    padding: 8px 10px;
    border-bottom: 1px solid var(--bg-hover);
    flex-shrink: 0;
}

.emoji-search-input[b-u6dgy9mjck] {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 0.82rem;
    outline: none;
    background: var(--bg-hover);
    color: var(--text-primary);
}

    .emoji-search-input:focus[b-u6dgy9mjck] { border-color: var(--brand-primary); background: var(--bg-card); }
    .emoji-search-input[b-u6dgy9mjck]::placeholder { color: var(--text-muted); }

.emoji-picker-grid[b-u6dgy9mjck] {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 6px 8px;
}

.emoji-item[b-u6dgy9mjck] {
    background: none;
    border: none;
    padding: 4px;
    font-size: 1.3rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .emoji-item:hover[b-u6dgy9mjck] { background: var(--bg-hover); }

.emoji-picker-footer[b-u6dgy9mjck] {
    padding: 5px 10px;
    border-top: 1px solid var(--bg-hover);
    flex-shrink: 0;
}

.emoji-category-name[b-u6dgy9mjck] {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* ============================
   Respostas Rápidas
   ============================ */

.quick-reply-popup[b-u6dgy9mjck] {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
    max-height: 360px;
    display: flex;
    flex-direction: column;
    z-index: 20;
    overflow: hidden;
}

.quick-reply-header[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.quick-reply-title[b-u6dgy9mjck] {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-primary);
}

.btn-quick-reply-manage[b-u6dgy9mjck] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    transition: all 0.12s;
}

    .btn-quick-reply-manage:hover[b-u6dgy9mjck] { color: var(--brand-primary); background: var(--bg-hover); }

.quick-reply-list[b-u6dgy9mjck] {
    flex: 1;
    overflow-y: auto;
    max-height: 220px;
}

.quick-reply-item[b-u6dgy9mjck] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 9px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    border-bottom: 1px solid var(--bg-hover);
    transition: background 0.1s;
    gap: 2px;
}

    .quick-reply-item:hover[b-u6dgy9mjck] { background: var(--brand-primary-light); }

.quick-reply-item-title[b-u6dgy9mjck] { font-size: 0.84rem; font-weight: 600; color: var(--brand-primary); }

.quick-reply-item-content[b-u6dgy9mjck] {
    font-size: 0.79rem;
    color: var(--text-muted);
    line-height: 1.3;
    white-space: pre-wrap;
    word-break: break-word;
}

.quick-reply-search[b-u6dgy9mjck] {
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.quick-reply-search-input[b-u6dgy9mjck] {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    padding: 6px 10px;
    font-size: 0.82rem;
    outline: none;
    background: var(--bg-hover);
    color: var(--text-primary);
}

    .quick-reply-search-input:focus[b-u6dgy9mjck] { border-color: var(--brand-primary); background: var(--bg-card); }
    .quick-reply-search-input[b-u6dgy9mjck]::placeholder { color: var(--text-muted); }

.quick-reply-empty[b-u6dgy9mjck] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
    color: var(--text-muted);
    gap: 8px;
}

    .quick-reply-empty p[b-u6dgy9mjck] { margin: 0; font-size: 0.84rem; }

.btn-qr-create-first[b-u6dgy9mjck] {
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 0.82rem;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.15s;
}

    .btn-qr-create-first:hover[b-u6dgy9mjck] { background: var(--brand-primary-hover); }

.quick-reply-manager[b-u6dgy9mjck] {
    display: flex;
    flex-direction: column;
    max-height: 280px;
    overflow-y: auto;
}

.quick-reply-form[b-u6dgy9mjck] {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-bottom: 1px solid var(--border-color);
}

.quick-reply-form-input[b-u6dgy9mjck] {
    border: 1px solid var(--border-color);
    border-radius: 7px;
    padding: 6px 10px;
    font-size: 0.84rem;
    outline: none;
    color: var(--text-primary);
    transition: border-color 0.12s;
}

    .quick-reply-form-input:focus[b-u6dgy9mjck] { border-color: var(--brand-primary); }

.quick-reply-form-textarea[b-u6dgy9mjck] {
    border: 1px solid var(--border-color);
    border-radius: 7px;
    padding: 6px 10px;
    font-size: 0.84rem;
    outline: none;
    resize: vertical;
    min-height: 50px;
    color: var(--text-primary);
    font-family: inherit;
    transition: border-color 0.12s;
}

    .quick-reply-form-textarea:focus[b-u6dgy9mjck] { border-color: var(--brand-primary); }

.quick-reply-form-actions[b-u6dgy9mjck] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.btn-qr-save[b-u6dgy9mjck] {
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 0.82rem;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.12s;
}

    .btn-qr-save:hover:not(:disabled)[b-u6dgy9mjck] { background: var(--brand-primary-hover); }
    .btn-qr-save:disabled[b-u6dgy9mjck] { opacity: 0.5; cursor: not-allowed; }

.btn-qr-cancel[b-u6dgy9mjck] {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.12s;
}

    .btn-qr-cancel:hover[b-u6dgy9mjck] { background: var(--bg-hover); color: var(--text-primary); }

.quick-reply-manage-list[b-u6dgy9mjck] { display: flex; flex-direction: column; }

.quick-reply-manage-item[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid var(--bg-hover);
    gap: 8px;
    transition: background 0.1s;
}

    .quick-reply-manage-item:hover[b-u6dgy9mjck] { background: var(--bg-hover); }

.quick-reply-manage-info[b-u6dgy9mjck] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 1px;
}

.quick-reply-manage-title[b-u6dgy9mjck] { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); }

.quick-reply-manage-preview[b-u6dgy9mjck] {
    font-size: 0.74rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-reply-manage-actions[b-u6dgy9mjck] { display: flex; gap: 2px; }

.btn-qr-edit[b-u6dgy9mjck] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    transition: all 0.12s;
}

    .btn-qr-edit:hover[b-u6dgy9mjck] { color: var(--brand-primary); background: var(--bg-hover); }

.btn-qr-delete[b-u6dgy9mjck] {
    background: none;
    border: none;
    color: #f87171;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    transition: all 0.12s;
}

    .btn-qr-delete:hover[b-u6dgy9mjck] { background: #fee2e2; }

/* ============================
   Responsive
   ============================ */

@@media (max-width: 860px) {
    .conversations-panel[b-u6dgy9mjck] {
        width: 100%;
        min-width: unset;
    }

    .message-bubble[b-u6dgy9mjck] { max-width: 80%; }
    .messages-area[b-u6dgy9mjck] { padding: 8px 0; }
    .message-row[b-u6dgy9mjck] { padding: 0 4px; }
}

@@media (min-width: 1400px) {
    .conversations-panel[b-u6dgy9mjck] { width: 380px; }
    .messages-area[b-u6dgy9mjck] { padding: 8px 0; }
    .message-row[b-u6dgy9mjck] { padding: 0 12%; }
}

/* ============================
   Mensagem Apagada
   ============================ */

.bubble-deleted[b-u6dgy9mjck] {
    background: var(--bg-hover) !important;
    border: 1px dashed var(--border-color) !important;
    opacity: 0.75;
    box-shadow: none !important;
}

.bubble-deleted[b-u6dgy9mjck]::after { display: none !important; }

.message-deleted-text[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.875rem;
    padding: 2px 0;
}

/* ============================
   Context Menu de Mensagem
   ============================ */

.msg-ctx-overlay[b-u6dgy9mjck] {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.msg-ctx-menu[b-u6dgy9mjck] {
    position: fixed;
    z-index: 1201;
    background: var(--bg-card);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 1px 4px rgba(0,0,0,0.08);
    min-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    animation: ctxFadeIn 0.1s ease;
}

@@keyframes ctxFadeIn {
    from[b-u6dgy9mjck] { opacity: 0; transform: scale(0.92) translateY(-4px); }
    to[b-u6dgy9mjck]   { opacity: 1; transform: scale(1) translateY(0); }
}

.msg-ctx-item[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}

.msg-ctx-item:hover[b-u6dgy9mjck] { background: var(--bg-hover); }

.msg-ctx-item.danger[b-u6dgy9mjck] { color: var(--brand-primary); }
.msg-ctx-item.danger:hover[b-u6dgy9mjck] { background: var(--bg-hover); }

.msg-ctx-item + .msg-ctx-item[b-u6dgy9mjck] {
    border-top: 1px solid rgba(0,0,0,0.06);
}

/* ============================
   Toast de Erro
   ============================ */

.chat-error-toast[b-u6dgy9mjck] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1300;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid rgba(0,0,0,0.1);
    border-left: 4px solid var(--brand-primary);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 12px 16px;
    min-width: 260px;
    max-width: 420px;
    font-size: 0.875rem;
    color: var(--text-primary);
    animation: toastSlideUp 0.2s ease;
}

@@keyframes toastSlideUp {
    from[b-u6dgy9mjck] { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to[b-u6dgy9mjck]   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.chat-error-dismiss[b-u6dgy9mjck] {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
}

/* ============================
   Modal Nova Conversa
   ============================ */

.new-conversation-overlay[b-u6dgy9mjck] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: overlayFadeIn 0.15s ease;
}

@@keyframes overlayFadeIn {
    from[b-u6dgy9mjck] { opacity: 0; }
    to[b-u6dgy9mjck]   { opacity: 1; }
}

.new-conversation-panel[b-u6dgy9mjck] {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: panelSlideIn 0.18s ease;
}

@@keyframes panelSlideIn {
    from[b-u6dgy9mjck] { opacity: 0; transform: translateY(-10px) scale(0.97); }
    to[b-u6dgy9mjck]   { opacity: 1; transform: translateY(0) scale(1); }
}

.new-conversation-header[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--brand-primary);
    color: #fff;
    flex-shrink: 0;
}

    .new-conversation-header h6[b-u6dgy9mjck] {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

.btn-close-new-chat[b-u6dgy9mjck] {
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

    .btn-close-new-chat:hover[b-u6dgy9mjck] {
        background: rgba(255,255,255,0.15);
        color: #fff;
    }

.new-conversation-body[b-u6dgy9mjck] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.new-conversation-label[b-u6dgy9mjck] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
}

.new-conversation-phone-input[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-hover);
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
}

    .new-conversation-phone-input:focus-within[b-u6dgy9mjck] {
        border-color: var(--brand-primary);
        background: var(--bg-card);
    }

.phone-prefix[b-u6dgy9mjck] {
    padding: 0 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-right: 1.5px solid var(--border-color);
    align-self: stretch;
    display: flex;
    align-items: center;
    background: var(--border-color);
    flex-shrink: 0;
}

.new-conversation-input[b-u6dgy9mjck] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 9px 12px;
    font-size: 0.9rem;
    color: var(--text-primary);
    min-width: 0;
}

    .new-conversation-input[b-u6dgy9mjck]::placeholder { color: var(--text-muted); }

.new-conversation-hint[b-u6dgy9mjck] {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-bottom: 4px;
    line-height: 1.4;
}

.new-conversation-textarea[b-u6dgy9mjck] {
    width: 100%;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--bg-hover);
    outline: none;
    resize: none;
    font-family: inherit;
    line-height: 1.45;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
}

    .new-conversation-textarea:focus[b-u6dgy9mjck] {
        border-color: var(--brand-primary);
        background: var(--bg-card);
    }

    .new-conversation-textarea[b-u6dgy9mjck]::placeholder { color: var(--text-muted); }

.new-conversation-error[b-u6dgy9mjck] {
    margin-top: 4px;
    padding: 8px 12px;
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: 7px;
    font-size: 0.8rem;
    color: #dc2626;
    display: flex;
    align-items: center;
    gap: 6px;
}

.new-conversation-footer[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--bg-hover);
    flex-shrink: 0;
}

.btn-cancel-new-chat[b-u6dgy9mjck] {
    background: transparent;
    border: 1.5px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

    .btn-cancel-new-chat:hover[b-u6dgy9mjck] {
        background: var(--bg-hover);
        border-color: var(--border-color);
        color: var(--text-primary);
    }

.btn-start-new-chat[b-u6dgy9mjck] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

    .btn-start-new-chat:hover:not(:disabled)[b-u6dgy9mjck] { background: var(--brand-primary-hover); }

    .btn-start-new-chat:disabled[b-u6dgy9mjck] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Template modal */
.chat-modal-wrap[b-u6dgy9mjck] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    pointer-events: none;
}

.chat-modal[b-u6dgy9mjck] {
    pointer-events: all;
    background: var(--bg-card, #fff);
    border-radius: 12px;
    width: 420px;
    max-width: 95vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.chat-modal-header[b-u6dgy9mjck] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.chat-modal-header h5[b-u6dgy9mjck] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.chat-modal-close[b-u6dgy9mjck] {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.chat-modal-close:hover[b-u6dgy9mjck] { color: var(--text-primary); }

.chat-modal-body[b-u6dgy9mjck] {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 50vh;
    overflow-y: auto;
}

.chat-modal-field[b-u6dgy9mjck] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-modal-field label[b-u6dgy9mjck] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.chat-modal-select[b-u6dgy9mjck] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--bg-card);
    box-sizing: border-box;
}

.chat-modal-select:focus[b-u6dgy9mjck] {
    outline: none;
    border-color: var(--brand-primary);
}

.chat-modal-preview[b-u6dgy9mjck] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-modal-preview label[b-u6dgy9mjck] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chat-modal-preview-body[b-u6dgy9mjck] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 10px 12px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.chat-modal-footer[b-u6dgy9mjck] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
}

.chat-modal-btn-secondary[b-u6dgy9mjck] {
    padding: 7px 16px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.chat-modal-btn-secondary:hover[b-u6dgy9mjck] { background: var(--bg-hover); }

.chat-modal-btn-primary[b-u6dgy9mjck] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.chat-modal-btn-primary:hover:not(:disabled)[b-u6dgy9mjck] { opacity: 0.88; }
.chat-modal-btn-primary:disabled[b-u6dgy9mjck] { opacity: 0.5; cursor: not-allowed; }

/* SLA breach badge */
.sla-breach-badge[b-u6dgy9mjck] { background: #ef4444; color: #fff; font-size: 0.6rem; font-weight: 700; padding: 1px 5px; border-radius: 8px; flex-shrink: 0; }

/* Internal note toggle button */
.btn-note-toggle[b-u6dgy9mjck] { background: none; border: none; cursor: pointer; color: #9ca3af; padding: 4px; display: flex; align-items: center; border-radius: 6px; transition: color 0.15s, background 0.15s; }
.btn-note-toggle:hover[b-u6dgy9mjck] { color: #f59e0b; background: #fef3c7; }
.btn-note-toggle.active[b-u6dgy9mjck] { color: #d97706; background: #fef3c7; }
.note-input[b-u6dgy9mjck] { background: #fffbeb !important; border-color: #fcd34d !important; }

/* Internal note rendering */
.internal-note-row[b-u6dgy9mjck] { display: flex; justify-content: center; padding: 4px 16px; }
.internal-note-bubble[b-u6dgy9mjck] { background: #fef3c7; border: 1px dashed #fbbf24; border-radius: 10px; padding: 6px 12px; max-width: 70%; display: flex; flex-direction: column; gap: 2px; }
.internal-note-label[b-u6dgy9mjck] { font-size: 0.7rem; font-weight: 600; color: #92400e; }
.internal-note-text[b-u6dgy9mjck] { font-size: 0.85rem; color: #78350f; }
.internal-note-time[b-u6dgy9mjck] { font-size: 0.68rem; color: #a78bfa; align-self: flex-end; }
/* /Components/Pages/WhatsApp/CreateInstance.razor.rz.scp.css */
/* =========================================================
   Create Instance (scoped) — ci- prefix
   ========================================================= */

.ci-page[b-4md3uby62j] {
    max-width: 580px;
    margin: 0 auto;
    font-family: 'Manrope', sans-serif;
}

/* ============ Header ============ */
.ci-head[b-4md3uby62j] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}

.ci-back[b-4md3uby62j] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.ci-back:hover[b-4md3uby62j] {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.ci-title[b-4md3uby62j] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.ci-sub[b-4md3uby62j] {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

/* ============ Provider selector ============ */
.ci-providers[b-4md3uby62j] {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}

.ci-provider[b-4md3uby62j] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    font-family: 'Manrope', sans-serif;
}

.ci-provider:hover[b-4md3uby62j] {
    border-color: var(--text-muted);
}

.ci-provider.is-active[b-4md3uby62j] {
    border-color: var(--brand-primary);
    background: var(--brand-primary-light);
}

.ci-provider-icon[b-4md3uby62j] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.ci-provider.is-active .ci-provider-icon[b-4md3uby62j] {
    background: var(--brand-primary);
    color: #fff;
}

[b-4md3uby62j] [data-theme="dark"] .ci-provider.is-active .ci-provider-icon { color: var(--bg-page); }

.ci-provider-icon.is-meta[b-4md3uby62j] {
    background: rgba(0, 104, 255, 0.1);
    color: #0068ff;
}

.ci-provider.is-active .ci-provider-icon.is-meta[b-4md3uby62j] {
    background: #0068ff;
    color: #fff;
}

.ci-provider-text[b-4md3uby62j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ci-provider-text strong[b-4md3uby62j] {
    font-size: 13.5px;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.ci-provider-text small[b-4md3uby62j] {
    font-size: 11.5px;
    color: var(--text-muted);
}

/* ============ Card ============ */
.ci-card[b-4md3uby62j] {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 32px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.ci-card-icon[b-4md3uby62j] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--brand-primary-light);
    color: var(--brand-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.ci-card-icon.is-meta[b-4md3uby62j] {
    background: rgba(0, 104, 255, 0.1);
    color: #0068ff;
}

.ci-card-title[b-4md3uby62j] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
    letter-spacing: -0.03em;
}

.ci-card-sub[b-4md3uby62j] {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0 0 22px;
    letter-spacing: -0.01em;
    line-height: 1.55;
}

/* ============ Form ============ */
.ci-field[b-4md3uby62j] {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
}

.ci-label[b-4md3uby62j] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ci-optional[b-4md3uby62j] {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 11.5px;
    text-transform: none;
    letter-spacing: -0.01em;
}

.ci-input-wrap[b-4md3uby62j] {
    position: relative;
    display: flex;
    align-items: center;
}

.ci-input-icon[b-4md3uby62j] {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}

.ci-input-wrap[b-4md3uby62j]  .ci-input,
.ci-field[b-4md3uby62j] >  .ci-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border-input);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-input);
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.ci-input-wrap[b-4md3uby62j]  .ci-input.has-icon,
.ci-field[b-4md3uby62j] >  .ci-input.has-icon { padding-left: 44px; }

.ci-input-wrap[b-4md3uby62j]  .ci-input:focus,
.ci-field[b-4md3uby62j] >  .ci-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px var(--brand-primary-ring);
}

.ci-input-wrap[b-4md3uby62j]  .ci-input::placeholder,
.ci-field[b-4md3uby62j] >  .ci-input::placeholder { color: var(--text-placeholder); }

.ci-hint[b-4md3uby62j] {
    font-size: 11.5px;
    color: var(--text-placeholder);
    margin-top: 5px;
    letter-spacing: -0.01em;
}

.ci-error[b-4md3uby62j] {
    color: #dc2626;
    font-size: 11.5px;
    margin-top: 5px;
    display: block;
    letter-spacing: -0.01em;
}

[b-4md3uby62j] [data-theme="dark"] .ci-error { color: #f87171; }

/* ============ Info box ============ */
.ci-info[b-4md3uby62j] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.55;
}

.ci-info strong[b-4md3uby62j] { color: var(--text-primary); }

.ci-info ol[b-4md3uby62j] {
    margin: 8px 0 0 18px;
    padding: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.ci-info ol li[b-4md3uby62j] { margin-bottom: 3px; }

[b-4md3uby62j] [data-theme="dark"] .ci-info {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.28);
}

/* ============ Submit / secondary ============ */
.ci-submit[b-4md3uby62j] {
    width: 100%;
    padding: 12px 16px;
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, transform 0.1s, box-shadow 0.18s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 12px var(--brand-primary-ring);
}

.ci-submit:hover:not(:disabled)[b-4md3uby62j] {
    background: var(--brand-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--brand-primary-ring);
}

.ci-submit:active:not(:disabled)[b-4md3uby62j] { transform: scale(0.99); }

.ci-submit:disabled[b-4md3uby62j] {
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
}

[b-4md3uby62j] [data-theme="dark"] .ci-submit { color: var(--bg-page); }

.ci-submit-inline[b-4md3uby62j] {
    width: auto;
    padding: 11px 22px;
}

.ci-secondary[b-4md3uby62j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    margin-top: 16px;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.ci-secondary:hover:not(:disabled)[b-4md3uby62j] {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.ci-secondary:disabled[b-4md3uby62j] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============ Spinner ============ */
.ci-spinner[b-4md3uby62j] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ci-spin-b-4md3uby62j 0.7s linear infinite;
    flex-shrink: 0;
}

.ci-qr-spinner[b-4md3uby62j] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: ci-spin-b-4md3uby62j 0.8s linear infinite;
}

@keyframes ci-spin-b-4md3uby62j {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ci-spinner[b-4md3uby62j], .ci-qr-spinner[b-4md3uby62j] { animation: none; }
    .ci-submit:hover:not(:disabled)[b-4md3uby62j] { transform: none; }
}

/* ============ QR / Pairing ============ */
.ci-qr[b-4md3uby62j] { text-align: center; }

.ci-qr-wrap[b-4md3uby62j] {
    display: flex;
    justify-content: center;
    margin: 18px 0 12px;
}

.ci-qr-img[b-4md3uby62j] {
    width: 260px;
    height: 260px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 8px;
    background: #fff;
}

.ci-qr-placeholder[b-4md3uby62j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 260px;
    height: 260px;
    margin: 18px auto 12px;
    border: 2px dashed var(--border-input);
    border-radius: 12px;
    color: var(--text-muted);
    gap: 14px;
    font-size: 13.5px;
}

.ci-qr-placeholder.is-error[b-4md3uby62j] {
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
}

[b-4md3uby62j] [data-theme="dark"] .ci-qr-placeholder.is-error {
    color: #f87171;
    border-color: rgba(220, 38, 38, 0.32);
    background: rgba(220, 38, 38, 0.08);
}

.ci-qr-status[b-4md3uby62j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
}

.ci-qr-badge[b-4md3uby62j] {
    font-size: 10.5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--badge-connecting-bg, #fef3c7);
    color: var(--badge-connecting-color, #92400e);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[b-4md3uby62j] [data-theme="dark"] .ci-qr-badge {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}

.ci-qr-text[b-4md3uby62j] {
    font-size: 12.5px;
    color: var(--text-muted);
}

/* ============ Alert ============ */
.ci-alert[b-4md3uby62j] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 13.5px;
    margin-top: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

[b-4md3uby62j] [data-theme="dark"] .ci-alert {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

/* ============ Responsive ============ */
@media (max-width: 640px) {
    .ci-providers[b-4md3uby62j] { flex-direction: column; }
    .ci-card[b-4md3uby62j] { padding: 22px; }
    .ci-qr-img[b-4md3uby62j], .ci-qr-placeholder[b-4md3uby62j] { width: 220px; height: 220px; }
}
/* /Components/Pages/WhatsApp/CsatDashboard.razor.rz.scp.css */
/* ============================
   CSAT Dashboard Page
   ============================ */

.csat-page[b-fr9ru7k5fs] {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
}

.csat-page-header[b-fr9ru7k5fs] {
    margin-bottom: 2rem;
}

.csat-title[b-fr9ru7k5fs] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    letter-spacing: -0.04em;
}

.csat-subtitle[b-fr9ru7k5fs] {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}

/* ============================
   Loading
   ============================ */

.csat-loading[b-fr9ru7k5fs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    padding: 2rem 0;
}

/* ============================
   Instance bar
   ============================ */

.csat-instance-bar[b-fr9ru7k5fs] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.csat-label[b-fr9ru7k5fs] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.csat-instance-tabs[b-fr9ru7k5fs] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.csat-instance-tab[b-fr9ru7k5fs] {
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.csat-instance-tab:hover[b-fr9ru7k5fs] { background: var(--bg-hover); color: var(--text-primary); }
.csat-instance-tab.active[b-fr9ru7k5fs] { background: var(--brand-primary); color: white; border-color: var(--brand-primary); }

/* ============================
   Stat cards row
   ============================ */

.csat-stats[b-fr9ru7k5fs] {
    display: flex;
    gap: 0.875rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.csat-stat-card[b-fr9ru7k5fs] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.25rem 1.5rem;
    min-width: 130px;
    flex: 1;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.csat-stat-value[b-fr9ru7k5fs] {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}

.csat-stat-label[b-fr9ru7k5fs] {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.csat-stat-great[b-fr9ru7k5fs]  { color: #15803d; }
.csat-stat-ok[b-fr9ru7k5fs]     { color: #d97706; }
.csat-stat-bad[b-fr9ru7k5fs]    { color: #dc2626; }
.csat-stat-total[b-fr9ru7k5fs]  { color: var(--brand-primary); }

/* ============================
   Empty state
   ============================ */

.csat-empty[b-fr9ru7k5fs] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 3.5rem 2.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.csat-empty-icon[b-fr9ru7k5fs] {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-lg);
    background: var(--brand-primary-light);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.csat-empty-title[b-fr9ru7k5fs] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.02em;
}

.csat-empty-desc[b-fr9ru7k5fs] {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
    max-width: 400px;
    margin-inline: auto;
    line-height: 1.6;
}

/* ============================
   Table card
   ============================ */

.csat-table-card[b-fr9ru7k5fs] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.csat-table[b-fr9ru7k5fs] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

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

.csat-table th[b-fr9ru7k5fs] {
    text-align: left;
    padding: 0.75rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.csat-table tbody tr[b-fr9ru7k5fs] {
    border-bottom: 1px solid var(--border-subtle);
    transition: background 0.12s;
}

.csat-table tbody tr:last-child[b-fr9ru7k5fs] { border-bottom: none; }
.csat-table tbody tr:hover[b-fr9ru7k5fs] { background: var(--bg-hover); }

.csat-table td[b-fr9ru7k5fs] {
    padding: 0.75rem 1.25rem;
    color: var(--text-primary);
}

.csat-contact-name[b-fr9ru7k5fs] {
    font-weight: 500;
}

.csat-date[b-fr9ru7k5fs] {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* ============================
   Rating badges
   ============================ */

.csat-rating[b-fr9ru7k5fs] {
    display: inline-block;
    padding: 0.1875rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.csat-rating-great[b-fr9ru7k5fs] { background: #dcfce7; color: #15803d; }
.csat-rating-ok[b-fr9ru7k5fs]    { background: #fef3c7; color: #d97706; }
.csat-rating-bad[b-fr9ru7k5fs]   { background: #fee2e2; color: #dc2626; }
/* /Components/Pages/WhatsApp/CustomerInvoices.razor.rz.scp.css */
/* =========================================================
   Customer Invoices (scoped) — ci- prefix
   ========================================================= */

.ci-page[b-3k2vv7xeqe] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 24px 64px;
    font-family: 'Manrope', sans-serif;
    color: var(--text-primary);
}

/* ============ Header ============ */
.ci-header[b-3k2vv7xeqe] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 16px;
}

.ci-title[b-3k2vv7xeqe] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.035em;
    margin: 0;
    color: var(--text-primary);
}

.ci-subtitle[b-3k2vv7xeqe] {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 4px 0 0;
    letter-spacing: -0.01em;
}

.ci-header-actions[b-3k2vv7xeqe] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ============ Buttons ============ */
.ci-btn-create[b-3k2vv7xeqe] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px var(--brand-primary-ring);
    transition: background 0.15s, transform 0.1s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.ci-btn-create:hover[b-3k2vv7xeqe] {
    background: var(--brand-primary-hover);
    transform: translateY(-1px);
}

[b-3k2vv7xeqe] [data-theme="dark"] .ci-btn-create { color: var(--bg-page); }

.ci-btn-export[b-3k2vv7xeqe] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 13px;
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.ci-btn-export:hover[b-3k2vv7xeqe] {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--brand-primary);
}

/* ============ Loading / Alerts / Empty ============ */
.ci-loading[b-3k2vv7xeqe] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 48px;
    color: var(--text-muted);
    justify-content: center;
    font-size: 14px;
}

.ci-spinner[b-3k2vv7xeqe] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: ci-spin-b-3k2vv7xeqe 0.7s linear infinite;
}

@keyframes ci-spin-b-3k2vv7xeqe { to { transform: rotate(360deg); } }

.ci-alert-error[b-3k2vv7xeqe] {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid rgba(220, 38, 38, 0.22);
    font-size: 13.5px;
    margin-bottom: 16px;
    letter-spacing: -0.005em;
}

[b-3k2vv7xeqe] [data-theme="dark"] .ci-alert-error {
    background: rgba(220, 38, 38, 0.14);
    color: #fca5a5;
}

.ci-empty[b-3k2vv7xeqe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 24px;
    color: var(--text-muted);
    text-align: center;
}

.ci-empty h4[b-3k2vv7xeqe] {
    color: var(--text-primary);
    margin: 0;
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.ci-empty p[b-3k2vv7xeqe] {
    margin: 0;
    font-size: 13.5px;
    letter-spacing: -0.005em;
}

/* ============ Summary ============ */
.ci-summary[b-3k2vv7xeqe] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 20px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
}

.ci-sum-item[b-3k2vv7xeqe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.ci-sum-val[b-3k2vv7xeqe] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.035em;
}

.ci-sum-val.pending[b-3k2vv7xeqe] { color: #d97706; }
.ci-sum-val.paid[b-3k2vv7xeqe] { color: #16a34a; }
.ci-sum-val.overdue[b-3k2vv7xeqe] { color: #dc2626; }

[b-3k2vv7xeqe] [data-theme="dark"] .ci-sum-val.pending { color: #fbbf24; }
[b-3k2vv7xeqe] [data-theme="dark"] .ci-sum-val.paid { color: #4ade80; }
[b-3k2vv7xeqe] [data-theme="dark"] .ci-sum-val.overdue { color: #f87171; }

.ci-sum-label[b-3k2vv7xeqe] {
    font-size: 11.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.ci-sum-div[b-3k2vv7xeqe] {
    width: 1px;
    height: 32px;
    background: var(--border-color);
}

/* ============ Filters ============ */
.ci-filters[b-3k2vv7xeqe] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.ci-filter-group[b-3k2vv7xeqe] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ci-filter-search[b-3k2vv7xeqe] { min-width: 220px; }
.ci-filter-select[b-3k2vv7xeqe] { min-width: 170px; }
.ci-filter-date-range[b-3k2vv7xeqe] { gap: 6px; }

.ci-filter-date-sep[b-3k2vv7xeqe] {
    font-size: 12.5px;
    color: var(--text-muted);
    letter-spacing: -0.005em;
}

.ci-btn-clear-filters[b-3k2vv7xeqe] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1.5px solid rgba(220, 38, 38, 0.32);
    background: transparent;
    color: #dc2626;
    cursor: pointer;
    transition: background 0.15s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.005em;
}

.ci-btn-clear-filters:hover[b-3k2vv7xeqe] { background: rgba(220, 38, 38, 0.08); }

[b-3k2vv7xeqe] [data-theme="dark"] .ci-btn-clear-filters {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.38);
}

[b-3k2vv7xeqe] [data-theme="dark"] .ci-btn-clear-filters:hover { background: rgba(248, 113, 113, 0.14); }

/* ============ Table ============ */
.ci-table-wrap[b-3k2vv7xeqe] {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    overflow-x: auto;
    box-shadow: var(--shadow-sm);
}

.ci-table[b-3k2vv7xeqe] {
    width: 100%;
    border-collapse: collapse;
}

.ci-table th[b-3k2vv7xeqe] {
    padding: 12px 18px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    border-bottom: 1.5px solid var(--border-color);
    background: var(--bg-page);
}

.ci-table td[b-3k2vv7xeqe] {
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13.5px;
    color: var(--text-primary);
    vertical-align: middle;
    letter-spacing: -0.005em;
}

.ci-table tbody tr[b-3k2vv7xeqe] { transition: background 0.12s; }
.ci-table tbody tr:hover[b-3k2vv7xeqe] { background: var(--bg-hover); }
.ci-table tbody tr:last-child td[b-3k2vv7xeqe] { border-bottom: none; }

.ci-table-footer[b-3k2vv7xeqe] {
    padding: 11px 18px;
    font-size: 12.5px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    letter-spacing: -0.005em;
}

/* ============ Cells ============ */
.ci-contact[b-3k2vv7xeqe] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ci-contact strong[b-3k2vv7xeqe] {
    font-weight: 700;
    color: var(--text-primary);
}

.ci-contact span[b-3k2vv7xeqe] {
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: -0.005em;
}

.ci-desc[b-3k2vv7xeqe] {
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-secondary);
}

.ci-amount[b-3k2vv7xeqe] {
    font-weight: 700;
    color: var(--text-primary);
}

.ci-date[b-3k2vv7xeqe] {
    font-size: 13px;
    color: var(--text-muted);
}

.ci-date.overdue-date[b-3k2vv7xeqe] {
    color: #dc2626;
    font-weight: 700;
}

[b-3k2vv7xeqe] [data-theme="dark"] .ci-date.overdue-date { color: #f87171; }

/* ============ Badge ============ */
.ci-badge[b-3k2vv7xeqe] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ci-badge.pending[b-3k2vv7xeqe] { background: var(--badge-warning-bg, #fef3c7); color: var(--badge-warning-color, #92400e); }
.ci-badge.paid[b-3k2vv7xeqe] { background: var(--badge-success-bg, #dcfce7); color: var(--badge-success-color, #15803d); }
.ci-badge.overdue[b-3k2vv7xeqe] { background: rgba(220, 38, 38, 0.12); color: #dc2626; }
.ci-badge.cancelled[b-3k2vv7xeqe] { background: var(--bg-hover); color: var(--text-muted); }

[b-3k2vv7xeqe] [data-theme="dark"] .ci-badge.overdue {
    background: rgba(248, 113, 113, 0.16);
    color: #fca5a5;
}

/* ============ Action buttons ============ */
.ci-actions[b-3k2vv7xeqe] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.ci-btn-action[b-3k2vv7xeqe] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid;
    cursor: pointer;
    background: transparent;
    transition: background 0.12s, transform 0.1s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.005em;
}

.ci-btn-action:hover[b-3k2vv7xeqe] { transform: translateY(-1px); }

.ci-btn-action.success[b-3k2vv7xeqe] { border-color: rgba(22, 163, 74, 0.42); color: #15803d; }
.ci-btn-action.success:hover[b-3k2vv7xeqe] { background: rgba(22, 163, 74, 0.1); }

.ci-btn-action.info[b-3k2vv7xeqe] { border-color: rgba(59, 130, 246, 0.42); color: #1d4ed8; }
.ci-btn-action.info:hover[b-3k2vv7xeqe] { background: rgba(59, 130, 246, 0.1); }

.ci-btn-action.warn[b-3k2vv7xeqe] { border-color: rgba(217, 119, 6, 0.42); color: #92400e; }
.ci-btn-action.warn:hover[b-3k2vv7xeqe] { background: rgba(217, 119, 6, 0.1); }

.ci-btn-action.edit[b-3k2vv7xeqe] { border-color: rgba(139, 92, 246, 0.42); color: #6d28d9; }
.ci-btn-action.edit:hover[b-3k2vv7xeqe] { background: rgba(139, 92, 246, 0.1); }

.ci-btn-action.history[b-3k2vv7xeqe] {
    border-color: var(--border-color);
    color: var(--text-muted);
    padding: 5px 8px;
}

.ci-btn-action.history:hover[b-3k2vv7xeqe] {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--brand-primary);
}

.ci-btn-action.cancel[b-3k2vv7xeqe] { border-color: rgba(220, 38, 38, 0.42); color: #dc2626; }
.ci-btn-action.cancel:hover[b-3k2vv7xeqe] { background: rgba(220, 38, 38, 0.1); }

[b-3k2vv7xeqe] [data-theme="dark"] .ci-btn-action.success { color: #4ade80; }
[b-3k2vv7xeqe] [data-theme="dark"] .ci-btn-action.info { color: #93c5fd; }
[b-3k2vv7xeqe] [data-theme="dark"] .ci-btn-action.warn { color: #fbbf24; }
[b-3k2vv7xeqe] [data-theme="dark"] .ci-btn-action.edit { color: #c4b5fd; }
[b-3k2vv7xeqe] [data-theme="dark"] .ci-btn-action.cancel { color: #f87171; }

.ci-paid-date[b-3k2vv7xeqe] {
    font-size: 12px;
    color: #16a34a;
    font-weight: 700;
    letter-spacing: -0.005em;
}

[b-3k2vv7xeqe] [data-theme="dark"] .ci-paid-date { color: #4ade80; }

/* ============ Modal ============ */
.ci-overlay[b-3k2vv7xeqe] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
    animation: ci-fade-b-3k2vv7xeqe 0.16s ease-out;
}

@keyframes ci-fade-b-3k2vv7xeqe {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ci-modal[b-3k2vv7xeqe] {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    width: 520px;
    max-width: 95vw;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: var(--shadow-modal, 0 20px 60px rgba(0, 0, 0, 0.18));
    animation: ci-pop-b-3k2vv7xeqe 0.16s ease-out;
}

@keyframes ci-pop-b-3k2vv7xeqe {
    from { transform: scale(0.96); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.ci-modal-wide[b-3k2vv7xeqe] { width: 720px; }

.ci-modal-header[b-3k2vv7xeqe] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 24px;
    border-bottom: 1.5px solid var(--border-color);
    gap: 12px;
}

.ci-modal-header h5[b-3k2vv7xeqe] {
    margin: 0;
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
}

.ci-modal-sub[b-3k2vv7xeqe] {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 4px 0 0;
    letter-spacing: -0.005em;
}

.ci-close[b-3k2vv7xeqe] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
}

.ci-close:hover[b-3k2vv7xeqe] {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.ci-modal-body[b-3k2vv7xeqe] { padding: 22px 24px; }

.ci-modal-footer[b-3k2vv7xeqe] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1.5px solid var(--border-color);
}

/* ============ Form ============ */
.ci-form-group[b-3k2vv7xeqe] { margin-bottom: 14px; }

.ci-form-row[b-3k2vv7xeqe] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ci-label[b-3k2vv7xeqe] {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: -0.005em;
}

.ci-input[b-3k2vv7xeqe] {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--border-input, var(--border-color));
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--text-primary);
    background: var(--bg-input, var(--bg-card));
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.005em;
}

.ci-input[b-3k2vv7xeqe]::placeholder { color: var(--text-placeholder, var(--text-muted)); }

.ci-input:focus[b-3k2vv7xeqe] {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-ring);
}

/* ============ Modal buttons ============ */
.ci-btn-cancel[b-3k2vv7xeqe] {
    padding: 9px 18px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    border: 1.5px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.ci-btn-cancel:hover[b-3k2vv7xeqe] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ci-btn-confirm[b-3k2vv7xeqe] {
    padding: 9px 18px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    border: none;
    background: var(--brand-primary);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px var(--brand-primary-ring);
    transition: background 0.15s, transform 0.1s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.ci-btn-confirm:hover[b-3k2vv7xeqe] {
    background: var(--brand-primary-hover);
    transform: translateY(-1px);
}

[b-3k2vv7xeqe] [data-theme="dark"] .ci-btn-confirm { color: var(--bg-page); }

.ci-btn-confirm:disabled[b-3k2vv7xeqe],
.ci-btn-cancel:disabled[b-3k2vv7xeqe] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.ci-spin[b-3k2vv7xeqe] {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ci-spin-b-3k2vv7xeqe 0.6s linear infinite;
}

[b-3k2vv7xeqe] [data-theme="dark"] .ci-spin {
    border-color: rgba(0, 0, 0, 0.25);
    border-top-color: var(--bg-page);
}

/* ============ Message / Copy ============ */
.ci-msg-box[b-3k2vv7xeqe] {
    background: var(--bg-hover);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13.5px;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'Manrope', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.005em;
}

.ci-btn-copy[b-3k2vv7xeqe] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--brand-primary);
    background: transparent;
    color: var(--brand-primary);
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.ci-btn-copy:hover[b-3k2vv7xeqe] {
    background: var(--brand-primary-light);
    transform: translateY(-1px);
}

.ci-btn-copy-ok[b-3k2vv7xeqe] {
    border-color: #16a34a !important;
    color: #16a34a !important;
    background: rgba(22, 163, 74, 0.1) !important;
}

[b-3k2vv7xeqe] [data-theme="dark"] .ci-btn-copy-ok {
    color: #4ade80 !important;
    border-color: #4ade80 !important;
}

/* ============ History modal ============ */
.ci-history-body[b-3k2vv7xeqe] { padding: 0; }

.ci-history-summary[b-3k2vv7xeqe] {
    display: flex;
    gap: 24px;
    padding: 14px 24px;
    border-bottom: 1.5px solid var(--border-color);
    font-size: 13.5px;
    color: var(--text-muted);
    flex-wrap: wrap;
    letter-spacing: -0.005em;
}

.ci-history-summary strong[b-3k2vv7xeqe] {
    font-weight: 700;
    color: var(--text-primary);
}

.ci-color-paid[b-3k2vv7xeqe] { color: #16a34a !important; }
.ci-color-pending[b-3k2vv7xeqe] { color: #d97706 !important; }

[b-3k2vv7xeqe] [data-theme="dark"] .ci-color-paid { color: #4ade80 !important; }
[b-3k2vv7xeqe] [data-theme="dark"] .ci-color-pending { color: #fbbf24 !important; }

.ci-history-table[b-3k2vv7xeqe] { margin: 0; }

.ci-history-empty[b-3k2vv7xeqe] {
    padding: 32px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13.5px;
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
    .ci-overlay[b-3k2vv7xeqe],
    .ci-modal[b-3k2vv7xeqe] { animation: none; }
    .ci-btn-action:hover[b-3k2vv7xeqe],
    .ci-btn-create:hover[b-3k2vv7xeqe],
    .ci-btn-confirm:hover[b-3k2vv7xeqe],
    .ci-btn-copy:hover[b-3k2vv7xeqe],
    .ci-btn-cancel:hover[b-3k2vv7xeqe] { transform: none; }
}

/* ============ Responsive ============ */
@media (max-width: 768px) {
    .ci-page[b-3k2vv7xeqe] { padding: 20px 16px 48px; }
    .ci-header[b-3k2vv7xeqe] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    .ci-summary[b-3k2vv7xeqe] { gap: 16px; }
    .ci-filters[b-3k2vv7xeqe] { flex-direction: column; align-items: stretch; }
    .ci-filter-search[b-3k2vv7xeqe],
    .ci-filter-select[b-3k2vv7xeqe] { width: 100%; }
    .ci-filter-group[b-3k2vv7xeqe] { width: 100%; }
}

@media (max-width: 600px) {
    .ci-form-row[b-3k2vv7xeqe] { grid-template-columns: 1fr; }
    .ci-sum-div[b-3k2vv7xeqe] { display: none; }
}
/* /Components/Pages/WhatsApp/InstanceDetail.razor.rz.scp.css */
/* =========================================================
   Instance Detail (scoped) — id- prefix
   ========================================================= */

.id-page[b-k50h8yo8hw] {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Manrope', sans-serif;
}

/* ============ Header ============ */
.id-head[b-k50h8yo8hw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.id-head-left[b-k50h8yo8hw] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.id-back[b-k50h8yo8hw] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.id-back:hover[b-k50h8yo8hw] {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.id-head-text[b-k50h8yo8hw] { min-width: 0; }

.id-title[b-k50h8yo8hw] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.035em;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.id-status[b-k50h8yo8hw] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
}

.id-dot[b-k50h8yo8hw] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.id-dot.is-on[b-k50h8yo8hw] {
    background: #16a34a;
    box-shadow: 0 0 0 1.5px #16a34a, 0 0 8px rgba(22, 163, 74, 0.5);
    animation: id-pulse-b-k50h8yo8hw 2.4s ease-in-out infinite;
}

.id-dot.is-off[b-k50h8yo8hw] { background: #dc2626; }
.id-dot.is-loading[b-k50h8yo8hw] { background: var(--text-muted); }

@keyframes id-pulse-b-k50h8yo8hw {
    0%, 100% { box-shadow: 0 0 0 1.5px #16a34a, 0 0 8px rgba(22, 163, 74, 0.5); }
    50%      { box-shadow: 0 0 0 1.5px #16a34a, 0 0 14px rgba(22, 163, 74, 0.75); }
}

.id-status-text[b-k50h8yo8hw] {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.id-status-text.is-success[b-k50h8yo8hw] { color: #16a34a; }
.id-status-text.is-danger[b-k50h8yo8hw]  { color: #dc2626; }
.id-status-text.is-muted[b-k50h8yo8hw]   { color: var(--text-muted); }

[b-k50h8yo8hw] [data-theme="dark"] .id-status-text.is-success { color: #4ade80; }
[b-k50h8yo8hw] [data-theme="dark"] .id-status-text.is-danger  { color: #f87171; }

.id-head-actions[b-k50h8yo8hw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============ Buttons ============ */
.id-btn[b-k50h8yo8hw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s, box-shadow 0.18s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.id-btn:hover:not(:disabled)[b-k50h8yo8hw] {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.id-btn:disabled[b-k50h8yo8hw] { opacity: 0.55; cursor: not-allowed; }

.id-btn.is-primary[b-k50h8yo8hw] {
    background: var(--brand-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px var(--brand-primary-ring);
}

.id-btn.is-primary:hover:not(:disabled)[b-k50h8yo8hw] {
    background: var(--brand-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--brand-primary-ring);
}

[b-k50h8yo8hw] [data-theme="dark"] .id-btn.is-primary { color: var(--bg-page); }

.id-btn.is-warning[b-k50h8yo8hw] {
    background: #f59e0b;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.id-btn.is-warning:hover:not(:disabled)[b-k50h8yo8hw] {
    background: #d97706;
    transform: translateY(-1px);
}

.id-btn.is-icon[b-k50h8yo8hw] {
    width: 38px;
    padding: 0;
    height: 38px;
}

.id-btn.is-danger[b-k50h8yo8hw] {
    color: #dc2626;
    border-color: var(--border-color);
}

.id-btn.is-danger:hover:not(:disabled)[b-k50h8yo8hw] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

[b-k50h8yo8hw] [data-theme="dark"] .id-btn.is-danger:hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

.id-btn.is-ghost[b-k50h8yo8hw] {
    background: transparent;
}

.id-btn.is-delete[b-k50h8yo8hw] {
    background: #dc2626;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.id-btn.is-delete:hover:not(:disabled)[b-k50h8yo8hw] {
    background: #b91c1c;
    transform: translateY(-1px);
}

/* ============ Metrics bar ============ */
.id-metrics[b-k50h8yo8hw] {
    display: flex;
    align-items: stretch;
    background: var(--bg-card);
    border-radius: 14px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    margin-bottom: 18px;
    overflow: hidden;
    flex-wrap: wrap;
}

.id-metric[b-k50h8yo8hw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 120px;
    padding: 22px 20px;
    position: relative;
    gap: 8px;
}

.id-metric + .id-metric[b-k50h8yo8hw]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    height: 64%;
    width: 1px;
    background: var(--border-color);
}

.id-metric-value[b-k50h8yo8hw] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.id-metric-value.is-sent[b-k50h8yo8hw]     { color: #2563eb; }
.id-metric-value.is-received[b-k50h8yo8hw] { color: #16a34a; }
.id-metric-value.is-unread[b-k50h8yo8hw]   { color: #d97706; }

[b-k50h8yo8hw] [data-theme="dark"] .id-metric-value.is-sent     { color: #60a5fa; }
[b-k50h8yo8hw] [data-theme="dark"] .id-metric-value.is-received { color: #4ade80; }
[b-k50h8yo8hw] [data-theme="dark"] .id-metric-value.is-unread   { color: #fbbf24; }

.id-metric-label[b-k50h8yo8hw] {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 700;
}

/* ============ Grid ============ */
.id-grid[b-k50h8yo8hw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.id-col[b-k50h8yo8hw] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ============ Cards / sections ============ */
.id-card[b-k50h8yo8hw] {
    background: var(--bg-card);
    border-radius: 14px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    padding: 18px;
}

/* ============ Tabbed config card ============ */
.id-config-card[b-k50h8yo8hw] {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.id-tabs[b-k50h8yo8hw] {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-input);
    padding: 0 6px;
    gap: 2px;
}

.id-tab[b-k50h8yo8hw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 14px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: -0.01em;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    position: relative;
}

.id-tab:hover[b-k50h8yo8hw] { color: var(--text-primary); }

.id-tab.is-active[b-k50h8yo8hw] {
    color: var(--text-primary);
    border-bottom-color: var(--brand-primary);
}

.id-tab.is-active .id-tab-icon[b-k50h8yo8hw] {
    background: var(--brand-primary-light);
    color: var(--brand-primary);
}

.id-tab-icon[b-k50h8yo8hw] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--bg-card);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.id-tab-label[b-k50h8yo8hw] { line-height: 1; }

.id-tab-pill[b-k50h8yo8hw] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border-input);
    transition: background 0.2s, box-shadow 0.2s;
}

.id-tab-pill.is-on[b-k50h8yo8hw] {
    background: #16a34a;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
}

.id-tab-panel[b-k50h8yo8hw] {
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: id-fade-in-b-k50h8yo8hw 0.18s ease-out;
}

@keyframes id-fade-in-b-k50h8yo8hw {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.id-panel-head[b-k50h8yo8hw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.id-panel-title[b-k50h8yo8hw] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.id-panel-sub[b-k50h8yo8hw] {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.5;
}

/* ============ Field row (multi-column layout for forms) ============ */
.id-field-row[b-k50h8yo8hw] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 720px) {
    .id-field-row[b-k50h8yo8hw] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ============ Empty state inside panel ============ */
.id-empty[b-k50h8yo8hw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 16px 8px;
    gap: 6px;
}

.id-empty-icon[b-k50h8yo8hw] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.id-empty-title[b-k50h8yo8hw] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.id-empty-sub[b-k50h8yo8hw] {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 0;
    max-width: 320px;
    line-height: 1.5;
}

[b-k50h8yo8hw] [data-theme="dark"] .id-tab-pill.is-on {
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.18);
    background: #4ade80;
}

.id-section-head[b-k50h8yo8hw] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    width: 100%;
    font-family: 'Manrope', sans-serif;
}

.id-section-toggle[b-k50h8yo8hw] {
    cursor: pointer;
    color: inherit;
}

.id-section-icon[b-k50h8yo8hw] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--brand-primary-light);
    color: var(--brand-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.id-section-icon.is-clock[b-k50h8yo8hw] { background: var(--brand-primary-light); color: var(--brand-primary); }
.id-section-icon.is-send[b-k50h8yo8hw]  { background: #dcfce7; color: #16a34a; }
.id-section-icon.is-conv[b-k50h8yo8hw]  { background: var(--brand-primary-light); color: var(--brand-primary); }
.id-section-icon.is-sla[b-k50h8yo8hw]   { background: #fef3c7; color: #d97706; }
.id-section-icon.is-csat[b-k50h8yo8hw]  { background: #e0f2fe; color: #0284c7; }

[b-k50h8yo8hw] [data-theme="dark"] .id-section-icon.is-send { background: rgba(22, 163, 74, 0.16); color: #4ade80; }
[b-k50h8yo8hw] [data-theme="dark"] .id-section-icon.is-sla  { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
[b-k50h8yo8hw] [data-theme="dark"] .id-section-icon.is-csat { background: rgba(2, 132, 199, 0.16); color: #7dd3fc; }

.id-section-title[b-k50h8yo8hw] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.025em;
    flex: 1;
}

.id-section-sub[b-k50h8yo8hw] {
    font-size: 13px;
    color: var(--text-muted);
    margin: 6px 0 16px;
    line-height: 1.55;
    letter-spacing: -0.01em;
}

.id-section-body[b-k50h8yo8hw] {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.id-section-actions[b-k50h8yo8hw] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.id-chevron[b-k50h8yo8hw] {
    color: var(--text-muted);
    transition: transform 0.2s;
}

.id-chevron.is-open[b-k50h8yo8hw] { transform: rotate(180deg); }

.id-collapsed-hint[b-k50h8yo8hw] {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--text-muted);
    letter-spacing: -0.01em;
}

/* ============ Switch ============ */
.id-switch[b-k50h8yo8hw] {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}

.id-switch input[b-k50h8yo8hw] {
    opacity: 0;
    width: 0;
    height: 0;
}

.id-switch-slider[b-k50h8yo8hw] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--border-color);
    border-radius: 22px;
    transition: background 0.2s;
}

.id-switch-slider[b-k50h8yo8hw]::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.id-switch input:checked + .id-switch-slider[b-k50h8yo8hw] { background: var(--brand-primary); }
.id-switch input:checked + .id-switch-slider[b-k50h8yo8hw]::before { transform: translateX(16px); }

.id-toggle-row[b-k50h8yo8hw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.id-toggle-label[b-k50h8yo8hw] {
    font-size: 13.5px;
    color: var(--text-primary);
    font-weight: 500;
}

/* ============ Fields / inputs ============ */
.id-field[b-k50h8yo8hw] {
    display: flex;
    flex-direction: column;
}

.id-label[b-k50h8yo8hw] {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.id-input[b-k50h8yo8hw] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--border-input);
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--text-primary);
    background: var(--bg-input);
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    box-sizing: border-box;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.id-input:focus[b-k50h8yo8hw] {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px var(--brand-primary-ring);
}

.id-input[b-k50h8yo8hw]::placeholder { color: var(--text-placeholder); }

.id-input:disabled[b-k50h8yo8hw] {
    background: var(--bg-hover);
    color: var(--text-muted);
    cursor: not-allowed;
}

.id-textarea[b-k50h8yo8hw] {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.id-input-sm[b-k50h8yo8hw] { padding: 7px 10px; font-size: 12.5px; }
.id-input-narrow[b-k50h8yo8hw] { max-width: 140px; }

.id-hint[b-k50h8yo8hw] {
    font-size: 11.5px;
    color: var(--text-placeholder);
    margin: 5px 0 0;
    letter-spacing: -0.01em;
    line-height: 1.45;
    display: block;
}

/* ============ Schedule ============ */
.id-schedule[b-k50h8yo8hw] { display: flex; flex-direction: column; gap: 8px; }

.id-schedule-list[b-k50h8yo8hw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.id-schedule-row[b-k50h8yo8hw] {
    display: grid;
    grid-template-columns: 44px 30px 1fr 12px 1fr;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 9px;
    background: var(--bg-input);
    transition: background 0.15s, border-color 0.15s;
}

.id-schedule-row.is-active[b-k50h8yo8hw] {
    background: var(--brand-primary-light);
    border-color: var(--brand-primary-ring);
}

.id-schedule-day[b-k50h8yo8hw] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.id-schedule-check[b-k50h8yo8hw] { display: flex; align-items: center; justify-content: center; }
.id-schedule-check input[b-k50h8yo8hw] { accent-color: var(--brand-primary); }

.id-schedule-sep[b-k50h8yo8hw] {
    text-align: center;
    color: var(--text-muted);
    font-weight: 600;
}

/* ============ Spinner ============ */
.id-spinner-sm[b-k50h8yo8hw] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: id-spin-b-k50h8yo8hw 0.7s linear infinite;
    flex-shrink: 0;
    opacity: 0.7;
}

.id-qr-spinner[b-k50h8yo8hw] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    animation: id-spin-b-k50h8yo8hw 0.8s linear infinite;
}

@keyframes id-spin-b-k50h8yo8hw { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .id-spinner-sm[b-k50h8yo8hw], .id-qr-spinner[b-k50h8yo8hw] { animation: none; }
    .id-dot.is-on[b-k50h8yo8hw] { animation: none; }
    .id-btn:hover:not(:disabled)[b-k50h8yo8hw] { transform: none; }
}

/* ============ QR Code ============ */
.id-qr[b-k50h8yo8hw] { text-align: center; }

.id-qr-wrap[b-k50h8yo8hw] {
    display: flex;
    justify-content: center;
    margin: 16px 0 12px;
}

.id-qr-img[b-k50h8yo8hw] {
    width: 240px;
    height: 240px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 8px;
    background: #fff;
}

.id-qr-placeholder[b-k50h8yo8hw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 240px;
    margin: 16px auto 12px;
    border: 2px dashed var(--border-input);
    border-radius: 12px;
    color: var(--text-muted);
    gap: 14px;
    font-size: 13px;
}

.id-qr-placeholder.is-error[b-k50h8yo8hw] {
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
}

[b-k50h8yo8hw] [data-theme="dark"] .id-qr-placeholder.is-error {
    color: #f87171;
    border-color: rgba(220, 38, 38, 0.32);
    background: rgba(220, 38, 38, 0.08);
}

/* ============ Conversations list ============ */
.id-conv-list[b-k50h8yo8hw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    max-height: 360px;
    overflow-y: auto;
}

.id-conv[b-k50h8yo8hw] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-align: left;
    font-family: 'Manrope', sans-serif;
    width: 100%;
}

.id-conv:hover[b-k50h8yo8hw] {
    background: var(--bg-hover);
    border-color: var(--border-subtle);
}

.id-conv-avatar[b-k50h8yo8hw] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

[b-k50h8yo8hw] [data-theme="dark"] .id-conv-avatar { color: var(--bg-page); }

.id-conv-info[b-k50h8yo8hw] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.id-conv-name[b-k50h8yo8hw] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.id-conv-preview[b-k50h8yo8hw] {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.id-conv-meta[b-k50h8yo8hw] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.id-conv-time[b-k50h8yo8hw] {
    font-size: 11px;
    color: var(--text-placeholder);
    font-variant-numeric: tabular-nums;
}

.id-conv-unread[b-k50h8yo8hw] {
    background: var(--brand-primary);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}

[b-k50h8yo8hw] [data-theme="dark"] .id-conv-unread { color: var(--bg-page); }

/* ============ Toasts ============ */
.id-toast[b-k50h8yo8hw] {
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-top: 10px;
}

.id-toast.is-success[b-k50h8yo8hw] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
}

.id-toast.is-error[b-k50h8yo8hw] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.id-toast.is-info[b-k50h8yo8hw] {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

[b-k50h8yo8hw] [data-theme="dark"] .id-toast.is-success {
    background: rgba(22, 163, 74, 0.08);
    border-color: rgba(22, 163, 74, 0.3);
    color: #4ade80;
}

[b-k50h8yo8hw] [data-theme="dark"] .id-toast.is-error {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

.id-toast-floating[b-k50h8yo8hw] {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1100;
    max-width: 400px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
}

/* ============ Modal ============ */
.id-overlay[b-k50h8yo8hw] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    animation: id-overlay-in-b-k50h8yo8hw 0.15s ease;
}

@keyframes id-overlay-in-b-k50h8yo8hw {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.id-modal[b-k50h8yo8hw] {
    background: var(--bg-card);
    border-radius: 16px;
    width: 92%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    border: 1px solid var(--border-color);
    animation: id-modal-in-b-k50h8yo8hw 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes id-modal-in-b-k50h8yo8hw {
    from { opacity: 0; transform: scale(0.92) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.id-modal-head[b-k50h8yo8hw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.id-modal-head h3[b-k50h8yo8hw] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
}

.id-modal-close[b-k50h8yo8hw] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
}

.id-modal-close:hover[b-k50h8yo8hw] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.id-modal-body[b-k50h8yo8hw] {
    padding: 22px 20px 12px;
    text-align: center;
}

.id-modal-icon[b-k50h8yo8hw] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fef2f2;
    color: #dc2626;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    border: 1.5px solid #fecaca;
}

[b-k50h8yo8hw] [data-theme="dark"] .id-modal-icon {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

.id-modal-body p[b-k50h8yo8hw] {
    margin: 6px 0;
    color: var(--text-secondary);
    font-size: 13.5px;
    line-height: 1.55;
}

.id-modal-body strong[b-k50h8yo8hw] { color: var(--text-primary); }

.id-modal-hint[b-k50h8yo8hw] {
    color: var(--text-muted) !important;
    font-size: 12.5px !important;
}

.id-modal-actions[b-k50h8yo8hw] {
    display: flex;
    gap: 10px;
    padding: 12px 20px 20px;
    justify-content: flex-end;
}

@media (prefers-reduced-motion: reduce) {
    .id-overlay[b-k50h8yo8hw], .id-modal[b-k50h8yo8hw] { animation: none; }
}

/* ============ Responsive ============ */
@media (max-width: 960px) {
    .id-grid[b-k50h8yo8hw] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .id-head[b-k50h8yo8hw] { flex-direction: column; align-items: stretch; }
    .id-head-actions[b-k50h8yo8hw] { width: 100%; }
    .id-schedule-row[b-k50h8yo8hw] {
        grid-template-columns: 44px 24px 1fr 8px 1fr;
        gap: 6px;
        padding: 6px 8px;
    }
}
/* /Components/Pages/WhatsApp/Instances.razor.rz.scp.css */
/* =========================================================
   WhatsApp Instances (scoped) — wi- prefix
   ========================================================= */

.wi-page[b-hbvi2vis7h] {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Manrope', sans-serif;
}

/* ============ Header ============ */
.wi-head[b-hbvi2vis7h] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
}

.wi-title[b-hbvi2vis7h] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.035em;
    margin: 0 0 6px;
    line-height: 1.15;
}

.wi-sub[b-hbvi2vis7h] {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

.wi-cta[b-hbvi2vis7h] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--brand-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, transform 0.1s, box-shadow 0.18s;
    box-shadow: 0 4px 12px var(--brand-primary-ring);
    letter-spacing: -0.01em;
    font-family: 'Manrope', sans-serif;
}

.wi-cta:hover[b-hbvi2vis7h] {
    background: var(--brand-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--brand-primary-ring);
}

.wi-cta:active[b-hbvi2vis7h] { transform: translateY(0); }

[b-hbvi2vis7h] [data-theme="dark"] .wi-cta { color: var(--bg-page); }

/* ============ Loading / Alert ============ */
.wi-state[b-hbvi2vis7h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 64px 0;
    color: var(--text-muted);
    font-size: 13.5px;
}

.wi-spinner-lg[b-hbvi2vis7h] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    animation: wi-spin-b-hbvi2vis7h 0.8s linear infinite;
}

.wi-spinner-sm[b-hbvi2vis7h] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: wi-spin-b-hbvi2vis7h 0.7s linear infinite;
}

@keyframes wi-spin-b-hbvi2vis7h { to { transform: rotate(360deg); } }

.wi-alert[b-hbvi2vis7h] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger-color);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13.5px;
    font-weight: 500;
}

/* ============ Summary ============ */
.wi-summary[b-hbvi2vis7h] {
    display: flex;
    background: var(--bg-card);
    border-radius: 14px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    margin-bottom: 22px;
    overflow: hidden;
}

.wi-summary-item[b-hbvi2vis7h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 16px 18px;
    position: relative;
    transition: background 0.15s;
}

.wi-summary-item:hover[b-hbvi2vis7h] { background: var(--bg-hover); }

.wi-summary-item + .wi-summary-item[b-hbvi2vis7h]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    height: 64%;
    width: 1px;
    background: var(--border-color);
}

.wi-summary-value[b-hbvi2vis7h] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.wi-summary-value.is-success[b-hbvi2vis7h] { color: #16a34a; }
.wi-summary-value.is-danger[b-hbvi2vis7h]  { color: #dc2626; }

[b-hbvi2vis7h] [data-theme="dark"] .wi-summary-value.is-success { color: #4ade80; }
[b-hbvi2vis7h] [data-theme="dark"] .wi-summary-value.is-danger  { color: #f87171; }

.wi-summary-label[b-hbvi2vis7h] {
    font-size: 10.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 6px;
    font-weight: 700;
}

/* ============ Grid ============ */
.wi-grid[b-hbvi2vis7h] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
}

.wi-card[b-hbvi2vis7h] {
    background: var(--bg-card);
    border-radius: 14px;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
    display: flex;
    flex-direction: column;
    position: relative;
}

.wi-card[b-hbvi2vis7h]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--border-color);
}

.wi-card.is-connected[b-hbvi2vis7h]::before    { background: #16a34a; }
.wi-card.is-disconnected[b-hbvi2vis7h]::before { background: #dc2626; }

.wi-card:hover[b-hbvi2vis7h] {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-color: var(--brand-primary-ring);
}

[b-hbvi2vis7h] [data-theme="dark"] .wi-card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* Card head */
.wi-card-head[b-hbvi2vis7h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 18px 0;
}

.wi-avatar[b-hbvi2vis7h] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px var(--brand-primary-ring);
}

[b-hbvi2vis7h] [data-theme="dark"] .wi-avatar { color: var(--bg-page); }

.wi-dot[b-hbvi2vis7h] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 0 1px var(--border-input);
}

.wi-dot.is-on[b-hbvi2vis7h] {
    background: #16a34a;
    box-shadow: 0 0 0 1.5px #16a34a, 0 0 10px rgba(22, 163, 74, 0.5);
    animation: wi-pulse-b-hbvi2vis7h 2.4s ease-in-out infinite;
}

.wi-dot.is-off[b-hbvi2vis7h] {
    background: #dc2626;
    box-shadow: 0 0 0 1.5px #dc2626;
}

@keyframes wi-pulse-b-hbvi2vis7h {
    0%, 100% { box-shadow: 0 0 0 1.5px #16a34a, 0 0 10px rgba(22, 163, 74, 0.5); }
    50%      { box-shadow: 0 0 0 1.5px #16a34a, 0 0 18px rgba(22, 163, 74, 0.75); }
}

@media (prefers-reduced-motion: reduce) {
    .wi-dot.is-on[b-hbvi2vis7h] { animation: none; }
}

/* Card body */
.wi-card-body[b-hbvi2vis7h] {
    padding: 12px 18px 14px;
    flex: 1;
}

.wi-name[b-hbvi2vis7h] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.03em;
}

.wi-phone[b-hbvi2vis7h] {
    font-size: 12.5px;
    color: var(--text-muted);
    display: block;
    margin-top: 2px;
}

.wi-meta[b-hbvi2vis7h] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.wi-badge[b-hbvi2vis7h] {
    font-size: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.wi-badge.is-connected[b-hbvi2vis7h]    { background: #dcfce7; color: #15803d; }
.wi-badge.is-connecting[b-hbvi2vis7h]   { background: #fef3c7; color: #92400e; }
.wi-badge.is-disconnected[b-hbvi2vis7h] { background: #fee2e2; color: #991b1b; }
.wi-badge.is-unknown[b-hbvi2vis7h]      { background: var(--badge-unknown-bg, #f1f5f9); color: var(--badge-unknown-color, #64748b); }
.wi-badge.is-standard[b-hbvi2vis7h]     { background: #e0f2fe; color: #0369a1; }
.wi-badge.is-oficial[b-hbvi2vis7h]      { background: #dcfce7; color: #15803d; }

[b-hbvi2vis7h] [data-theme="dark"] .wi-badge.is-connected    { background: rgba(22, 163, 74, 0.16);  color: #4ade80; }
[b-hbvi2vis7h] [data-theme="dark"] .wi-badge.is-connecting   { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
[b-hbvi2vis7h] [data-theme="dark"] .wi-badge.is-disconnected { background: rgba(220, 38, 38, 0.16);  color: #f87171; }
[b-hbvi2vis7h] [data-theme="dark"] .wi-badge.is-standard     { background: rgba(56, 189, 248, 0.16); color: #7dd3fc; }
[b-hbvi2vis7h] [data-theme="dark"] .wi-badge.is-oficial      { background: rgba(22, 163, 74, 0.16);  color: #4ade80; }

.wi-date[b-hbvi2vis7h] {
    font-size: 11.5px;
    color: var(--text-placeholder);
    margin-left: auto;
}

/* Mini metrics */
.wi-metrics[b-hbvi2vis7h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}

.wi-mini[b-hbvi2vis7h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 6px;
    background: var(--bg-input);
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    transition: background 0.15s, border-color 0.15s;
}

.wi-mini:hover[b-hbvi2vis7h] {
    border-color: var(--brand-primary-ring);
    background: var(--brand-primary-light);
}

.wi-mini.is-unread[b-hbvi2vis7h] {
    background: #fef3c7;
    border-color: #fde68a;
}

[b-hbvi2vis7h] [data-theme="dark"] .wi-mini.is-unread {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
}

.wi-mini-value[b-hbvi2vis7h] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.wi-mini.is-unread .wi-mini-value[b-hbvi2vis7h] { color: #92400e; }
[b-hbvi2vis7h] [data-theme="dark"] .wi-mini.is-unread .wi-mini-value { color: #fbbf24; }

.wi-mini-label[b-hbvi2vis7h] {
    font-size: 9.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
    font-weight: 700;
    text-align: center;
}

/* Card actions */
.wi-card-actions[b-hbvi2vis7h] {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--border-subtle);
    margin-top: auto;
}

.wi-act[b-hbvi2vis7h] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px;
    border: none;
    background: transparent;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    letter-spacing: -0.01em;
    font-family: 'Manrope', sans-serif;
    color: var(--text-secondary);
}

.wi-act.is-primary[b-hbvi2vis7h] { color: var(--brand-primary); }

.wi-act.is-primary:hover[b-hbvi2vis7h] {
    background: var(--brand-primary-light);
    color: var(--brand-primary-hover);
}

.wi-act.is-danger[b-hbvi2vis7h] {
    color: #dc2626;
    max-width: 52px;
    border-left: 1px solid var(--border-subtle);
}

.wi-act.is-danger:hover[b-hbvi2vis7h] { background: #fef2f2; }

[b-hbvi2vis7h] [data-theme="dark"] .wi-act.is-danger:hover { background: rgba(220, 38, 38, 0.1); }

.wi-act.is-danger:disabled[b-hbvi2vis7h] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============ Modal ============ */
.wi-overlay[b-hbvi2vis7h] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    animation: wi-overlay-in-b-hbvi2vis7h 0.15s ease;
}

@keyframes wi-overlay-in-b-hbvi2vis7h {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.wi-modal[b-hbvi2vis7h] {
    background: var(--bg-card);
    border-radius: 16px;
    width: 92%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    border: 1px solid var(--border-color);
    animation: wi-modal-in-b-hbvi2vis7h 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: 'Manrope', sans-serif;
}

@keyframes wi-modal-in-b-hbvi2vis7h {
    from { opacity: 0; transform: scale(0.92) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .wi-overlay[b-hbvi2vis7h], .wi-modal[b-hbvi2vis7h] { animation: none; }
    .wi-spinner-lg[b-hbvi2vis7h], .wi-spinner-sm[b-hbvi2vis7h] { animation: none; }
}

.wi-modal-head[b-hbvi2vis7h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.wi-modal-head h3[b-hbvi2vis7h] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
}

.wi-modal-close[b-hbvi2vis7h] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
}

.wi-modal-close:hover[b-hbvi2vis7h] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.wi-modal-body[b-hbvi2vis7h] {
    padding: 22px 20px 12px;
    text-align: center;
}

.wi-modal-icon[b-hbvi2vis7h] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fef2f2;
    color: #dc2626;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    border: 1.5px solid #fecaca;
}

[b-hbvi2vis7h] [data-theme="dark"] .wi-modal-icon {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

.wi-modal-body p[b-hbvi2vis7h] {
    margin: 6px 0;
    color: var(--text-secondary);
    font-size: 13.5px;
    line-height: 1.55;
}

.wi-modal-body strong[b-hbvi2vis7h] { color: var(--text-primary); }

.wi-modal-hint[b-hbvi2vis7h] {
    color: var(--text-muted) !important;
    font-size: 12.5px !important;
}

.wi-modal-actions[b-hbvi2vis7h] {
    display: flex;
    gap: 10px;
    padding: 12px 20px 20px;
    justify-content: flex-end;
}

.wi-btn-modal[b-hbvi2vis7h] {
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    letter-spacing: -0.01em;
    font-family: 'Manrope', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wi-btn-modal.is-ghost[b-hbvi2vis7h] {
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--border-color);
}

.wi-btn-modal.is-ghost:hover[b-hbvi2vis7h] {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.wi-btn-modal.is-delete[b-hbvi2vis7h] {
    background: #dc2626;
    color: #fff;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.wi-btn-modal.is-delete:hover:not(:disabled)[b-hbvi2vis7h] {
    background: #b91c1c;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4);
}

.wi-btn-modal.is-delete:disabled[b-hbvi2vis7h] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* ============ Responsive ============ */
@media (max-width: 768px) {
    .wi-head[b-hbvi2vis7h] {
        flex-direction: column;
        align-items: stretch;
    }

    .wi-grid[b-hbvi2vis7h] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/WhatsApp/KanbanBoard.razor.rz.scp.css */
/* =========================================================
   Kanban Board (scoped) — kb- prefix
   ========================================================= */

.kb-page[b-38lzfczo39] {
    font-family: 'Manrope', sans-serif;
}

/* ============ Header ============ */
.kb-head[b-38lzfczo39] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.kb-title[b-38lzfczo39] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.kb-sub[b-38lzfczo39] {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

.kb-head-actions[b-38lzfczo39] {
    display: flex;
    gap: 8px;
}

.kb-link[b-38lzfczo39] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.kb-link:hover[b-38lzfczo39] {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

/* ============ States ============ */
.kb-state[b-38lzfczo39] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 80px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.kb-spinner-lg[b-38lzfczo39] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: kb-spin-b-38lzfczo39 0.8s linear infinite;
}

@keyframes kb-spin-b-38lzfczo39 {
    to { transform: rotate(360deg); }
}

.kb-alert[b-38lzfczo39] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

[b-38lzfczo39] [data-theme="dark"] .kb-alert {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.32);
    color: #f87171;
}

/* ============ Board ============ */
.kb-board[b-38lzfczo39] {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 16px;
    align-items: flex-start;
    scrollbar-width: thin;
}

.kb-board[b-38lzfczo39]::-webkit-scrollbar {
    height: 10px;
}

.kb-board[b-38lzfczo39]::-webkit-scrollbar-track {
    background: transparent;
}

.kb-board[b-38lzfczo39]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
}

/* ============ Column ============ */
.kb-column[b-38lzfczo39] {
    min-width: 270px;
    max-width: 300px;
    flex-shrink: 0;
    background: var(--bg-input);
    border-radius: 14px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
}

.kb-col-head[b-38lzfczo39] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
}

.kb-col-title-wrap[b-38lzfczo39] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.kb-col-dot[b-38lzfczo39] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
}

.kb-column.is-unassigned .kb-col-dot[b-38lzfczo39] { background: #94a3b8; }
.kb-column.is-progress .kb-col-dot[b-38lzfczo39] { background: var(--brand-primary); }
.kb-column.is-waiting .kb-col-dot[b-38lzfczo39] { background: #f59e0b; }
.kb-column.is-closed .kb-col-dot[b-38lzfczo39] { background: #10b981; }

.kb-col-title[b-38lzfczo39] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kb-col-count[b-38lzfczo39] {
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 11.5px;
    border-radius: 999px;
    padding: 2px 9px;
    font-weight: 700;
    border: 1px solid var(--border-color);
}

.kb-col-body[b-38lzfczo39] {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 80px;
    overflow-y: auto;
    flex: 1;
}

.kb-col-body[b-38lzfczo39]::-webkit-scrollbar {
    width: 6px;
}

.kb-col-body[b-38lzfczo39]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

/* ============ Empty ============ */
.kb-empty[b-38lzfczo39] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 0;
    font-size: 12.5px;
    color: var(--text-muted);
    text-align: center;
    opacity: 0.7;
}

/* ============ Card ============ */
.kb-card[b-38lzfczo39] {
    background: var(--bg-card);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    padding: 12px;
    cursor: default;
    transition: box-shadow 0.18s, border-color 0.18s, transform 0.1s;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kb-card:hover[b-38lzfczo39] {
    box-shadow: var(--shadow-md);
    border-color: var(--text-muted);
}

.kb-card.is-sla[b-38lzfczo39] {
    border-color: #fca5a5;
    background: #fff7f7;
}

[b-38lzfczo39] [data-theme="dark"] .kb-card.is-sla {
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.08);
}

.kb-card-head[b-38lzfczo39] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.kb-card-name[b-38lzfczo39] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    letter-spacing: -0.015em;
    word-break: break-word;
}

.kb-sla[b-38lzfczo39] {
    background: #ef4444;
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.kb-card-preview[b-38lzfczo39] {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.01em;
}

.kb-card-agent[b-38lzfczo39] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--brand-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.kb-card-foot[b-38lzfczo39] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
    gap: 8px;
}

.kb-time[b-38lzfczo39] {
    font-size: 11.5px;
    color: var(--text-placeholder);
    font-weight: 500;
}

.kb-actions[b-38lzfczo39] {
    display: flex;
    gap: 4px;
}

.kb-btn[b-38lzfczo39] {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    padding: 0;
}

.kb-btn:hover[b-38lzfczo39] {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.kb-btn:active[b-38lzfczo39] {
    transform: scale(0.94);
}

.kb-btn.is-primary[b-38lzfczo39] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.kb-btn.is-primary:hover[b-38lzfczo39] {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color: #fff;
}

[b-38lzfczo39] [data-theme="dark"] .kb-btn.is-primary {
    color: var(--bg-page);
}

@media (prefers-reduced-motion: reduce) {
    .kb-spinner-lg[b-38lzfczo39] { animation: none; }
    .kb-card:hover[b-38lzfczo39], .kb-btn:active[b-38lzfczo39] { transform: none; }
}

/* ============ Responsive ============ */
@media (max-width: 640px) {
    .kb-board[b-38lzfczo39] {
        gap: 10px;
    }
    .kb-column[b-38lzfczo39] {
        min-width: 240px;
    }
}
/* /Components/Pages/WhatsApp/Templates.razor.rz.scp.css */
.tpl-page[b-orteh9z5pq] {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
}

.tpl-page-header[b-orteh9z5pq] {
    margin-bottom: 2rem;
}

.tpl-page-title[b-orteh9z5pq] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    letter-spacing: -0.04em;
}

.tpl-page-subtitle[b-orteh9z5pq] {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
}

.tpl-loading[b-orteh9z5pq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    padding: 2rem 0;
}

.tpl-empty-state[b-orteh9z5pq] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 3rem 2.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.tpl-icon[b-orteh9z5pq] {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-lg);
    background: var(--brand-primary-light);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.tpl-empty-state h2[b-orteh9z5pq] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
    letter-spacing: -0.03em;
}

.tpl-empty-state p[b-orteh9z5pq] {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
    max-width: 440px;
    margin-inline: auto;
}

/* Layout */
.tpl-layout[b-orteh9z5pq] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Instance bar */
.tpl-instance-bar[b-orteh9z5pq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.tpl-label[b-orteh9z5pq] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.tpl-instance-tabs[b-orteh9z5pq] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.tpl-instance-tab[b-orteh9z5pq] {
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.tpl-instance-tab:hover[b-orteh9z5pq] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.tpl-instance-tab.active[b-orteh9z5pq] {
    background: var(--brand-primary);
    color: white;
    border-color: var(--brand-primary);
}

/* Content area */
.tpl-content[b-orteh9z5pq] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.tpl-content-header[b-orteh9z5pq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.tpl-count[b-orteh9z5pq] {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.tpl-btn-create[b-orteh9z5pq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
}

.tpl-btn-create:hover:not(:disabled)[b-orteh9z5pq] { opacity: 0.88; }
.tpl-btn-create:disabled[b-orteh9z5pq] { opacity: 0.5; cursor: not-allowed; }

/* Alerts */
.tpl-alert[b-orteh9z5pq] {
    margin: 0.75rem 1.25rem 0;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
}

.tpl-alert-error[b-orteh9z5pq] {
    background: #fff0f0;
    border: 1px solid #ffd0d0;
    color: #c0392b;
}

.tpl-alert-success[b-orteh9z5pq] {
    background: #f0fff4;
    border: 1px solid #b7e4c7;
    color: #276749;
}

/* Empty */
.tpl-empty[b-orteh9z5pq] {
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Template list */
.tpl-list[b-orteh9z5pq] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tpl-card[b-orteh9z5pq] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.tpl-card:last-child[b-orteh9z5pq] {
    border-bottom: none;
}

.tpl-card-header[b-orteh9z5pq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.375rem;
}

.tpl-card-name[b-orteh9z5pq] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: monospace;
}

.tpl-card-badges[b-orteh9z5pq] {
    display: flex;
    gap: 0.375rem;
    flex-shrink: 0;
}

.tpl-card-meta[b-orteh9z5pq] {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.tpl-card-content[b-orteh9z5pq] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.625rem;
    margin-bottom: 0.625rem;
    white-space: pre-wrap;
}

.tpl-rejection[b-orteh9z5pq] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #c0392b;
    background: #fff0f0;
    border-radius: var(--radius-sm);
    padding: 0.375rem 0.5rem;
    margin-bottom: 0.5rem;
}

.tpl-card-actions[b-orteh9z5pq] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Badges */
.tpl-badge[b-orteh9z5pq] {
    padding: 0.1875rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tpl-badge-category.marketing[b-orteh9z5pq] { background: #e8f5e9; color: #2e7d32; }
.tpl-badge-category.utility[b-orteh9z5pq] { background: #e3f2fd; color: #1565c0; }
.tpl-badge-category.authentication[b-orteh9z5pq] { background: #fce4ec; color: #c62828; }

.tpl-badge-status.approved[b-orteh9z5pq] { background: #e8f5e9; color: #2e7d32; }
.tpl-badge-status.rejected[b-orteh9z5pq] { background: #ffebee; color: #c62828; }
.tpl-badge-status.submitted[b-orteh9z5pq] { background: #fff8e1; color: #f57f17; }
.tpl-badge-status.paused[b-orteh9z5pq] { background: #eeeeee; color: #616161; }
.tpl-badge-status.pending[b-orteh9z5pq] { background: #f3e5f5; color: #7b1fa2; }

/* Action buttons */
.tpl-btn-submit[b-orteh9z5pq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.75rem;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
}

.tpl-btn-submit:hover:not(:disabled)[b-orteh9z5pq] { opacity: 0.88; }
.tpl-btn-submit:disabled[b-orteh9z5pq] { opacity: 0.5; cursor: not-allowed; }

.tpl-btn-delete[b-orteh9z5pq] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3125rem 0.75rem;
    background: transparent;
    color: #e53e3e;
    border: 1px solid #feb2b2;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.tpl-btn-delete:hover:not(:disabled)[b-orteh9z5pq] { background: #fff5f5; }
.tpl-btn-delete:disabled[b-orteh9z5pq] { opacity: 0.5; cursor: not-allowed; }

/* Modal */
.tpl-modal-overlay[b-orteh9z5pq] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.tpl-modal[b-orteh9z5pq] {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.tpl-modal-header[b-orteh9z5pq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.tpl-modal-header h3[b-orteh9z5pq] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.03em;
}

.tpl-modal-close[b-orteh9z5pq] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0 0.25rem;
}

.tpl-modal-close:hover[b-orteh9z5pq] { color: var(--text-primary); }

.tpl-modal-body[b-orteh9z5pq] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 60vh;
    overflow-y: auto;
}

.tpl-modal-footer[b-orteh9z5pq] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
}

/* Form fields */
.tpl-field[b-orteh9z5pq] {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
}

.tpl-field label[b-orteh9z5pq] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.tpl-required[b-orteh9z5pq] {
    color: #e53e3e;
}

.tpl-input[b-orteh9z5pq],
.tpl-select[b-orteh9z5pq],
.tpl-textarea[b-orteh9z5pq] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--bg-input, var(--bg-card));
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.tpl-input:focus[b-orteh9z5pq],
.tpl-select:focus[b-orteh9z5pq],
.tpl-textarea:focus[b-orteh9z5pq] {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px var(--brand-primary-light);
}

.tpl-textarea[b-orteh9z5pq] { resize: vertical; }

.tpl-field small[b-orteh9z5pq] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Footer buttons */
.tpl-btn-secondary[b-orteh9z5pq] {
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.tpl-btn-secondary:hover[b-orteh9z5pq] { background: var(--bg-hover); }

.tpl-btn-primary[b-orteh9z5pq] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--brand-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
}

.tpl-btn-primary:hover:not(:disabled)[b-orteh9z5pq] { opacity: 0.88; }
.tpl-btn-primary:disabled[b-orteh9z5pq] { opacity: 0.5; cursor: not-allowed; }
/* /Components/Shared/AuthShell.razor.rz.scp.css */
/* =========================================================
   AuthShell — split-screen auth layout
   ========================================================= */

.as-shell[b-wt3k86o789] {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    background: var(--bg-page);
    font-family: 'Manrope', sans-serif;
}

/* ============ Brand panel (left) ============ */
.as-brand[b-wt3k86o789] {
    position: relative;
    overflow: hidden;
    padding: 40px 48px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background:
        radial-gradient(circle at 20% 0%, #6366f1 0%, transparent 55%),
        radial-gradient(circle at 100% 100%, #312e81 0%, transparent 60%),
        linear-gradient(135deg, #4338ca 0%, #1e1b4b 100%);
    isolation: isolate;
}

[data-theme="dark"] .as-brand[b-wt3k86o789] {
    background:
        radial-gradient(circle at 20% 0%, #4338ca 0%, transparent 55%),
        radial-gradient(circle at 100% 100%, #0f0c29 0%, transparent 60%),
        linear-gradient(135deg, #1e1b4b 0%, #0b0a23 100%);
}

.as-brand-grid[b-wt3k86o789] {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at 30% 40%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 30%, transparent 75%);
    pointer-events: none;
    z-index: -1;
}

.as-brand-glow[b-wt3k86o789] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.45;
    pointer-events: none;
    z-index: -1;
}

.as-glow-1[b-wt3k86o789] {
    top: -120px;
    left: -80px;
    width: 360px;
    height: 360px;
    background: #818cf8;
    animation: as-float-b-wt3k86o789 18s ease-in-out infinite;
}

.as-glow-2[b-wt3k86o789] {
    bottom: -100px;
    right: -60px;
    width: 320px;
    height: 320px;
    background: #c084fc;
    animation: as-float-b-wt3k86o789 22s ease-in-out infinite reverse;
}

.as-brand-top[b-wt3k86o789] {
    position: relative;
    z-index: 1;
}

.as-logo[b-wt3k86o789] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

.as-brand-name[b-wt3k86o789] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.as-brand-body[b-wt3k86o789] {
    position: relative;
    z-index: 1;
    max-width: 460px;
}

.as-brand-headline[b-wt3k86o789] {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin: 0 0 18px;
    color: #fff;
}

.as-brand-tagline[b-wt3k86o789] {
    font-size: 15.5px;
    line-height: 1.55;
    color: rgba(255,255,255,0.82);
    margin: 0 0 28px;
    letter-spacing: -0.005em;
}

.as-brand-points[b-wt3k86o789] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.as-brand-points li[b-wt3k86o789] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    color: rgba(255,255,255,0.92);
    font-weight: 500;
}

.as-bullet[b-wt3k86o789] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 0 4px rgba(251,191,36,0.18);
    flex-shrink: 0;
}

.as-brand-foot[b-wt3k86o789] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}

.as-brand-foot a[b-wt3k86o789] {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.18s;
}

.as-brand-foot a:hover[b-wt3k86o789] { color: #fff; }

.as-foot-dot[b-wt3k86o789] { opacity: 0.5; }

/* ============ Main (right) ============ */
.as-main[b-wt3k86o789] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    background: var(--bg-page);
}

.as-main-inner[b-wt3k86o789] {
    width: 100%;
    max-width: 420px;
}

/* ============ Animations ============ */
@keyframes as-float-b-wt3k86o789 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(28px, -22px); }
}

@media (prefers-reduced-motion: reduce) {
    .as-glow-1[b-wt3k86o789], .as-glow-2[b-wt3k86o789] { animation: none; }
}

/* ============ Responsive ============ */
@media (max-width: 960px) {
    .as-shell[b-wt3k86o789] {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .as-brand[b-wt3k86o789] {
        padding: 32px 28px 28px;
        min-height: 280px;
        justify-content: flex-start;
        gap: 28px;
    }
    .as-brand-headline[b-wt3k86o789] { font-size: clamp(26px, 6vw, 36px); }
    .as-brand-points[b-wt3k86o789] { display: none; }
    .as-brand-foot[b-wt3k86o789] { display: none; }
    .as-main[b-wt3k86o789] { padding: 32px 20px 48px; }
}

@media (max-width: 560px) {
    .as-brand[b-wt3k86o789] {
        padding: 28px 22px 24px;
        min-height: 220px;
    }
    .as-brand-tagline[b-wt3k86o789] { font-size: 14px; margin-bottom: 0; }
    .as-main[b-wt3k86o789] { padding: 28px 18px 40px; }
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
/* =========================================================
   EmptyState — illustrated, animated empty states
   ========================================================= */

.es-wrap[b-c22exj8mrs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 28px 16px;
    text-align: center;
    color: var(--text-primary);
}

.es-art[b-c22exj8mrs] {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--illus-accent);
}

.es-art svg[b-c22exj8mrs] { width: 100%; height: 100%; display: block; }

.es-title[b-c22exj8mrs] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.es-sub[b-c22exj8mrs] {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 320px;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.es-action[b-c22exj8mrs] { margin-top: 4px; }

/* =========== SUCCESS variant =========== */
.es-success .es-ring[b-c22exj8mrs] {
    fill: none;
    stroke: var(--illus-ring);
    stroke-width: 1.5;
    opacity: 0.6;
    transform-origin: 60px 60px;
}
.es-success .es-ring.r1[b-c22exj8mrs] { animation: es-spin-b-c22exj8mrs 18s linear infinite; }
.es-success .es-ring.r2[b-c22exj8mrs] {
    stroke-dasharray: 4 6;
    animation: es-spin-b-c22exj8mrs 14s linear infinite reverse;
}
.es-success .es-core[b-c22exj8mrs] {
    fill: var(--illus-ring-soft);
    animation: es-breath-b-c22exj8mrs 2.8s ease-in-out infinite;
}
.es-success .es-check[b-c22exj8mrs] {
    fill: none;
    stroke: var(--illus-accent);
    stroke-width: 3;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: es-check-draw-b-c22exj8mrs 0.9s 0.4s ease-out forwards;
}
.es-success .es-spark[b-c22exj8mrs] { fill: var(--illus-accent); opacity: 0; }
.es-success .es-spark.s1[b-c22exj8mrs] { animation: es-twinkle-b-c22exj8mrs 2.4s ease-in-out infinite; }
.es-success .es-spark.s2[b-c22exj8mrs] { animation: es-twinkle-b-c22exj8mrs 2.4s 0.4s ease-in-out infinite; }
.es-success .es-spark.s3[b-c22exj8mrs] { animation: es-twinkle-b-c22exj8mrs 2.4s 0.8s ease-in-out infinite; }
.es-success .es-spark.s4[b-c22exj8mrs] { animation: es-twinkle-b-c22exj8mrs 2.4s 1.2s ease-in-out infinite; }
.es-success .es-spark.s5[b-c22exj8mrs] { animation: es-twinkle-b-c22exj8mrs 2.4s 1.6s ease-in-out infinite; }
.es-success .es-spark.s6[b-c22exj8mrs] { animation: es-twinkle-b-c22exj8mrs 2.4s 2.0s ease-in-out infinite; }

/* =========== RADAR variant =========== */
.es-radar[b-c22exj8mrs] {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.es-radar-wave[b-c22exj8mrs] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--illus-accent);
    opacity: 0;
    animation: es-radar-b-c22exj8mrs 2.4s ease-out infinite;
}
.es-radar-wave.w1[b-c22exj8mrs] { animation-delay: 0s; }
.es-radar-wave.w2[b-c22exj8mrs] { animation-delay: 0.8s; }
.es-radar-wave.w3[b-c22exj8mrs] { animation-delay: 1.6s; }
.es-radar-core[b-c22exj8mrs] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--illus-accent);
    box-shadow: 0 0 0 4px var(--illus-ring-soft);
    animation: es-breath-b-c22exj8mrs 2s ease-in-out infinite;
}

/* =========== CHART variant =========== */
.es-chart .es-art[b-c22exj8mrs] {
    width: 100%;
    max-width: 260px;
    height: 100px;
    color: var(--illus-accent);
}
.es-ghost-line[b-c22exj8mrs] {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: es-ghost-draw-b-c22exj8mrs 2.6s ease-out forwards;
}
.es-ghost-line.b[b-c22exj8mrs] { animation-delay: 0.4s; opacity: 0.55; }
.es-ghost-area[b-c22exj8mrs] { opacity: 0; animation: es-ghost-fade-b-c22exj8mrs 0.8s 2s ease forwards; }

/* =========== SEARCH variant =========== */
.es-search .es-ring[b-c22exj8mrs] {
    fill: none;
    stroke: var(--illus-ring);
    stroke-width: 2;
    opacity: 0.7;
}
.es-search .es-ring.r1[b-c22exj8mrs] { animation: es-breath-b-c22exj8mrs 2.8s ease-in-out infinite; }
.es-search .es-ring.r2[b-c22exj8mrs] { stroke-dasharray: 3 5; }
.es-search .es-search-handle[b-c22exj8mrs] {
    stroke: var(--illus-accent);
    stroke-width: 4;
}
.es-search .es-spark[b-c22exj8mrs] { fill: var(--illus-accent); opacity: 0; }
.es-search .es-spark.s1[b-c22exj8mrs] { animation: es-twinkle-b-c22exj8mrs 2.4s ease-in-out infinite; }
.es-search .es-spark.s2[b-c22exj8mrs] { animation: es-twinkle-b-c22exj8mrs 2.4s 0.7s ease-in-out infinite; }
.es-search .es-spark.s3[b-c22exj8mrs] { animation: es-twinkle-b-c22exj8mrs 2.4s 1.3s ease-in-out infinite; }

/* =========== INBOX variant =========== */
.es-inbox .es-box[b-c22exj8mrs] {
    fill: var(--illus-ring-soft);
    stroke: var(--illus-ring);
    stroke-width: 2;
}
.es-inbox .es-box-flap[b-c22exj8mrs] {
    fill: none;
    stroke: var(--illus-accent);
    stroke-width: 2;
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    animation: es-check-draw-b-c22exj8mrs 1.2s 0.3s ease-out forwards;
}
.es-inbox .es-spark[b-c22exj8mrs] { fill: var(--illus-accent); opacity: 0; }
.es-inbox .es-spark.s1[b-c22exj8mrs] { animation: es-twinkle-b-c22exj8mrs 2.4s ease-in-out infinite; }
.es-inbox .es-spark.s2[b-c22exj8mrs] { animation: es-twinkle-b-c22exj8mrs 2.4s 0.6s ease-in-out infinite; }
.es-inbox .es-spark.s3[b-c22exj8mrs] { animation: es-twinkle-b-c22exj8mrs 2.4s 1.2s ease-in-out infinite; }

/* =========== keyframes =========== */
@keyframes es-spin-b-c22exj8mrs { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes es-breath-b-c22exj8mrs {
    0%, 100% { opacity: 0.65; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.06); }
}
@keyframes es-check-draw-b-c22exj8mrs { to { stroke-dashoffset: 0; } }
@keyframes es-twinkle-b-c22exj8mrs {
    0%, 100% { opacity: 0; transform: scale(0.6); }
    50% { opacity: 1; transform: scale(1); }
}
@keyframes es-radar-b-c22exj8mrs {
    0% { opacity: 0.65; transform: scale(0.4); }
    100% { opacity: 0; transform: scale(1); }
}
@keyframes es-ghost-draw-b-c22exj8mrs { to { stroke-dashoffset: 0; } }
@keyframes es-ghost-fade-b-c22exj8mrs { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .es-ring[b-c22exj8mrs],
    .es-core[b-c22exj8mrs],
    .es-check[b-c22exj8mrs],
    .es-spark[b-c22exj8mrs],
    .es-radar-wave[b-c22exj8mrs],
    .es-radar-core[b-c22exj8mrs],
    .es-ghost-line[b-c22exj8mrs],
    .es-ghost-area[b-c22exj8mrs],
    .es-box-flap[b-c22exj8mrs] {
        animation: none !important;
    }
    .es-check[b-c22exj8mrs], .es-box-flap[b-c22exj8mrs], .es-ghost-line[b-c22exj8mrs], .es-ghost-area[b-c22exj8mrs] { stroke-dashoffset: 0; opacity: 1; }
    .es-spark[b-c22exj8mrs] { opacity: 0.8; }
}
/* /Components/Shared/TopLoadingBar.razor.rz.scp.css */
/* ================================================
   Top Loading Bar — estilo WhatsApp Web / Linear
   ================================================ */

.top-loading-bar[b-6vhkazyty4] {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    z-index: 99999;
    background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-hover) 60%, var(--brand-primary) 100%);
    box-shadow: 0 0 8px var(--brand-primary-ring);
    pointer-events: none;
    opacity: 0;
    /* Sem transition no estado padrão para reset instantâneo */
}

/* ── Carregando: anima de 0% até ~85% suavemente ── */
.top-loading-bar.active[b-6vhkazyty4] {
    opacity: 1;
    width: 85%;
    /* Começa rápido, desacelera (nunca chega ao fim = sensação de aguardando) */
    transition: width 8s cubic-bezier(0.05, 0.1, 0.02, 0.95),
                opacity 0.1s ease;
}

/* ── Completando: salta para 100% rápido ── */
.top-loading-bar.completing[b-6vhkazyty4] {
    opacity: 1;
    width: 100%;
    transition: width 0.2s ease-out;
}

/* ── Sumindo: fade out ── */
.top-loading-bar.done[b-6vhkazyty4] {
    opacity: 0;
    width: 100%;
    transition: opacity 0.35s ease-out;
}