@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.olwso25aue.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   ITAMFY Dashboard Layout - Professional SaaS Design
   ========================================================================== */

/* Dashboard Layout Container */
.dashboard-layout[b-vgr28srdgl] {
    display: flex;
    min-height: 100vh;
    background: var(--bg-body);
    color: var(--text-primary);
    max-width: 100vw;
    overflow-x: hidden;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar[b-vgr28srdgl] {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: linear-gradient(180deg, #1e2024 0%, #16171b 100%);
    color: var(--text-light);
    transition: width var(--transition-base);
    z-index: var(--z-fixed);
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2);
}

/* Dark Mode Sidebar */
:global(body[data-theme="dark"]) .sidebar[b-vgr28srdgl] {
    background: linear-gradient(180deg, #1a1b1f 0%, #121317 100%);
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.4);
}

.sidebar.collapsed[b-vgr28srdgl] {
    width: var(--sidebar-collapsed-width);
}

/* Sidebar Brand */
.sidebar-brand[b-vgr28srdgl] {
    padding: 0 var(--space-5);
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--toolbar-height);
    color: #ffffff;
    transition: padding var(--transition-base);
    box-sizing: border-box;
}

.sidebar-logo[b-vgr28srdgl] {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    object-fit: contain;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.sidebar.collapsed .sidebar-brand[b-vgr28srdgl] {
    justify-content: center;
    padding: 0 var(--space-2);
}

/* Sidebar Navigation */
.sidebar-nav[b-vgr28srdgl] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-4) 0;
}

/* Custom Scrollbar for Sidebar */
.sidebar-nav[b-vgr28srdgl]::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav[b-vgr28srdgl]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

.sidebar-nav[b-vgr28srdgl]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
}

.sidebar-nav[b-vgr28srdgl]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Sidebar Footer - Legal Links */
.sidebar-footer[b-vgr28srdgl] {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-legal[b-vgr28srdgl] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
}

.legal-link[b-vgr28srdgl] {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    transition: color var(--transition-fast);
    line-height: 1.6;
}

.legal-link:hover[b-vgr28srdgl] {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: underline;
}

.sidebar-copyright[b-vgr28srdgl] {
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.25);
    margin-top: var(--space-2);
    line-height: 1.4;
}

.sidebar-version[b-vgr28srdgl] {
    font-size: 0.5625rem;
    color: rgba(255, 255, 255, 0.2);
    margin-top: var(--space-1);
}

.sidebar.collapsed .sidebar-footer[b-vgr28srdgl] {
    display: none;
}

/* Navigation Sections */
.nav-section[b-vgr28srdgl] {
    margin: var(--space-2) 0;
}

.section-title[b-vgr28srdgl] {
    padding: var(--space-3) var(--space-5);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
    margin-top: var(--space-3);
}

/* Navigation Items */
.nav-item[b-vgr28srdgl] {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-5);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all var(--transition-fast);
    gap: var(--space-3);
    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
    border-left: 3px solid transparent;
    margin: var(--space-1) 0;
}

.sidebar.collapsed .nav-item[b-vgr28srdgl] {
    justify-content: center;
    padding: var(--space-3) 0;
    border-left: none;
}

.nav-item:hover[b-vgr28srdgl] {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.nav-item.active[b-vgr28srdgl] {
    background: rgba(255, 255, 255, 0.12);
    border-left-color: #ffffff;
    color: #ffffff;
}

.sidebar.collapsed .nav-item.active[b-vgr28srdgl] {
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    margin: var(--space-1) var(--space-2);
}

/* Nav Group (accordion parent) */
.nav-group[b-vgr28srdgl] {
    position: relative;
}

.nav-parent[b-vgr28srdgl] {
    cursor: pointer;
    position: relative;
}

.nav-parent .nav-chevron[b-vgr28srdgl] {
    margin-left: auto;
    font-size: 0.625rem;
    opacity: 0.5;
    transition: transform 0.2s ease;
}

.nav-group.expanded .nav-parent .nav-chevron[b-vgr28srdgl] {
    transform: rotate(180deg);
}

.nav-parent:hover .nav-chevron[b-vgr28srdgl] {
    opacity: 0.8;
}

/* Nav Children (collapsible) */
.nav-children[b-vgr28srdgl] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    background: rgba(255, 255, 255, 0.03);
}

.nav-group.expanded .nav-children[b-vgr28srdgl] {
    max-height: 120px;
}

/* Nav Sub Item (indented child) */
.nav-sub-item[b-vgr28srdgl] {
    padding-left: calc(var(--space-5) + var(--space-5));
    font-size: 0.8125rem;
    border-left: none;
    position: relative;
}

.nav-sub-item[b-vgr28srdgl]::before {
    position: absolute;
    left: calc(var(--space-5) + 8px);
    top: 50%;
    width: 6px;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.sidebar.collapsed .nav-children[b-vgr28srdgl] {
    max-height: none;
    overflow: visible;
    background: transparent;
}

.sidebar.collapsed .nav-sub-item[b-vgr28srdgl] {
    padding-left: 0;
    font-size: 0.9375rem;
}

.sidebar.collapsed .nav-sub-item[b-vgr28srdgl]::before {
    display: none;
}

.sidebar.collapsed .nav-parent .nav-chevron[b-vgr28srdgl] {
    display: none;
}

/* Nav Item Icons */
.nav-item i[b-vgr28srdgl],
.nav-item svg[b-vgr28srdgl] {
    font-size: 1.125rem;
    width: 22px;
    text-align: center;
    opacity: 0.9;
}

/* ==========================================================================
   Main Content Wrapper
   ========================================================================== */

.main-wrapper[b-vgr28srdgl] {
    flex: 1;
    margin-left: var(--sidebar-width);
    transition: margin-left var(--transition-base);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    background: var(--bg-body);
}

.main-wrapper.sidebar-collapsed[b-vgr28srdgl] {
    margin-left: var(--sidebar-collapsed-width);
}

/* ==========================================================================
   Top Toolbar
   ========================================================================== */

.top-toolbar[b-vgr28srdgl] {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    padding: 0 var(--space-6);
    height: var(--toolbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-sm);
}

.toolbar-left[b-vgr28srdgl] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.toolbar-right[b-vgr28srdgl] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Burger Menu Button */
.burger-menu[b-vgr28srdgl] {
    color: var(--text-secondary);
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.burger-menu:hover[b-vgr28srdgl] {
    background: var(--bg-hover);
    color: var(--itamfy-primary);
}

/* Page Title */
.page-title[b-vgr28srdgl] {
    color: var(--text-primary);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
    margin: 0;
    letter-spacing: -0.01em;
}

/* Toolbar Icon Buttons */
.toolbar-icon[b-vgr28srdgl] {
    color: var(--text-secondary) !important;
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    text-decoration: none !important;
}

.toolbar-icon:hover[b-vgr28srdgl] {
    background: var(--bg-hover);
    color: var(--itamfy-primary) !important;
    text-decoration: none !important;
}

.toolbar-icon:global(.btn-link)[b-vgr28srdgl] {
    color: var(--text-secondary) !important;
    text-decoration: none !important;
}

.toolbar-icon:global(.btn-link):hover[b-vgr28srdgl] {
    color: var(--itamfy-primary) !important;
    text-decoration: none !important;
}

/* ==========================================================================
   Upgrade Now Button (Toolbar)
   ========================================================================== */

.upgrade-now-btn[b-vgr28srdgl] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
    background: var(--itamfy-primary);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    animation: upgrade-glow-b-vgr28srdgl 2s ease-in-out infinite;
    white-space: nowrap;
}

.upgrade-now-btn:hover[b-vgr28srdgl] {
    background: var(--itamfy-primary-light);
    box-shadow: 0 0 20px rgba(15, 136, 255, 0.5);
    transform: translateY(-1px);
}

@keyframes upgrade-glow-b-vgr28srdgl {
    0%, 100% {
        box-shadow: 0 0 8px rgba(15, 136, 255, 0.4), 0 0 16px rgba(15, 136, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 16px rgba(15, 136, 255, 0.6), 0 0 32px rgba(15, 136, 255, 0.3);
    }
}

:global(body[data-theme="dark"]) .upgrade-now-btn[b-vgr28srdgl] {
    background: #4aa3ff;
    animation: upgrade-glow-dark-b-vgr28srdgl 2s ease-in-out infinite;
}

:global(body[data-theme="dark"]) .upgrade-now-btn:hover[b-vgr28srdgl] {
    background: #7c5fff;
    box-shadow: 0 0 20px rgba(74, 163, 255, 0.6);
}

@keyframes upgrade-glow-dark-b-vgr28srdgl {
    0%, 100% {
        box-shadow: 0 0 8px rgba(74, 163, 255, 0.5), 0 0 16px rgba(74, 163, 255, 0.25);
    }
    50% {
        box-shadow: 0 0 16px rgba(74, 163, 255, 0.7), 0 0 32px rgba(74, 163, 255, 0.35);
    }
}

/* ==========================================================================
   Sidebar Upgrade Hint
   ========================================================================== */

.upgrade-hint[b-vgr28srdgl] {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.6;
}

/* User Menu */
.user-menu[b-vgr28srdgl] {
    color: var(--text-secondary) !important;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none !important;
}

.user-menu:hover[b-vgr28srdgl] {
    background: var(--bg-hover);
    color: var(--text-primary) !important;
    text-decoration: none !important;
}

.user-menu:global(.btn-link)[b-vgr28srdgl] {
    color: var(--text-secondary) !important;
    text-decoration: none !important;
}

.user-menu:global(.btn-link):hover[b-vgr28srdgl] {
    color: var(--text-primary) !important;
    text-decoration: none !important;
}

.username[b-vgr28srdgl] {
    font-weight: 500;
    font-size: 0.9375rem;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

/* ==========================================================================
   Page Content
   ========================================================================== */

.page-content[b-vgr28srdgl] {
    flex: 1;
    padding: var(--space-6);
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-body);
    min-width: 0;
    max-width: 100%;
}

.page-content :global(.container-fluid)[b-vgr28srdgl] {
    max-width: 100%;
    overflow-x: hidden;
    padding-left: 0;
    padding-right: 0;
}

/* ==========================================================================
   Auth Layout (Non-Authenticated Users)
   ========================================================================== */

.auth-layout[b-vgr28srdgl] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-body);
    color: var(--text-primary);
    padding: var(--space-5);
}

/* Auth Branding */
.auth-branding[b-vgr28srdgl] {
    text-align: center;
    padding: var(--space-10) var(--space-5) var(--space-6);
}

.brand-logo[b-vgr28srdgl] {
    margin-bottom: var(--space-4);
    display: flex;
    justify-content: center;
}

.auth-logo[b-vgr28srdgl] {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-xl);
    object-fit: contain;
    box-shadow: var(--shadow-md);
}

.auth-branding h2[b-vgr28srdgl] {
    color: var(--text-primary);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: var(--space-2);
    letter-spacing: -0.02em;
}

.auth-branding p[b-vgr28srdgl] {
    color: var(--text-secondary);
    font-size: 1rem;
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Auth Content */
.auth-content[b-vgr28srdgl] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: var(--space-4);
}

/* Auth Footer */
.auth-footer[b-vgr28srdgl] {
    text-align: center;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.auth-legal[b-vgr28srdgl] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.auth-legal a[b-vgr28srdgl] {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.auth-legal a:hover[b-vgr28srdgl] {
    color: var(--text-primary);
    text-decoration: underline;
}

.legal-separator[b-vgr28srdgl] {
    color: var(--text-muted);
    font-size: 0.75rem;
    user-select: none;
}

.auth-copyright[b-vgr28srdgl] {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.auth-version[b-vgr28srdgl] {
    font-size: 0.625rem;
    color: var(--text-muted);
    opacity: 0.6;
}

.theme-toggle-auth[b-vgr28srdgl] {
    color: var(--text-secondary) !important;
    text-decoration: none;
    transition: color var(--transition-fast);
    font-size: 0.875rem;
    font-weight: 500;
}

.theme-toggle-auth:hover[b-vgr28srdgl] {
    color: var(--itamfy-primary) !important;
}

.theme-toggle-auth:global(.btn-link)[b-vgr28srdgl] {
    color: var(--text-secondary) !important;
}

.theme-toggle-auth:global(.btn-link):hover[b-vgr28srdgl] {
    color: var(--itamfy-primary) !important;
}

/* ==========================================================================
   Global Component Overrides
   ========================================================================== */

/* Dropdown Menu Styling */
:global(.dropdown-menu)[b-vgr28srdgl] {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    margin-top: var(--space-2);
    padding: var(--space-2);
    background: var(--bg-card);
}

:global(.dropdown-item)[b-vgr28srdgl] {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    font-size: 0.9375rem;
}

:global(.dropdown-item:hover)[b-vgr28srdgl] {
    background: var(--bg-hover);
    color: var(--itamfy-primary);
}

:global(body[data-theme="dark"] .dropdown-menu)[b-vgr28srdgl] {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

:global(body[data-theme="dark"] .dropdown-item)[b-vgr28srdgl] {
    color: var(--text-primary);
}

:global(body[data-theme="dark"] .dropdown-item:hover)[b-vgr28srdgl] {
    background-color: var(--bg-hover);
}

/* Button Link Styling */
:global(.btn-link)[b-vgr28srdgl] {
    text-decoration: none;
    border: none;
    background: transparent;
}

:global(.btn-link:focus)[b-vgr28srdgl] {
    box-shadow: none;
    outline: none;
}

/* ==========================================================================
   Mobile Sidebar Overlay
   ========================================================================== */

.sidebar-overlay[b-vgr28srdgl] {
    display: none;
}

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

@media (max-width: 768px) {
    .sidebar[b-vgr28srdgl] {
        transform: translateX(-100%);
        width: var(--sidebar-width);
    }

    .sidebar.collapsed[b-vgr28srdgl] {
        transform: translateX(-100%);
        width: var(--sidebar-width);
    }

    .sidebar.mobile-open[b-vgr28srdgl],
    .sidebar.collapsed.mobile-open[b-vgr28srdgl] {
        transform: translateX(0);
        width: var(--sidebar-width);
        z-index: var(--z-fixed);
    }

    /* Override collapsed styles on mobile when drawer is open */
    .sidebar.collapsed.mobile-open .sidebar-brand[b-vgr28srdgl] {
        justify-content: flex-start;
        padding: 0 var(--space-5);
    }

    .sidebar.collapsed.mobile-open .nav-item[b-vgr28srdgl] {
        justify-content: flex-start;
        padding: var(--space-3) var(--space-5);
        border-left: 3px solid transparent;
    }

    .sidebar.collapsed.mobile-open .nav-item.active[b-vgr28srdgl] {
        background: rgba(255, 255, 255, 0.12);
        border-left-color: #ffffff;
        border-radius: 0;
        margin: var(--space-1) 0;
    }

    .sidebar.collapsed.mobile-open .nav-children[b-vgr28srdgl] {
        max-height: 0;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.03);
    }

    .sidebar.collapsed.mobile-open .nav-group.expanded .nav-children[b-vgr28srdgl] {
        max-height: 120px;
    }

    .sidebar.collapsed.mobile-open .nav-sub-item[b-vgr28srdgl] {
        padding-left: calc(var(--space-5) + var(--space-5));
        font-size: 0.8125rem;
    }

    .sidebar.collapsed.mobile-open .sidebar-footer[b-vgr28srdgl] {
        display: block;
    }

    .sidebar-overlay[b-vgr28srdgl] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: calc(var(--z-fixed) - 1);
        cursor: pointer;
    }

    .main-wrapper[b-vgr28srdgl],
    .main-wrapper.sidebar-collapsed[b-vgr28srdgl] {
        margin-left: 0;
    }

    .username[b-vgr28srdgl] {
        display: none;
    }

    .page-content[b-vgr28srdgl] {
        padding: var(--space-4);
    }

    .top-toolbar[b-vgr28srdgl] {
        padding: 0 var(--space-4);
    }

    .page-title[b-vgr28srdgl] {
        font-size: 1rem;
    }

    .auth-branding[b-vgr28srdgl] {
        padding: var(--space-6) var(--space-4) var(--space-4);
    }

    .auth-logo[b-vgr28srdgl] {
        width: 72px;
        height: 72px;
    }

    .auth-branding h2[b-vgr28srdgl] {
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .toolbar-left[b-vgr28srdgl] {
        gap: var(--space-2);
    }

    .toolbar-right[b-vgr28srdgl] {
        gap: var(--space-2);
    }

    .page-title[b-vgr28srdgl] {
        display: none;
    }
}

/* ==========================================================================
   Smooth Transitions
   ========================================================================== */

.sidebar[b-vgr28srdgl],
.main-wrapper[b-vgr28srdgl] {
    transition: width var(--transition-base),
                margin-left var(--transition-base),
                transform var(--transition-base);
}

/* Theme transition for all elements */
*[b-vgr28srdgl] {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 200ms;
    transition-timing-function: ease;
}

/* Exclude specific elements from transition */
.sidebar-nav *[b-vgr28srdgl],
.nav-item[b-vgr28srdgl],
button[b-vgr28srdgl],
a[b-vgr28srdgl] {
    transition-property: background-color, border-color, color, box-shadow, transform;
}

@media (max-width: 480px) {
    .page-content[b-vgr28srdgl] {
        padding: var(--space-3);
    }

    .top-toolbar[b-vgr28srdgl] {
        padding: 0 var(--space-3);
    }

    .upgrade-now-btn[b-vgr28srdgl] {
        display: none;
    }
}
/* /Components/Pages/Account/Account.razor.rz.scp.css */
/* Account Container */
.account-container[b-9i80ayvclv] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
    overflow-x: hidden;
}

.account-container.full-width[b-9i80ayvclv] {
    max-width: 100%;
}

/* Page Header */
.page-header[b-9i80ayvclv] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-9i80ayvclv] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

/* Field Labels - consistent with other detail pages */
[b-9i80ayvclv] .field-label {
    font-weight: 600;
    color: var(--bs-secondary, #6c757d);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Card Headers */
[b-9i80ayvclv] .card-title {
    font-weight: 600;
    margin-bottom: 0;
}

/* ==========================================================================
   Vertical Tab Layout
   ========================================================================== */

.account-layout[b-9i80ayvclv] {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
}

.account-sidebar[b-9i80ayvclv] {
    min-width: 220px;
    max-width: 220px;
    position: sticky;
    top: var(--space-4);
}

.account-nav[b-9i80ayvclv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    box-shadow: var(--shadow-card);
}

.account-nav-item[b-9i80ayvclv] {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    gap: var(--space-2);
}

.account-nav-item:hover[b-9i80ayvclv] {
    background: var(--bg-hover);
    color: var(--text-primary);
    text-decoration: none;
}

.account-nav-item.active[b-9i80ayvclv] {
    background: var(--itamfy-primary);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

.account-nav-item.active:hover[b-9i80ayvclv] {
    background: var(--itamfy-primary-light);
    color: #ffffff;
}

.account-content[b-9i80ayvclv] {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

/* ==========================================================================
   Detail Grid - side-by-side cards
   ========================================================================== */

.detail-grid[b-9i80ayvclv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4, 1rem);
    align-items: stretch;
    margin-bottom: var(--space-4, 1rem);
}

.detail-grid[b-9i80ayvclv]  .card {
    height: 100%;
}

/* ==========================================================================
   Overview Tab - Loyalty Section
   ========================================================================== */

.loyalty-header[b-9i80ayvclv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.loyalty-icon[b-9i80ayvclv] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg, 8px);
    background: rgba(255, 193, 7, 0.12);
    color: #d4a017;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.loyalty-info[b-9i80ayvclv] {
    flex: 1;
    min-width: 0;
}

.loyalty-stats[b-9i80ayvclv] {
    margin-top: var(--space-4);
}

.loyalty-stat[b-9i80ayvclv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.loyalty-stat-label[b-9i80ayvclv] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.loyalty-stat-value[b-9i80ayvclv] {
    font-weight: 600;
    font-size: 1rem;
}

/* ==========================================================================
   Security Tab - 2FA Status
   ========================================================================== */

.security-status[b-9i80ayvclv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.security-status-icon[b-9i80ayvclv] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.security-status-icon.enabled[b-9i80ayvclv] {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.security-status-icon.disabled[b-9i80ayvclv] {
    background: rgba(255, 193, 7, 0.12);
    color: #d4a017;
}

.security-status-info[b-9i80ayvclv] {
    flex: 1;
    min-width: 0;
}

/* Security Tips */
.tips-list[b-9i80ayvclv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tip-item[b-9i80ayvclv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-lg, 8px);
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: background-color 0.15s ease;
}

.tip-item:hover[b-9i80ayvclv] {
    background-color: rgba(0, 0, 0, 0.02);
}

.tip-icon[b-9i80ayvclv] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md, 6px);
    background: var(--itamfy-primary-light, rgba(79, 70, 229, 0.1));
    color: var(--itamfy-primary, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* QR Code Image */
.qr-code-image[b-9i80ayvclv] {
    max-width: 200px;
    border: 4px solid white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Usage Tab
   ========================================================================== */

.usage-grid[b-9i80ayvclv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.usage-card-header[b-9i80ayvclv] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: var(--space-4);
}

.usage-card-icon[b-9i80ayvclv] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md, 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.usage-card-icon.assets[b-9i80ayvclv] {
    background: rgba(79, 70, 229, 0.1);
    color: var(--itamfy-primary, #4f46e5);
}

.usage-card-icon.templates[b-9i80ayvclv] {
    background: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
}

.usage-card-icon.licenses[b-9i80ayvclv] {
    background: rgba(23, 162, 184, 0.1);
    color: #17a2b8;
}

.usage-card-icon.certificates[b-9i80ayvclv] {
    background: rgba(255, 193, 7, 0.12);
    color: #d4a017;
}

.usage-card-icon.users[b-9i80ayvclv] {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.usage-card-icon.locations[b-9i80ayvclv] {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.usage-numbers[b-9i80ayvclv] {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.usage-current[b-9i80ayvclv] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--itamfy-primary);
}

.usage-separator[b-9i80ayvclv] {
    font-size: 1.5rem;
    color: var(--text-muted);
}

.usage-max[b-9i80ayvclv] {
    font-size: 1.25rem;
    color: var(--text-muted);
}

.usage-remaining[b-9i80ayvclv] {
    margin-top: var(--space-2);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* ==========================================================================
   History Table (Usage & Billing tabs)
   ========================================================================== */

.history-table[b-9i80ayvclv] {
    margin-bottom: 0;
    font-size: 0.9rem;
}

.history-table thead[b-9i80ayvclv] {
    background-color: var(--bg-hover, #f8f9fa);
}

.history-table thead th[b-9i80ayvclv] {
    font-weight: 600;
    border-bottom: 2px solid var(--border-color, #dee2e6);
    padding: 0.75rem;
}

.history-table tbody td[b-9i80ayvclv] {
    vertical-align: middle;
    padding: 0.75rem;
}

/* ==========================================================================
   Billing Tab
   ========================================================================== */

.cancel-section[b-9i80ayvclv] {
    margin-top: var(--space-4);
}

.cancel-actions[b-9i80ayvclv] {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.invoice-link[b-9i80ayvclv] {
    text-decoration: none;
    color: var(--itamfy-primary);
    font-weight: 500;
    transition: color var(--transition-fast);
}

.invoice-link:hover[b-9i80ayvclv] {
    text-decoration: underline;
    color: var(--itamfy-primary-light);
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.empty-state[b-9i80ayvclv] {
    text-align: center;
    padding: var(--space-5) var(--space-4);
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

:global(body[data-theme="dark"]) .page-header[b-9i80ayvclv] {
    border-bottom-color: var(--border-color);
}

:global(body[data-theme="dark"]) .loyalty-icon[b-9i80ayvclv] {
    background: rgba(255, 193, 7, 0.15);
}

:global(body[data-theme="dark"]) .security-status-icon.enabled[b-9i80ayvclv] {
    background: rgba(40, 167, 69, 0.15);
}

:global(body[data-theme="dark"]) .security-status-icon.disabled[b-9i80ayvclv] {
    background: rgba(255, 193, 7, 0.15);
}

:global(body[data-theme="dark"]) .tip-item[b-9i80ayvclv] {
    border-color: #495057;
}

:global(body[data-theme="dark"]) .tip-item:hover[b-9i80ayvclv] {
    background-color: rgba(255, 255, 255, 0.05);
}

:global(body[data-theme="dark"]) .tip-icon[b-9i80ayvclv] {
    background: rgba(79, 70, 229, 0.15);
}

:global(body[data-theme="dark"]) .usage-card-icon.assets[b-9i80ayvclv] {
    background: rgba(79, 70, 229, 0.15);
}

:global(body[data-theme="dark"]) .usage-card-icon.templates[b-9i80ayvclv] {
    background: rgba(111, 66, 193, 0.15);
}

:global(body[data-theme="dark"]) .usage-card-icon.licenses[b-9i80ayvclv] {
    background: rgba(23, 162, 184, 0.15);
}

:global(body[data-theme="dark"]) .usage-card-icon.certificates[b-9i80ayvclv] {
    background: rgba(255, 193, 7, 0.15);
}

:global(body[data-theme="dark"]) .usage-card-icon.users[b-9i80ayvclv] {
    background: rgba(40, 167, 69, 0.15);
}

:global(body[data-theme="dark"]) .usage-card-icon.locations[b-9i80ayvclv] {
    background: rgba(220, 53, 69, 0.15);
}

:global(body[data-theme="dark"]) .history-table thead[b-9i80ayvclv] {
    background-color: rgba(255, 255, 255, 0.03);
}

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

@media (max-width: 768px) {
    .account-layout[b-9i80ayvclv] {
        flex-direction: column;
        gap: var(--space-4);
    }

    .account-sidebar[b-9i80ayvclv] {
        min-width: 100%;
        max-width: 100%;
        position: static;
    }

    .account-nav[b-9i80ayvclv] {
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
        padding: var(--space-2);
    }

    .account-nav-item[b-9i80ayvclv] {
        padding: var(--space-2) var(--space-3);
        font-size: 0.8125rem;
    }

    .detail-grid[b-9i80ayvclv] {
        grid-template-columns: 1fr;
    }

    .usage-grid[b-9i80ayvclv] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .account-container[b-9i80ayvclv] {
        padding: 0;
    }

    .page-header[b-9i80ayvclv] {
        flex-direction: column;
        gap: var(--space-3);
    }
}

@media (max-width: 480px) {
    .account-nav-item[b-9i80ayvclv] {
        padding: var(--space-2) var(--space-2);
        font-size: 0.75rem;
    }

    .usage-grid[b-9i80ayvclv] {
        grid-template-columns: 1fr;
    }

    .usage-current[b-9i80ayvclv] {
        font-size: 1.5rem;
    }

    .cancel-actions[b-9i80ayvclv] {
        flex-direction: column;
    }
}
/* /Components/Pages/Admin/AdminAnnouncements.razor.rz.scp.css */
/* ==========================================================================
   Admin Announcements - Professional SaaS Design
   ========================================================================== */

/* Admin Container */
.admin-container[b-inptiymjuz] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.admin-container.full-width[b-inptiymjuz] {
    max-width: 100%;
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.page-header[b-inptiymjuz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-inptiymjuz] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

/* Header Action Buttons */
.header-actions :global(.btn)[b-inptiymjuz] {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    font-weight: 500;
}

.header-actions :global(.btn:hover)[b-inptiymjuz] {
    background-color: var(--bg-hover);
    border-color: var(--itamfy-primary);
    color: var(--itamfy-primary);
}

.header-actions :global(.btn-primary)[b-inptiymjuz] {
    background: var(--itamfy-primary);
    border: none;
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

.header-actions :global(.btn-primary:hover)[b-inptiymjuz] {
    background: var(--itamfy-primary-light);
    color: #ffffff;
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Admin Warning Banner
   ========================================================================== */

.admin-warning[b-inptiymjuz] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-left: 4px solid rgba(245, 158, 11, 0.8);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.admin-warning :global(.b-icon)[b-inptiymjuz] {
    color: rgba(245, 158, 11, 0.9);
    flex-shrink: 0;
}

:global(body[data-theme="dark"]) .admin-warning[b-inptiymjuz] {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.2);
    border-left-color: rgba(245, 158, 11, 0.6);
}

/* ==========================================================================
   Data Table
   ========================================================================== */

.data-table[b-inptiymjuz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.data-table th[b-inptiymjuz] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    padding: var(--space-4);
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.data-table td[b-inptiymjuz] {
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
}

.data-table tbody tr[b-inptiymjuz] {
    transition: background-color var(--transition-fast);
}

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

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

/* ==========================================================================
   Loading State
   ========================================================================== */

.loading-container[b-inptiymjuz] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
}

.loading-spinner[b-inptiymjuz] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-color);
    border-top-color: var(--itamfy-primary);
    border-radius: 50%;
    animation: spin-b-inptiymjuz 1s linear infinite;
}

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

/* ==========================================================================
   Dark Mode
   ========================================================================== */

:global(body[data-theme="dark"]) .page-header[b-inptiymjuz] {
    border-bottom-color: var(--border-color);
}

:global(body[data-theme="dark"]) .data-table thead[b-inptiymjuz] {
    background-color: rgba(255, 255, 255, 0.02);
}

:global(body[data-theme="dark"]) .data-table tbody tr:hover[b-inptiymjuz] {
    background-color: var(--bg-hover);
}

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

@media (max-width: 768px) {
    .page-header[b-inptiymjuz] {
        flex-direction: column;
        gap: var(--space-4);
    }

    .header-actions[b-inptiymjuz] {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 576px) {
    .admin-container[b-inptiymjuz] {
        padding: 0;
    }

    .data-table th[b-inptiymjuz],
    .data-table td[b-inptiymjuz] {
        padding: var(--space-3);
    }
}

@media (max-width: 480px) {
    .page-header[b-inptiymjuz] {
        gap: var(--space-3);
    }

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

    .header-actions :global(.btn)[b-inptiymjuz] {
        flex: 1 1 auto;
        text-align: center;
    }
}
/* /Components/Pages/Admin/AdminDashboard.razor.rz.scp.css */
/* ==========================================================================
   Admin Dashboard - Professional SaaS Design
   ========================================================================== */

/* Admin Container */
.admin-container[b-9cx83lgd6w] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.admin-container.full-width[b-9cx83lgd6w] {
    max-width: 100%;
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.page-header[b-9cx83lgd6w] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-9cx83lgd6w] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

/* Header Action Buttons */
.header-actions :global(.btn)[b-9cx83lgd6w] {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    font-weight: 500;
}

.header-actions :global(.btn:hover)[b-9cx83lgd6w] {
    background-color: var(--bg-hover);
    border-color: var(--itamfy-primary);
    color: var(--itamfy-primary);
}

/* ==========================================================================
   Admin Warning Banner
   ========================================================================== */

.admin-warning[b-9cx83lgd6w] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-left: 4px solid rgba(245, 158, 11, 0.8);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.admin-warning :global(.b-icon)[b-9cx83lgd6w] {
    color: rgba(245, 158, 11, 0.9);
    flex-shrink: 0;
}

:global(body[data-theme="dark"]) .admin-warning[b-9cx83lgd6w] {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.2);
    border-left-color: rgba(245, 158, 11, 0.6);
}

/* ==========================================================================
   Stats Grid
   ========================================================================== */

.stats-grid[b-9cx83lgd6w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

.stat-card[b-9cx83lgd6w] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: var(--shadow-card);
    transition: all var(--transition-fast);
}

.stat-card-clickable[b-9cx83lgd6w] {
    cursor: pointer;
}

.stat-card-clickable:hover[b-9cx83lgd6w] {
    border-color: var(--itamfy-primary);
    box-shadow: var(--shadow-md);
}

.stat-card .card-body[b-9cx83lgd6w] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 0;
    background: transparent;
}

.stat-top[b-9cx83lgd6w] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.stat-icon[b-9cx83lgd6w] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.5rem;
}

.stat-icon-primary[b-9cx83lgd6w] { background: rgba(15, 136, 255, 0.1); color: var(--itamfy-primary); }
.stat-icon-success[b-9cx83lgd6w] { background: rgba(16, 185, 129, 0.1); color: var(--itamfy-success); }
.stat-icon-warning[b-9cx83lgd6w] { background: rgba(245, 158, 11, 0.1); color: var(--itamfy-warning); }
.stat-icon-info[b-9cx83lgd6w] { background: rgba(99, 102, 241, 0.1); color: var(--itamfy-info); }
.stat-icon-danger[b-9cx83lgd6w] { background: rgba(239, 68, 68, 0.1); color: var(--itamfy-danger); }

/* Live indicator for real-time stats */
.stat-card-live[b-9cx83lgd6w] {
    position: relative;
    border-color: rgba(16, 185, 129, 0.3);
}

.stat-card-live[b-9cx83lgd6w]::before {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 8px;
    height: 8px;
    background: var(--itamfy-success);
    border-radius: 50%;
    animation: pulse-live-b-9cx83lgd6w 2s ease-in-out infinite;
}

@keyframes pulse-live-b-9cx83lgd6w {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.realtime-stats[b-9cx83lgd6w] {
    grid-template-columns: repeat(4, 1fr);
}

.stat-card h2[b-9cx83lgd6w] {
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.stat-card p[b-9cx83lgd6w] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    margin: var(--space-1) 0 0 0;
}

/* ==========================================================================
   Charts Grid
   ========================================================================== */

.charts-grid[b-9cx83lgd6w] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.charts-grid :deep(.card)[b-9cx83lgd6w] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.loading-container[b-9cx83lgd6w] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
}

.loading-spinner[b-9cx83lgd6w] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-color);
    border-top-color: var(--itamfy-primary);
    border-radius: 50%;
    animation: spin-b-9cx83lgd6w 1s linear infinite;
}

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

/* ==========================================================================
   Dark Mode
   ========================================================================== */

:global(body[data-theme="dark"]) .page-header[b-9cx83lgd6w] {
    border-bottom-color: var(--border-color);
}

:global(body[data-theme="dark"]) .stat-card[b-9cx83lgd6w] {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

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

@media (max-width: 992px) {
    .charts-grid[b-9cx83lgd6w] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-header[b-9cx83lgd6w] {
        flex-direction: column;
        gap: var(--space-4);
    }

    .header-actions[b-9cx83lgd6w] {
        width: 100%;
        justify-content: flex-start;
    }

    .stats-grid[b-9cx83lgd6w] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 576px) {
    .admin-container[b-9cx83lgd6w] {
        padding: 0;
    }

    .stats-grid[b-9cx83lgd6w] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .page-header[b-9cx83lgd6w] {
        gap: var(--space-3);
    }

    .header-actions[b-9cx83lgd6w] {
        flex-wrap: wrap;
        width: 100%;
    }

    .header-actions :global(.btn)[b-9cx83lgd6w] {
        flex: 1 1 auto;
        text-align: center;
    }
}
/* /Components/Pages/Admin/AdminOrganizationDetail.razor.rz.scp.css */
/* ==========================================================================
   Admin Organization Detail - Professional SaaS Design
   ========================================================================== */

/* Admin Container */
.admin-container[b-u0nb4sf78a] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.admin-container.full-width[b-u0nb4sf78a] {
    max-width: 100%;
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.page-header[b-u0nb4sf78a] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-u0nb4sf78a] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

/* Header Action Buttons */
.header-actions :global(.btn)[b-u0nb4sf78a] {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    font-weight: 500;
}

.header-actions :global(.btn:hover)[b-u0nb4sf78a] {
    background-color: var(--bg-hover);
    border-color: var(--itamfy-primary);
    color: var(--itamfy-primary);
}

/* Admin Warning Banner */
.admin-warning[b-u0nb4sf78a] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-left: 4px solid rgba(245, 158, 11, 0.8);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.admin-warning :global(.b-icon)[b-u0nb4sf78a] {
    color: rgba(245, 158, 11, 0.9);
    flex-shrink: 0;
}

:global(body[data-theme="dark"]) .admin-warning[b-u0nb4sf78a] {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.2);
    border-left-color: rgba(245, 158, 11, 0.6);
}

.back-link[b-u0nb4sf78a] {
    padding: 0;
    font-size: 0.875rem;
}

/* ==========================================================================
   Info Grid
   ========================================================================== */

.info-grid[b-u0nb4sf78a] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.info-item[b-u0nb4sf78a] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.info-label[b-u0nb4sf78a] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.info-value[b-u0nb4sf78a] {
    color: var(--text-primary);
    font-size: 0.9375rem;
}

/* ==========================================================================
   Org Stats Grid
   ========================================================================== */

.org-stats-grid[b-u0nb4sf78a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-color);
}

.org-stat[b-u0nb4sf78a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--bg-hover);
    border-radius: var(--radius-lg);
}

.org-stat-value[b-u0nb4sf78a] {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--itamfy-primary);
}

.org-stat-label[b-u0nb4sf78a] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* ==========================================================================
   Two Column Layout
   ========================================================================== */

.detail-two-col[b-u0nb4sf78a] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

.detail-two-col :deep(.card)[b-u0nb4sf78a] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

/* ==========================================================================
   Data Table
   ========================================================================== */

.data-table[b-u0nb4sf78a] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.data-table th[b-u0nb4sf78a] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    padding: var(--space-4);
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.data-table td[b-u0nb4sf78a] {
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
}

.data-table tbody tr[b-u0nb4sf78a] {
    transition: background-color var(--transition-fast);
}

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

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

/* ==========================================================================
   Loading State
   ========================================================================== */

.loading-container[b-u0nb4sf78a] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
}

.loading-spinner[b-u0nb4sf78a] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-color);
    border-top-color: var(--itamfy-primary);
    border-radius: 50%;
    animation: spin-b-u0nb4sf78a 1s linear infinite;
}

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

/* ==========================================================================
   Dark Mode
   ========================================================================== */

:global(body[data-theme="dark"]) .page-header[b-u0nb4sf78a] {
    border-bottom-color: var(--border-color);
}

:global(body[data-theme="dark"]) .data-table thead[b-u0nb4sf78a] {
    background-color: rgba(255, 255, 255, 0.02);
}

:global(body[data-theme="dark"]) .data-table tbody tr:hover[b-u0nb4sf78a] {
    background-color: var(--bg-hover);
}

:global(body[data-theme="dark"]) .org-stat[b-u0nb4sf78a] {
    background: rgba(255, 255, 255, 0.04);
}

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

@media (max-width: 992px) {
    .detail-two-col[b-u0nb4sf78a] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-header[b-u0nb4sf78a] {
        flex-direction: column;
        gap: var(--space-4);
    }

    .header-actions[b-u0nb4sf78a] {
        width: 100%;
        justify-content: flex-start;
    }

    .info-grid[b-u0nb4sf78a] {
        grid-template-columns: 1fr;
    }

    .org-stats-grid[b-u0nb4sf78a] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    .admin-container[b-u0nb4sf78a] {
        padding: 0;
    }

    .org-stats-grid[b-u0nb4sf78a] {
        grid-template-columns: 1fr 1fr;
    }

    .data-table th[b-u0nb4sf78a],
    .data-table td[b-u0nb4sf78a] {
        padding: var(--space-3);
    }
}

@media (max-width: 480px) {
    .page-header[b-u0nb4sf78a] {
        gap: var(--space-3);
    }

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

    .header-actions :global(.btn)[b-u0nb4sf78a] {
        flex: 1 1 auto;
        text-align: center;
    }
}
/* /Components/Pages/Admin/AdminOrganizations.razor.rz.scp.css */
/* ==========================================================================
   Admin Organizations - Professional SaaS Design
   ========================================================================== */

/* Admin Container */
.admin-container[b-ymhnuo0t70] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.admin-container.full-width[b-ymhnuo0t70] {
    max-width: 100%;
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.page-header[b-ymhnuo0t70] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-ymhnuo0t70] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

/* Header Action Buttons */
.header-actions :global(.btn)[b-ymhnuo0t70] {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    font-weight: 500;
}

.header-actions :global(.btn:hover)[b-ymhnuo0t70] {
    background-color: var(--bg-hover);
    border-color: var(--itamfy-primary);
    color: var(--itamfy-primary);
}

.header-actions :global(.btn-primary)[b-ymhnuo0t70] {
    background: var(--itamfy-primary);
    border: none;
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

.header-actions :global(.btn-primary:hover)[b-ymhnuo0t70] {
    background: var(--itamfy-primary-light);
    color: #ffffff;
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Admin Warning Banner
   ========================================================================== */

.admin-warning[b-ymhnuo0t70] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-left: 4px solid rgba(245, 158, 11, 0.8);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.admin-warning :global(.b-icon)[b-ymhnuo0t70] {
    color: rgba(245, 158, 11, 0.9);
    flex-shrink: 0;
}

:global(body[data-theme="dark"]) .admin-warning[b-ymhnuo0t70] {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.2);
    border-left-color: rgba(245, 158, 11, 0.6);
}

/* ==========================================================================
   Filter Card
   ========================================================================== */

.filter-card[b-ymhnuo0t70] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
}

.filter-row[b-ymhnuo0t70] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

.filter-item[b-ymhnuo0t70] {
    flex: 1;
    min-width: 150px;
}

.filter-search[b-ymhnuo0t70] {
    flex: 3;
}

/* ==========================================================================
   Data Table
   ========================================================================== */

.data-table[b-ymhnuo0t70] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.data-table th[b-ymhnuo0t70] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    padding: var(--space-4);
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.data-table td[b-ymhnuo0t70] {
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
}

.data-table tbody tr[b-ymhnuo0t70] {
    transition: background-color var(--transition-fast);
}

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

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

th.sortable[b-ymhnuo0t70] {
    cursor: pointer;
    user-select: none;
}

th.sortable:hover[b-ymhnuo0t70] {
    color: var(--itamfy-primary);
    background-color: var(--bg-hover);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination-controls[b-ymhnuo0t70] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.page-info[b-ymhnuo0t70] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.loading-container[b-ymhnuo0t70] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
}

.loading-spinner[b-ymhnuo0t70] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-color);
    border-top-color: var(--itamfy-primary);
    border-radius: 50%;
    animation: spin-b-ymhnuo0t70 1s linear infinite;
}

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

/* ==========================================================================
   Dark Mode
   ========================================================================== */

:global(body[data-theme="dark"]) .page-header[b-ymhnuo0t70] {
    border-bottom-color: var(--border-color);
}

:global(body[data-theme="dark"]) .data-table thead[b-ymhnuo0t70] {
    background-color: rgba(255, 255, 255, 0.02);
}

:global(body[data-theme="dark"]) .data-table tbody tr:hover[b-ymhnuo0t70] {
    background-color: var(--bg-hover);
}

:global(body[data-theme="dark"]) .pagination-controls[b-ymhnuo0t70] {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

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

@media (max-width: 768px) {
    .page-header[b-ymhnuo0t70] {
        flex-direction: column;
        gap: var(--space-4);
    }

    .header-actions[b-ymhnuo0t70] {
        width: 100%;
        justify-content: flex-start;
    }

    .filter-row[b-ymhnuo0t70] {
        flex-direction: column;
    }

    .pagination-controls[b-ymhnuo0t70] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .page-info[b-ymhnuo0t70] {
        text-align: center;
    }
}

@media (max-width: 576px) {
    .admin-container[b-ymhnuo0t70] {
        padding: 0;
    }

    .data-table th[b-ymhnuo0t70],
    .data-table td[b-ymhnuo0t70] {
        padding: var(--space-3);
    }
}

@media (max-width: 480px) {
    .page-header[b-ymhnuo0t70] {
        gap: var(--space-3);
    }

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

    .header-actions :global(.btn)[b-ymhnuo0t70] {
        flex: 1 1 auto;
        text-align: center;
    }

    .pagination-controls[b-ymhnuo0t70] {
        padding: var(--space-3);
    }
}

/* Keep the organization name column compact; truncate long names */
.data-table td:first-child[b-ymhnuo0t70] {
    max-width: 240px;
}

.data-table td:first-child strong[b-ymhnuo0t70] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
/* /Components/Pages/Admin/AdminPlans.razor.rz.scp.css */
/* ==========================================================================
   Admin Plans - matches the shared admin page layout
   ========================================================================== */

.admin-container[b-gidkk1ynr1] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.admin-container.full-width[b-gidkk1ynr1] {
    max-width: 100%;
}

/* Page Header */
.page-header[b-gidkk1ynr1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-gidkk1ynr1] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

.header-actions :global(.btn)[b-gidkk1ynr1] {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    font-weight: 500;
}

.header-actions :global(.btn:hover)[b-gidkk1ynr1] {
    background-color: var(--bg-hover);
    border-color: var(--itamfy-primary);
    color: var(--itamfy-primary);
}

.header-actions :global(.btn-primary)[b-gidkk1ynr1] {
    background: var(--itamfy-primary);
    border: none;
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

.header-actions :global(.btn-primary:hover)[b-gidkk1ynr1] {
    background: var(--itamfy-primary-light);
    color: #ffffff;
    box-shadow: var(--shadow-md);
}

/* Admin Warning Banner */
.admin-warning[b-gidkk1ynr1] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-left: 4px solid rgba(245, 158, 11, 0.8);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.admin-warning :global(.b-icon)[b-gidkk1ynr1] {
    color: rgba(245, 158, 11, 0.9);
    flex-shrink: 0;
}

:global(body[data-theme="dark"]) .admin-warning[b-gidkk1ynr1] {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.2);
    border-left-color: rgba(245, 158, 11, 0.6);
}

:global(body[data-theme="dark"]) .page-header[b-gidkk1ynr1] {
    border-bottom-color: var(--border-color);
}

/* Delete confirmation backdrop */
.modal-backdrop-custom[b-gidkk1ynr1] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    overflow-y: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-gidkk1ynr1] {
        flex-direction: column;
        gap: var(--space-4);
    }

    .header-actions[b-gidkk1ynr1] {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 576px) {
    .admin-container[b-gidkk1ynr1] {
        padding: 0;
    }
}

/* Match the dense admin table sizing and keep the plan name compact */
.table td[b-gidkk1ynr1],
.table th[b-gidkk1ynr1] {
    font-size: 0.9375rem;
    vertical-align: middle;
}

.table td:first-child[b-gidkk1ynr1] {
    min-width: 150px;
    max-width: 260px;
}

.plan-name[b-gidkk1ynr1] {
    display: inline-block;
    max-width: 100%;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
/* /Components/Pages/Admin/AdminSettings.razor.rz.scp.css */
/* ==========================================================================
   Admin Settings Page
   ========================================================================== */

.admin-container[b-iyguei7rip] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.admin-container.full-width[b-iyguei7rip] {
    max-width: 100%;
}

/* Page Header */
.page-header[b-iyguei7rip] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-iyguei7rip] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

/* Admin Warning Banner */
.admin-warning[b-iyguei7rip] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-left: 4px solid rgba(245, 158, 11, 0.8);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.admin-warning :global(.b-icon)[b-iyguei7rip] {
    color: rgba(245, 158, 11, 0.9);
    flex-shrink: 0;
}

/* Settings Card */
.settings-card[b-iyguei7rip] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.settings-card :global(.card-body)[b-iyguei7rip] {
    padding: var(--space-5);
}

/* Settings Header */
.settings-header[b-iyguei7rip] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.settings-header-icon[b-iyguei7rip] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
}

.settings-icon-danger[b-iyguei7rip] { background: rgba(239, 68, 68, 0.1); color: var(--itamfy-danger); }
.settings-icon-primary[b-iyguei7rip] { background: rgba(15, 136, 255, 0.1); color: var(--itamfy-primary); }
.settings-icon-info[b-iyguei7rip] { background: rgba(99, 102, 241, 0.1); color: var(--itamfy-info); }
.settings-icon-warning[b-iyguei7rip] { background: rgba(245, 158, 11, 0.1); color: var(--itamfy-warning); }
.settings-icon-success[b-iyguei7rip] { background: rgba(16, 185, 129, 0.1); color: var(--itamfy-success); }

.settings-header-action[b-iyguei7rip] {
    margin-left: auto;
}

.settings-description[b-iyguei7rip] {
    font-size: 0.875rem;
}

/* Settings Grid */
.settings-grid[b-iyguei7rip] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
}

.settings-grid :global(.field)[b-iyguei7rip] {
    margin-bottom: 0;
}

.settings-grid :global(.field-label)[b-iyguei7rip] {
    font-weight: 500;
    margin-bottom: var(--space-2);
}

.settings-grid :global(.field-help)[b-iyguei7rip] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* Loading State */
.loading-container[b-iyguei7rip] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
}

.loading-spinner[b-iyguei7rip] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-color);
    border-top-color: var(--itamfy-primary);
    border-radius: 50%;
    animation: spin-b-iyguei7rip 1s linear infinite;
}

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

/* Dark Mode */
:global(body[data-theme="dark"]) .admin-warning[b-iyguei7rip] {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.2);
    border-left-color: rgba(245, 158, 11, 0.6);
}

:global(body[data-theme="dark"]) .settings-card[b-iyguei7rip] {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-iyguei7rip] {
        flex-direction: column;
        gap: var(--space-4);
    }

    .header-actions[b-iyguei7rip] {
        width: 100%;
    }

    .settings-header[b-iyguei7rip] {
        flex-direction: column;
    }

    .settings-header-action[b-iyguei7rip] {
        margin-left: 0;
        width: 100%;
    }

    .settings-header-action :global(.btn)[b-iyguei7rip] {
        width: 100%;
    }

    .settings-grid[b-iyguei7rip] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Admin/AdminUserDetail.razor.rz.scp.css */
/* Admin User Detail */
.admin-container[b-s8kduhszsj] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.admin-container.full-width[b-s8kduhszsj] {
    max-width: 100%;
}

.page-header[b-s8kduhszsj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-s8kduhszsj] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

/* Admin Warning Banner */
.admin-warning[b-s8kduhszsj] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-left: 4px solid rgba(245, 158, 11, 0.8);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.admin-warning :global(.b-icon)[b-s8kduhszsj] {
    color: rgba(245, 158, 11, 0.9);
    flex-shrink: 0;
}

:global(body[data-theme="dark"]) .admin-warning[b-s8kduhszsj] {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.2);
    border-left-color: rgba(245, 158, 11, 0.6);
}

.back-link[b-s8kduhszsj] {
    padding: 0;
    font-size: 0.875rem;
}

/* Detail Grid */
.detail-grid[b-s8kduhszsj] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-6);
}

.detail-grid :deep(.card)[b-s8kduhszsj] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

/* Info Grid */
.info-grid[b-s8kduhszsj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.info-item[b-s8kduhszsj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.info-label[b-s8kduhszsj] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.info-value[b-s8kduhszsj] {
    color: var(--text-primary);
    font-size: 0.9375rem;
}

/* Role Checkboxes */
.role-checkboxes[b-s8kduhszsj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Table */
.data-table[b-s8kduhszsj] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-s8kduhszsj] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: var(--space-3);
    border-bottom: 2px solid var(--border-color);
}

.data-table td[b-s8kduhszsj] {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
}

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

/* Loading */
.loading-container[b-s8kduhszsj] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.loading-spinner[b-s8kduhszsj] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-color);
    border-top-color: var(--itamfy-primary);
    border-radius: 50%;
    animation: spin-b-s8kduhszsj 1s linear infinite;
}

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

/* Responsive */
@media (max-width: 992px) {
    .detail-grid[b-s8kduhszsj] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-header[b-s8kduhszsj] {
        flex-direction: column;
        gap: var(--space-4);
    }

    .info-grid[b-s8kduhszsj] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .admin-container[b-s8kduhszsj] {
        padding: 0;
    }
}
/* /Components/Pages/Admin/AdminUsers.razor.rz.scp.css */
/* ==========================================================================
   Admin Users - Professional SaaS Design
   ========================================================================== */

/* Admin Container */
.admin-container[b-u3vb92y4qt] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.admin-container.full-width[b-u3vb92y4qt] {
    max-width: 100%;
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.page-header[b-u3vb92y4qt] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-u3vb92y4qt] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

/* Header Action Buttons */
.header-actions :global(.btn)[b-u3vb92y4qt] {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    font-weight: 500;
}

.header-actions :global(.btn:hover)[b-u3vb92y4qt] {
    background-color: var(--bg-hover);
    border-color: var(--itamfy-primary);
    color: var(--itamfy-primary);
}

.header-actions :global(.btn-primary)[b-u3vb92y4qt] {
    background: var(--itamfy-primary);
    border: none;
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

.header-actions :global(.btn-primary:hover)[b-u3vb92y4qt] {
    background: var(--itamfy-primary-light);
    color: #ffffff;
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Admin Warning Banner
   ========================================================================== */

.admin-warning[b-u3vb92y4qt] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-left: 4px solid rgba(245, 158, 11, 0.8);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.admin-warning :global(.b-icon)[b-u3vb92y4qt] {
    color: rgba(245, 158, 11, 0.9);
    flex-shrink: 0;
}

:global(body[data-theme="dark"]) .admin-warning[b-u3vb92y4qt] {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.2);
    border-left-color: rgba(245, 158, 11, 0.6);
}

/* ==========================================================================
   Filter Card
   ========================================================================== */

.filter-card[b-u3vb92y4qt] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
}

.filter-row[b-u3vb92y4qt] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

.filter-item[b-u3vb92y4qt] {
    flex: 1;
    min-width: 150px;
}

.filter-search[b-u3vb92y4qt] {
    flex: 2;
}

/* ==========================================================================
   Data Table
   ========================================================================== */

.data-table[b-u3vb92y4qt] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.data-table th[b-u3vb92y4qt] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    padding: var(--space-4);
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.data-table td[b-u3vb92y4qt] {
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
}

.data-table tbody tr[b-u3vb92y4qt] {
    transition: background-color var(--transition-fast);
}

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

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

th.sortable[b-u3vb92y4qt] {
    cursor: pointer;
    user-select: none;
}

th.sortable:hover[b-u3vb92y4qt] {
    color: var(--itamfy-primary);
    background-color: var(--bg-hover);
}

/* ==========================================================================
   Action Buttons
   ========================================================================== */

.action-buttons[b-u3vb92y4qt] {
    display: flex;
    gap: var(--space-2);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination-controls[b-u3vb92y4qt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.page-info[b-u3vb92y4qt] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.loading-container[b-u3vb92y4qt] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
}

.loading-spinner[b-u3vb92y4qt] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-color);
    border-top-color: var(--itamfy-primary);
    border-radius: 50%;
    animation: spin-b-u3vb92y4qt 1s linear infinite;
}

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

/* ==========================================================================
   Dark Mode
   ========================================================================== */

:global(body[data-theme="dark"]) .page-header[b-u3vb92y4qt] {
    border-bottom-color: var(--border-color);
}

:global(body[data-theme="dark"]) .data-table thead[b-u3vb92y4qt] {
    background-color: rgba(255, 255, 255, 0.02);
}

:global(body[data-theme="dark"]) .data-table tbody tr:hover[b-u3vb92y4qt] {
    background-color: var(--bg-hover);
}

:global(body[data-theme="dark"]) .pagination-controls[b-u3vb92y4qt] {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

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

@media (max-width: 768px) {
    .page-header[b-u3vb92y4qt] {
        flex-direction: column;
        gap: var(--space-4);
    }

    .header-actions[b-u3vb92y4qt] {
        width: 100%;
        justify-content: flex-start;
    }

    .filter-row[b-u3vb92y4qt] {
        flex-direction: column;
    }

    .filter-item[b-u3vb92y4qt] {
        width: 100%;
    }

    .pagination-controls[b-u3vb92y4qt] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .page-info[b-u3vb92y4qt] {
        text-align: center;
    }
}

@media (max-width: 576px) {
    .admin-container[b-u3vb92y4qt] {
        padding: 0;
    }

    .data-table th[b-u3vb92y4qt],
    .data-table td[b-u3vb92y4qt] {
        padding: var(--space-3);
    }
}

@media (max-width: 480px) {
    .page-header[b-u3vb92y4qt] {
        gap: var(--space-3);
    }

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

    .header-actions :global(.btn)[b-u3vb92y4qt] {
        flex: 1 1 auto;
        text-align: center;
    }

    .pagination-controls[b-u3vb92y4qt] {
        padding: var(--space-3);
    }
}
/* /Components/Pages/Assets/AssetDetails.razor.rz.scp.css */
/* Container with full-width toggle */
.asset-details-container[b-99xty8jf3f] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.asset-details-container.full-width[b-99xty8jf3f] {
    max-width: 100%;
}

/* Page Header */
.page-header[b-99xty8jf3f] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

/* Field Labels */
[b-99xty8jf3f] .field-label {
    font-weight: 600;
    color: var(--bs-secondary, #6c757d);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Card Headers */
[b-99xty8jf3f] .card-title {
    font-weight: 600;
    margin-bottom: 0;
}

/* Dark Mode */
:global(body[data-theme="dark"]) .page-header[b-99xty8jf3f] {
    border-bottom-color: var(--border-color);
}

.header-actions[b-99xty8jf3f] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

/* Detail Grid - side-by-side cards */
.detail-grid[b-99xty8jf3f] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4, 1rem);
    align-items: stretch;
    margin-bottom: var(--space-4, 1rem);
}

.detail-grid[b-99xty8jf3f]  .card {
    height: 100%;
}

/* User assignment search */
.assignment-search[b-99xty8jf3f]  .input-group {
    display: flex;
    width: 100%;
}

.assignment-search[b-99xty8jf3f]  .form-control,
.assignment-search[b-99xty8jf3f]  .b-is-autocomplete .form-control {
    background-color: var(--bg-hover, #f1f3f5);
    border-color: var(--border-color);
}

.assignment-search[b-99xty8jf3f]  .input-group-text {
    background-color: var(--bg-hover, #f1f3f5);
    border-color: var(--border-color);
}

:global(body[data-theme="dark"]) .assignment-search[b-99xty8jf3f]  .form-control,
:global(body[data-theme="dark"]) .assignment-search[b-99xty8jf3f]  .b-is-autocomplete .form-control {
    background-color: rgba(255, 255, 255, 0.05);
}

:global(body[data-theme="dark"]) .assignment-search[b-99xty8jf3f]  .input-group-text {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Stacked field for detail cards in grid layout */
.detail-field[b-99xty8jf3f] {
    margin-bottom: 1rem;
}

.detail-field:last-child[b-99xty8jf3f] {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-99xty8jf3f] {
        flex-direction: column;
        gap: 1rem;
    }

    .detail-grid[b-99xty8jf3f] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .page-header[b-99xty8jf3f] {
        gap: var(--space-3);
    }

    .header-actions[b-99xty8jf3f] {
        width: 100%;
        justify-content: flex-start;
    }

    .header-actions :global(.btn)[b-99xty8jf3f] {
        flex: 1 1 auto;
        text-align: center;
    }
}
/* /Components/Pages/Assets/AssetLabel.razor.rz.scp.css */
/* Label Page Container */
.label-page[b-jn4ayv94gx] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.label-page.full-width[b-jn4ayv94gx] {
    max-width: 100%;
}

/* Page Header */
.page-header[b-jn4ayv94gx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-jn4ayv94gx] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: nowrap;
}


:global(body[data-theme="dark"]) .page-header[b-jn4ayv94gx] {
    border-bottom-color: var(--border-color);
}

/* Print Controls */
.print-controls[b-jn4ayv94gx] {
    margin-bottom: 2rem;
}

/* Label Container */
.label-container[b-jn4ayv94gx] {
    display: flex;
    justify-content: center;
    padding: 3rem;
    background-color: #f8f9fa;
    border-radius: 8px;
}

:global(body[data-theme="dark"]) .label-container[b-jn4ayv94gx] {
    background-color: #2d3238;
}

/* Asset Label Base */
.asset-label[b-jn4ayv94gx] {
    background: white;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 12px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Label Sizes */
.asset-label.small[b-jn4ayv94gx] {
    width: 288px; /* 2 inches scaled up for preview */
    min-height: 144px;
    font-size: 10px;
}

.asset-label.small .label-header[b-jn4ayv94gx] {
    padding-bottom: 4px;
    margin-bottom: 6px;
}

.asset-label.small .brand[b-jn4ayv94gx] {
    font-size: 10px;
}

.asset-label.small .org-name[b-jn4ayv94gx] {
    font-size: 7px;
}

.asset-label.small .qr-code[b-jn4ayv94gx] {
    width: 50px;
    height: 50px;
}

.asset-label.small .scan-text[b-jn4ayv94gx] {
    font-size: 6px;
}

.asset-label.small .asset-name[b-jn4ayv94gx] {
    font-size: 10px;
    margin-bottom: 4px;
}

.asset-label.small .info-row[b-jn4ayv94gx] {
    font-size: 7px;
    margin-bottom: 2px;
}

.asset-label.small .label-footer[b-jn4ayv94gx] {
    padding-top: 4px;
    margin-top: 6px;
}

.asset-label.small .asset-id[b-jn4ayv94gx] {
    font-size: 6px;
}

.asset-label.medium[b-jn4ayv94gx] {
    width: 400px; /* 3 inches scaled up for preview */
    min-height: 260px;
    font-size: 13px;
}

.asset-label.medium .qr-code[b-jn4ayv94gx] {
    width: 110px;
    height: 110px;
}

.asset-label.medium .asset-name[b-jn4ayv94gx] {
    font-size: 17px;
}

.asset-label.large[b-jn4ayv94gx] {
    width: 520px; /* 4 inches scaled up for preview */
    min-height: 360px;
    font-size: 15px;
    padding: 20px;
}

.asset-label.large .qr-code[b-jn4ayv94gx] {
    width: 150px;
    height: 150px;
}

.asset-label.large .asset-name[b-jn4ayv94gx] {
    font-size: 22px;
}

.asset-label.large .brand[b-jn4ayv94gx] {
    font-size: 18px;
}

/* Label Header */
.label-header[b-jn4ayv94gx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #000;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.brand[b-jn4ayv94gx] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 14px;
}

.brand-logo[b-jn4ayv94gx] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 2px;
}

.asset-label.small .brand-logo[b-jn4ayv94gx] {
    width: 12px;
    height: 12px;
}

.asset-label.large .brand-logo[b-jn4ayv94gx] {
    width: 20px;
    height: 20px;
    border-radius: 3px;
}

.org-name[b-jn4ayv94gx] {
    font-size: 9px;
    color: #555;
    text-align: right;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Label Body */
.label-body[b-jn4ayv94gx] {
    display: flex;
    gap: 12px;
}

/* QR Section */
.qr-section[b-jn4ayv94gx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.qr-code[b-jn4ayv94gx] {
    width: 80px;
    height: 80px;
    image-rendering: pixelated;
}

.scan-text[b-jn4ayv94gx] {
    font-size: 7px;
    color: #666;
    margin-top: 4px;
    text-align: center;
}

/* Info Section */
.info-section[b-jn4ayv94gx] {
    flex: 1;
    min-width: 0;
}

.asset-name[b-jn4ayv94gx] {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
    word-break: break-word;
    line-height: 1.2;
}

.info-row[b-jn4ayv94gx] {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
    font-size: 9px;
    line-height: 1.3;
}

.info-label[b-jn4ayv94gx] {
    font-weight: 600;
    color: #555;
    flex-shrink: 0;
}

.info-value[b-jn4ayv94gx] {
    word-break: break-word;
}

.info-value.serial[b-jn4ayv94gx] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 8px;
}

.info-value.status[b-jn4ayv94gx] {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 2px;
}

.info-value.status.active[b-jn4ayv94gx] {
    background-color: #d4edda;
    color: #155724;
}

.info-value.status.instorage[b-jn4ayv94gx] {
    background-color: #cce5ff;
    color: #004085;
}

.info-value.status.maintenance[b-jn4ayv94gx] {
    background-color: #fff3cd;
    color: #856404;
}

.info-value.status.retired[b-jn4ayv94gx] {
    background-color: #e2e3e5;
    color: #383d41;
}

.info-value.status.disposed[b-jn4ayv94gx] {
    background-color: #f8d7da;
    color: #721c24;
}

/* Label Footer */
.label-footer[b-jn4ayv94gx] {
    border-top: 1px solid #ccc;
    padding-top: 6px;
    margin-top: 8px;
    text-align: right;
}

.asset-id[b-jn4ayv94gx] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 7px;
    color: #888;
}

/* Print Instructions */
.print-instructions[b-jn4ayv94gx] {
    margin-top: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-jn4ayv94gx] {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .header-actions[b-jn4ayv94gx] {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .header-actions :global(.btn)[b-jn4ayv94gx] {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* Print Styles */
@media print {
    /* Hide non-printable elements */
    .no-print[b-jn4ayv94gx] {
        display: none !important;
    }

    /* Reset page */
    .label-page[b-jn4ayv94gx] {
        max-width: none;
        padding: 0;
        margin: 0;
    }

    /* Label container for print */
    .label-container[b-jn4ayv94gx] {
        padding: 0;
        background: none;
        border-radius: 0;
        display: block;
    }

    /* Print the label at actual size */
    .asset-label[b-jn4ayv94gx] {
        box-shadow: none;
        page-break-inside: avoid;
        margin: 0 auto;
    }

    /* Ensure black text/borders print well */
    .asset-label[b-jn4ayv94gx],
    .asset-label *[b-jn4ayv94gx] {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* Page setup */
    @page {
        margin: 0.5in;
        size: auto;
    }
}

/* Dark mode adjustments for label preview */
:global(body[data-theme="dark"]) .asset-label[b-jn4ayv94gx] {
    /* Keep label white even in dark mode for accurate print preview */
    background: white;
    color: #000;
}
/* /Components/Pages/Assets/Assets.razor.rz.scp.css */
/* ==========================================================================
   Assets Page - Professional SaaS Design
   ========================================================================== */

/* Assets Container */
.assets-container[b-u9j83ymh6l] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.assets-container.full-width[b-u9j83ymh6l] {
    max-width: 100%;
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.page-header[b-u9j83ymh6l] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.page-header-content h1[b-u9j83ymh6l] {
    font-family: 'Poppins', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    letter-spacing: -0.02em;
}

.page-header-content p[b-u9j83ymh6l] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin: 0;
}

.header-actions[b-u9j83ymh6l] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

/* Header Action Buttons */
.header-actions :global(.btn)[b-u9j83ymh6l] {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    font-weight: 500;
}

.header-actions :global(.btn:hover)[b-u9j83ymh6l] {
    background-color: var(--bg-hover);
    border-color: var(--itamfy-primary);
    color: var(--itamfy-primary);
}

.header-actions :global(.btn-primary)[b-u9j83ymh6l] {
    background: var(--itamfy-primary);
    border: none;
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

.header-actions :global(.btn-primary:hover)[b-u9j83ymh6l] {
    background: var(--itamfy-primary-light);
    color: #ffffff;
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Quick Stats Grid
   ========================================================================== */

.stats-grid[b-u9j83ymh6l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.stat-card-mini[b-u9j83ymh6l] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    box-shadow: var(--shadow-card);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}


.stat-card-mini .stat-icon[b-u9j83ymh6l] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.stat-card-mini .stat-content h4[b-u9j83ymh6l] {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.stat-card-mini .stat-content p[b-u9j83ymh6l] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* ==========================================================================
   Filter Toolbar
   ========================================================================== */

.filter-toolbar[b-u9j83ymh6l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
}

.filter-buttons[b-u9j83ymh6l] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}


/* ==========================================================================
   Assets Table
   ========================================================================== */

.table-container[b-u9j83ymh6l] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-card);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.assets-table[b-u9j83ymh6l] {
    margin-bottom: 0;
    font-size: 0.9375rem;
}

.assets-table thead[b-u9j83ymh6l] {
    background: var(--gradient-card);
}

.assets-table thead th[b-u9j83ymh6l] {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
    padding: var(--space-4);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.assets-table thead th:hover[b-u9j83ymh6l] {
    color: var(--itamfy-primary);
    background-color: var(--bg-hover);
}

.assets-table thead th.sorted[b-u9j83ymh6l] {
    color: var(--itamfy-primary);
}

.assets-table tbody tr[b-u9j83ymh6l] {
    transition: all var(--transition-fast);
}

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

.assets-table tbody td[b-u9j83ymh6l] {
    vertical-align: middle;
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

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

/* Sort Icon */
.sort-icon[b-u9j83ymh6l] {
    margin-left: var(--space-1);
    font-size: 0.75rem;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.assets-table thead th:hover .sort-icon[b-u9j83ymh6l],
.assets-table thead th.sorted .sort-icon[b-u9j83ymh6l] {
    opacity: 1;
}

/* Actions Column */
.assets-table .actions-column[b-u9j83ymh6l] {
    text-align: right;
    white-space: nowrap;
}

.action-buttons[b-u9j83ymh6l] {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}

.action-buttons :global(.btn)[b-u9j83ymh6l] {
    padding: var(--space-1) var(--space-2);
    font-size: 0.8125rem;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination-controls[b-u9j83ymh6l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.pagination-info[b-u9j83ymh6l] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.pagination-buttons[b-u9j83ymh6l] {
    display: flex;
    gap: var(--space-1);
}

.pagination-buttons :global(.btn)[b-u9j83ymh6l] {
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.875rem;
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.empty-state[b-u9j83ymh6l] {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-card);
}

.empty-state-icon[b-u9j83ymh6l] {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-5);
    background: var(--gradient-card);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--text-muted);
}

.empty-state h3[b-u9j83ymh6l] {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.empty-state p[b-u9j83ymh6l] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin-bottom: var(--space-5);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.loading-container[b-u9j83ymh6l] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
}

.loading-spinner[b-u9j83ymh6l] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-color);
    border-top-color: var(--itamfy-primary);
    border-radius: 50%;
    animation: spin-b-u9j83ymh6l 1s linear infinite;
}

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

/* ==========================================================================
   Status Badges
   ========================================================================== */

.status-badge[b-u9j83ymh6l] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
}

.status-active[b-u9j83ymh6l] {
    background: rgba(16, 185, 129, 0.12);
    color: var(--itamfy-success);
}

.status-inactive[b-u9j83ymh6l] {
    background: rgba(107, 114, 128, 0.12);
    color: var(--text-muted);
}

.status-maintenance[b-u9j83ymh6l] {
    background: rgba(245, 158, 11, 0.12);
    color: var(--itamfy-warning);
}

.status-retired[b-u9j83ymh6l] {
    background: rgba(239, 68, 68, 0.12);
    color: var(--itamfy-danger);
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

:global(body[data-theme="dark"]) .page-header[b-u9j83ymh6l] {
    border-bottom-color: var(--border-color);
}

:global(body[data-theme="dark"]) .assets-table thead[b-u9j83ymh6l] {
    background-color: rgba(255, 255, 255, 0.02);
}

:global(body[data-theme="dark"]) .assets-table tbody tr:hover[b-u9j83ymh6l] {
    background-color: var(--bg-hover);
}

:global(body[data-theme="dark"]) .pagination-controls[b-u9j83ymh6l] {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

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

@media (max-width: 768px) {
    .page-header[b-u9j83ymh6l] {
        flex-direction: column;
        gap: var(--space-4);
    }

    .header-actions[b-u9j83ymh6l] {
        width: 100%;
        justify-content: flex-start;
    }

    .pagination-controls[b-u9j83ymh6l] {
        flex-direction: column;
        gap: var(--space-4);
        align-items: stretch;
    }

    .pagination-info[b-u9j83ymh6l] {
        text-align: center;
    }

    .pagination-buttons[b-u9j83ymh6l] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .stats-grid[b-u9j83ymh6l] {
        grid-template-columns: repeat(2, 1fr);
    }

    .table-responsive[b-u9j83ymh6l] {
        font-size: 0.875rem;
    }

    .assets-table .actions-column[b-u9j83ymh6l] {
        width: auto;
    }
}

@media (max-width: 576px) {
    .assets-container[b-u9j83ymh6l] {
        padding: 0;
    }

    .stats-grid[b-u9j83ymh6l] {
        grid-template-columns: 1fr;
    }

    .assets-table thead th[b-u9j83ymh6l],
    .assets-table tbody td[b-u9j83ymh6l] {
        padding: var(--space-3);
    }

    .action-buttons[b-u9j83ymh6l] {
        flex-direction: column;
        gap: var(--space-1);
    }
}

@media (max-width: 480px) {
    .page-header[b-u9j83ymh6l] {
        gap: var(--space-3);
    }

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

    .header-actions :global(.btn)[b-u9j83ymh6l] {
        flex: 1 1 auto;
        text-align: center;
    }

    .pagination-controls[b-u9j83ymh6l] {
        padding: var(--space-3);
    }

    .pagination-buttons :global(.btn)[b-u9j83ymh6l] {
        min-width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
}
/* /Components/Pages/Audit/AuditLog.razor.rz.scp.css */
/* Audit Container */
.audit-container[b-mq8z41chzl] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.audit-container.full-width[b-mq8z41chzl] {
    max-width: 100%;
}

/* Page Header */
.page-header[b-mq8z41chzl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-mq8z41chzl] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.header-actions :global(.btn)[b-mq8z41chzl] {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    font-weight: 500;
}

.header-actions :global(.btn:hover)[b-mq8z41chzl] {
    background-color: var(--bg-hover);
    border-color: var(--itamfy-primary);
    color: var(--itamfy-primary);
}

/* Filter Toolbar */
.filter-toolbar[b-mq8z41chzl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    margin-bottom: var(--space-3);
}

.filter-buttons[b-mq8z41chzl] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Table Container */
.table-container[b-mq8z41chzl] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* Audit Table */
.audit-table[b-mq8z41chzl] {
    margin-bottom: 0;
    font-size: 0.9375rem;
}

.audit-table thead[b-mq8z41chzl] {
    background: var(--gradient-card);
}

.audit-table thead th[b-mq8z41chzl] {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
    padding: var(--space-4);
    white-space: nowrap;
}

.audit-table tbody tr[b-mq8z41chzl] {
    transition: background-color var(--transition-fast);
}

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

.audit-table tbody td[b-mq8z41chzl] {
    vertical-align: middle;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

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

.timestamp-cell[b-mq8z41chzl] {
    font-family: monospace;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Action Badges */
.action-badge[b-mq8z41chzl] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.badge-created[b-mq8z41chzl] {
    background-color: rgba(40, 167, 69, 0.12);
    color: #28a745;
}

.badge-updated[b-mq8z41chzl] {
    background-color: rgba(0, 123, 255, 0.12);
    color: #007bff;
}

.badge-deleted[b-mq8z41chzl] {
    background-color: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}

.badge-login[b-mq8z41chzl] {
    background-color: rgba(23, 162, 184, 0.12);
    color: #17a2b8;
}

.badge-logout[b-mq8z41chzl] {
    background-color: rgba(108, 117, 125, 0.12);
    color: #6c757d;
}

.badge-invited[b-mq8z41chzl] {
    background-color: rgba(255, 193, 7, 0.12);
    color: #d39e00;
}

.badge-default[b-mq8z41chzl] {
    background-color: rgba(108, 117, 125, 0.12);
    color: #6c757d;
}

/* Details Row */
.details-row[b-mq8z41chzl] {
    background-color: var(--bg-hover) !important;
}

.details-row:hover[b-mq8z41chzl] {
    background-color: var(--bg-hover) !important;
}

.changes-detail[b-mq8z41chzl] {
    padding: var(--space-3);
}

.change-section[b-mq8z41chzl] {
    margin-bottom: var(--space-3);
}

.change-section:last-child[b-mq8z41chzl] {
    margin-bottom: 0;
}

.change-json[b-mq8z41chzl] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    font-size: 0.8rem;
    margin-top: var(--space-1);
    overflow-x: auto;
    max-height: 200px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Empty State */
.empty-state[b-mq8z41chzl] {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--text-secondary);
}

.empty-state :global(.empty-icon)[b-mq8z41chzl] {
    font-size: 3rem;
    margin-bottom: var(--space-4);
    opacity: 0.4;
}

/* Pagination */
.pagination-controls[b-mq8z41chzl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.pagination-info[b-mq8z41chzl] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.pagination-buttons[b-mq8z41chzl] {
    display: flex;
    gap: var(--space-1);
    align-items: center;
}

.page-indicator[b-mq8z41chzl] {
    padding: 0 var(--space-3);
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Dark Mode */
:global(body[data-theme="dark"]) .page-header[b-mq8z41chzl] {
    border-bottom-color: var(--border-color);
}

:global(body[data-theme="dark"]) .audit-table thead[b-mq8z41chzl] {
    background-color: rgba(255, 255, 255, 0.02);
}

:global(body[data-theme="dark"]) .audit-table thead th[b-mq8z41chzl] {
    color: var(--text-secondary);
}

:global(body[data-theme="dark"]) .audit-table tbody tr:hover[b-mq8z41chzl] {
    background-color: var(--bg-hover);
}

:global(body[data-theme="dark"]) .change-json[b-mq8z41chzl] {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-mq8z41chzl] {
        flex-direction: column;
        gap: 1rem;
    }

    .pagination-controls[b-mq8z41chzl] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .pagination-info[b-mq8z41chzl] {
        text-align: center;
    }

    .pagination-buttons[b-mq8z41chzl] {
        justify-content: center;
        flex-wrap: wrap;
    }
}
/* /Components/Pages/Auth/Login.razor.rz.scp.css */
/* ==========================================================================
   Login Page - Professional SaaS Design
   ========================================================================== */

/* Login Card */
.login-card[b-dyp8as5vyi] {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.login-card .card-body[b-dyp8as5vyi] {
    padding: var(--space-8);
    background: var(--bg-card);
}

.login-card .card-title[b-dyp8as5vyi] {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: var(--space-2);
}

.login-subtitle[b-dyp8as5vyi] {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin-bottom: var(--space-6);
}

/* Form Fields */
.login-card .form-group[b-dyp8as5vyi] {
    margin-bottom: var(--space-5);
}

.login-card .form-label[b-dyp8as5vyi] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.login-card .form-control[b-dyp8as5vyi] {
    padding: var(--space-3) var(--space-4);
    font-size: 0.9375rem;
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--border-color);
    transition: all var(--transition-fast);
}

.login-card .form-control:focus[b-dyp8as5vyi] {
    border-color: var(--itamfy-primary);
    box-shadow: 0 0 0 3px rgba(15, 136, 255, 0.1);
}

/* Login Button */
.login-btn[b-dyp8as5vyi] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
    background: var(--itamfy-primary);
    border: none;
    color: #ffffff;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.login-btn:hover[b-dyp8as5vyi] {
    background: var(--itamfy-primary-light);
    box-shadow: var(--shadow-md);
}

.login-btn:active[b-dyp8as5vyi] {
    background: var(--itamfy-primary-dark);
}

/* Divider */
.login-divider[b-dyp8as5vyi] {
    display: flex;
    align-items: center;
    margin: var(--space-6) 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

.login-divider[b-dyp8as5vyi]::before,
.login-divider[b-dyp8as5vyi]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}

.login-divider span[b-dyp8as5vyi] {
    padding: 0 var(--space-4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Social Login Buttons */
.social-login-btn[b-dyp8as5vyi] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    transition: all var(--transition-fast);
    margin-bottom: var(--space-3);
}

.social-login-btn:hover[b-dyp8as5vyi] {
    border-color: var(--itamfy-primary);
    background: var(--bg-hover);
    color: var(--itamfy-primary);
}

.social-login-btn:last-child[b-dyp8as5vyi] {
    margin-bottom: 0;
}

.social-login-btn img[b-dyp8as5vyi],
.social-login-btn svg[b-dyp8as5vyi] {
    width: 20px;
    height: 20px;
}

/* Microsoft Button specific */
.microsoft-btn[b-dyp8as5vyi] {
    background: #ffffff;
    border-color: #e5e7eb;
    color: #374151;
}

.microsoft-btn:hover[b-dyp8as5vyi] {
    background: #f3f4f6;
    border-color: #0078d4;
    color: #0078d4;
}

/* Google Button specific */
.google-btn[b-dyp8as5vyi] {
    background: #ffffff;
    border-color: #e5e7eb;
    color: #374151;
}

.google-btn:hover[b-dyp8as5vyi] {
    background: #f3f4f6;
    border-color: #4285f4;
    color: #4285f4;
}

/* Links */
.login-links[b-dyp8as5vyi] {
    text-align: center;
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-color);
}

.login-links a[b-dyp8as5vyi] {
    color: var(--itamfy-primary);
    font-weight: 500;
    font-size: 0.9375rem;
    transition: color var(--transition-fast);
}

.login-links a:hover[b-dyp8as5vyi] {
    color: var(--itamfy-primary-light);
}

.login-links p[b-dyp8as5vyi] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

/* Remember Me Checkbox */
.remember-me[b-dyp8as5vyi] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.remember-me label[b-dyp8as5vyi] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
    cursor: pointer;
}

/* Forgot Password Link */
.forgot-password[b-dyp8as5vyi] {
    text-align: right;
    margin-bottom: var(--space-5);
}

.forgot-password a[b-dyp8as5vyi] {
    color: var(--itamfy-primary);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Alert Messages */
.login-card .alert[b-dyp8as5vyi] {
    margin-bottom: var(--space-5);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
}

/* Dark Mode */
:global(body[data-theme="dark"]) .login-card[b-dyp8as5vyi] {
    background: var(--bg-card);
    border-color: var(--border-color);
}

:global(body[data-theme="dark"]) .social-login-btn[b-dyp8as5vyi],
:global(body[data-theme="dark"]) .microsoft-btn[b-dyp8as5vyi],
:global(body[data-theme="dark"]) .google-btn[b-dyp8as5vyi] {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

:global(body[data-theme="dark"]) .social-login-btn:hover[b-dyp8as5vyi],
:global(body[data-theme="dark"]) .microsoft-btn:hover[b-dyp8as5vyi],
:global(body[data-theme="dark"]) .google-btn:hover[b-dyp8as5vyi] {
    background: var(--bg-hover);
}

/* Password Input Group */
[b-dyp8as5vyi] .password-group > .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.password-toggle-btn[b-dyp8as5vyi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    padding: 0;
    border: 1.5px solid var(--border-color);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    color: var(--text-muted);
    background: var(--bg-input);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.password-toggle-btn:hover[b-dyp8as5vyi] {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.password-toggle-btn:focus[b-dyp8as5vyi] {
    outline: none;
    border-color: var(--itamfy-primary);
    color: var(--text-primary);
}

:global(body[data-theme="dark"]) .password-toggle-btn[b-dyp8as5vyi] {
    background: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-muted);
}

:global(body[data-theme="dark"]) .password-toggle-btn:hover[b-dyp8as5vyi] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

:global(body[data-theme="dark"]) .password-toggle-btn:focus[b-dyp8as5vyi] {
    border-color: var(--itamfy-primary-light);
    color: var(--text-primary);
}

/* Responsive */
@media (max-width: 576px) {
    .login-card[b-dyp8as5vyi] {
        max-width: 100%;
        border-radius: var(--radius-xl);
    }

    .login-card .card-body[b-dyp8as5vyi] {
        padding: var(--space-6);
    }

    .login-card .card-title[b-dyp8as5vyi] {
        font-size: 1.25rem;
    }
}
/* /Components/Pages/Auth/Register.razor.rz.scp.css */
/* Register page specific styles */
/* The auth-layout in MainLayout handles centering */

/* Password Input Group */
[b-voy83ltcx4] .password-group > .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.password-toggle-btn[b-voy83ltcx4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    padding: 0;
    border: 1.5px solid var(--border-color);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    color: var(--text-muted);
    background: var(--bg-input);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.password-toggle-btn:hover[b-voy83ltcx4] {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.password-toggle-btn:focus[b-voy83ltcx4] {
    outline: none;
    border-color: var(--itamfy-primary);
    color: var(--text-primary);
}

:global(body[data-theme="dark"]) .password-toggle-btn[b-voy83ltcx4] {
    background: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-muted);
}

:global(body[data-theme="dark"]) .password-toggle-btn:hover[b-voy83ltcx4] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

:global(body[data-theme="dark"]) .password-toggle-btn:focus[b-voy83ltcx4] {
    border-color: var(--itamfy-primary-light);
    color: var(--text-primary);
}
/* /Components/Pages/Certificates/CertificateDetails.razor.rz.scp.css */
/* Container with full-width toggle */
.certificate-details-container[b-dp749zopch] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.certificate-details-container.full-width[b-dp749zopch] {
    max-width: 100%;
}

/* Page Header */
.page-header[b-dp749zopch] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-dp749zopch] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

/* Field Labels */
[b-dp749zopch] .field-label {
    font-weight: 600;
    color: var(--bs-secondary, #6c757d);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Card Headers */
[b-dp749zopch] .card-title {
    font-weight: 600;
    margin-bottom: 0;
}

/* Detail Grid - side-by-side cards */
.detail-grid[b-dp749zopch] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4, 1rem);
    align-items: stretch;
    margin-bottom: var(--space-4, 1rem);
}

.detail-grid[b-dp749zopch]  .card {
    height: 100%;
}

/* Right column: two cards stacked vertically */
.right-stack[b-dp749zopch] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.right-stack[b-dp749zopch]  .card {
    height: auto;
}

.right-stack[b-dp749zopch]  .card:last-child {
    flex: 1;
}

/* Stacked field for detail cards */
.detail-field[b-dp749zopch] {
    margin-bottom: 1rem;
}

.detail-field:last-child[b-dp749zopch] {
    margin-bottom: 0;
}

/* Decrypt Section */
.decrypt-section[b-dp749zopch] {
    margin-top: 1rem;
}

.decrypt-form[b-dp749zopch] {
    max-width: 600px;
}

/* Decrypted Content */
.decrypted-section[b-dp749zopch]  textarea {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    background-color: var(--bg-hover, #f8f9fa);
    border-color: var(--border-color);
}

:global(body[data-theme="dark"]) .decrypted-section[b-dp749zopch]  textarea {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Empty State */
.empty-state[b-dp749zopch] {
    text-align: center;
    padding: var(--space-5) var(--space-4);
}

/* Dark Mode */
:global(body[data-theme="dark"]) .page-header[b-dp749zopch] {
    border-bottom-color: var(--border-color);
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-dp749zopch] {
        flex-direction: column;
        gap: 1rem;
    }

    .detail-grid[b-dp749zopch] {
        grid-template-columns: 1fr;
    }

    .decrypted-section .d-flex.justify-content-between[b-dp749zopch] {
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .page-header[b-dp749zopch] {
        gap: var(--space-3);
    }

    .header-actions[b-dp749zopch] {
        width: 100%;
    }

    .header-actions :global(.btn)[b-dp749zopch] {
        flex: 1 1 auto;
        text-align: center;
    }
}
/* /Components/Pages/Certificates/Certificates.razor.rz.scp.css */
/* Certificates Container */
.certificates-container[b-a3z0061euv] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.certificates-container.full-width[b-a3z0061euv] {
    max-width: 100%;
}

/* Page Header */
.page-header[b-a3z0061euv] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-a3z0061euv] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

/* Header Action Buttons */
.header-actions :global(.btn)[b-a3z0061euv] {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    font-weight: 500;
}

.header-actions :global(.btn:hover)[b-a3z0061euv] {
    background-color: var(--bg-hover);
    border-color: var(--itamfy-primary);
    color: var(--itamfy-primary);
}

.header-actions :global(.btn-primary)[b-a3z0061euv] {
    background: var(--itamfy-primary);
    border: none;
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

.header-actions :global(.btn-primary:hover)[b-a3z0061euv] {
    background: var(--itamfy-primary-light);
    color: #ffffff;
    box-shadow: var(--shadow-md);
}

/* Filter Toolbar */
.filter-toolbar[b-a3z0061euv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
}

.filter-buttons[b-a3z0061euv] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Quick Stats Grid */
.stats-grid[b-a3z0061euv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

/* Table Container */
.table-container[b-a3z0061euv] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-card);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Certificates Table */
.certificates-table[b-a3z0061euv] {
    margin-bottom: 0;
    font-size: 0.9375rem;
}

.certificates-table thead[b-a3z0061euv] {
    background: var(--gradient-card);
}

.certificates-table thead th[b-a3z0061euv] {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
    padding: var(--space-4);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.certificates-table thead th:hover[b-a3z0061euv] {
    color: var(--itamfy-primary);
    background-color: var(--bg-hover);
}

.certificates-table tbody tr[b-a3z0061euv] {
    transition: background-color var(--transition-fast);
}

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

.certificates-table tbody td[b-a3z0061euv] {
    vertical-align: middle;
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

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

.certificates-table .actions-column[b-a3z0061euv] {
    text-align: right;
    white-space: nowrap;
}

/* Pagination */
.pagination-controls[b-a3z0061euv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.pagination-info[b-a3z0061euv] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.pagination-buttons[b-a3z0061euv] {
    display: flex;
    gap: var(--space-1);
}

/* Dark Mode */
:global(body[data-theme="dark"]) .page-header[b-a3z0061euv] {
    border-bottom-color: var(--border-color);
}

:global(body[data-theme="dark"]) .certificates-table thead[b-a3z0061euv] {
    background-color: rgba(255, 255, 255, 0.02);
}

:global(body[data-theme="dark"]) .certificates-table thead th[b-a3z0061euv] {
    color: var(--text-secondary);
}

:global(body[data-theme="dark"]) .certificates-table thead th:hover[b-a3z0061euv] {
    color: var(--itamfy-primary-light);
    background-color: var(--bg-hover);
}

:global(body[data-theme="dark"]) .certificates-table tbody tr:hover[b-a3z0061euv] {
    background-color: var(--bg-hover);
}

:global(body[data-theme="dark"]) .pagination-controls[b-a3z0061euv] {
    border-top-color: var(--border-color);
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-a3z0061euv] {
        flex-direction: column;
        gap: 1rem;
    }

    .header-actions[b-a3z0061euv] {
        justify-content: flex-end;
    }

    .pagination-controls[b-a3z0061euv] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .pagination-info[b-a3z0061euv] {
        text-align: center;
    }

    .pagination-buttons[b-a3z0061euv] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .stats-grid[b-a3z0061euv] {
        grid-template-columns: repeat(2, 1fr);
    }

    .table-responsive[b-a3z0061euv] {
        font-size: 0.85rem;
    }

    .certificates-table .actions-column[b-a3z0061euv] {
        width: auto;
    }
}

@media (max-width: 480px) {
    .page-header[b-a3z0061euv] {
        gap: var(--space-3);
    }

    .header-actions[b-a3z0061euv] {
        width: 100%;
    }

    .header-actions :global(.btn)[b-a3z0061euv] {
        flex: 1 1 auto;
        text-align: center;
    }

    .stats-grid[b-a3z0061euv] {
        grid-template-columns: 1fr;
    }

    .pagination-controls[b-a3z0061euv] {
        padding: var(--space-3);
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ==========================================================================
   Dashboard - Professional SaaS Design
   ========================================================================== */

/* Dashboard Container */
.dashboard-container[b-gpga9i0npc] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.dashboard-container.full-width[b-gpga9i0npc] {
    max-width: 100%;
}

/* ==========================================================================
   Dashboard Header
   ========================================================================== */

.dashboard-header[b-gpga9i0npc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-content h1[b-gpga9i0npc] {
    font-family: 'Poppins', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    letter-spacing: -0.02em;
}

.header-content p[b-gpga9i0npc] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin: 0;
}

.header-actions[b-gpga9i0npc] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

/* Header Action Buttons */
.header-actions :global(.btn)[b-gpga9i0npc] {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.header-actions :global(.btn:hover)[b-gpga9i0npc] {
    background-color: var(--bg-hover);
    border-color: var(--itamfy-primary);
    color: var(--itamfy-primary);
}

/* ==========================================================================
   Stats Grid
   ========================================================================== */

.stats-grid[b-gpga9i0npc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

/* Stat Card */
.stat-card[b-gpga9i0npc] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: var(--shadow-card);
}

.stat-card-clickable[b-gpga9i0npc] {
    cursor: pointer;
}

.stat-card .card-body[b-gpga9i0npc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 0;
    background: transparent;
}

/* Stat Top Section */
.stat-top[b-gpga9i0npc] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

/* Stat Icon */
.stat-icon[b-gpga9i0npc] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.5rem;
}

.stat-icon-primary[b-gpga9i0npc] {
    background: rgba(15, 136, 255, 0.1);
    color: var(--itamfy-primary);
}

.stat-icon-success[b-gpga9i0npc] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--itamfy-success);
}

.stat-icon-warning[b-gpga9i0npc] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--itamfy-warning);
}

.stat-icon-info[b-gpga9i0npc] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--itamfy-info);
}

.stat-icon-danger[b-gpga9i0npc] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--itamfy-danger);
}

/* Stat Content */
.stat-content[b-gpga9i0npc] {
    flex: 1;
}

.stat-card h2[b-gpga9i0npc] {
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.stat-card p[b-gpga9i0npc] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    margin: var(--space-1) 0 0 0;
}

/* Dark Mode Stat Card */
:global(body[data-theme="dark"]) .stat-card[b-gpga9i0npc] {
    background-color: var(--bg-card);
}

:global(body[data-theme="dark"]) .stat-card h2[b-gpga9i0npc] {
    color: var(--text-primary);
}

/* ==========================================================================
   Quick Actions Bar (horizontal)
   ========================================================================== */

.quick-actions-bar[b-gpga9i0npc] {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.quick-actions-bar :global(.btn)[b-gpga9i0npc] {
    flex: 1;
    justify-content: center;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius-lg);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.quick-actions-bar :global(.btn:hover)[b-gpga9i0npc] {
    background: var(--bg-hover);
    border-color: var(--itamfy-primary);
    color: var(--itamfy-primary);
}

.quick-actions-bar :global(.btn i)[b-gpga9i0npc] {
    color: var(--itamfy-primary);
}

/* ==========================================================================
   Content Grid - Two Column Layout
   ========================================================================== */

.content-grid[b-gpga9i0npc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

/* ==========================================================================
   Status Breakdown
   ========================================================================== */

.status-breakdown[b-gpga9i0npc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.status-item[b-gpga9i0npc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-color);
}

.status-item:last-child[b-gpga9i0npc] {
    border-bottom: none;
    padding-bottom: 0;
}

.status-item:first-child[b-gpga9i0npc] {
    padding-top: 0;
}

.status-label[b-gpga9i0npc] {
    font-weight: 500;
    color: var(--text-primary);
}

/* ==========================================================================
   Attention List
   ========================================================================== */

.attention-list[b-gpga9i0npc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.attention-item[b-gpga9i0npc] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.attention-item:hover[b-gpga9i0npc] {
    background-color: var(--bg-hover);
}

.attention-icon[b-gpga9i0npc] {
    flex-shrink: 0;
    width: 32px;
    display: flex;
    justify-content: center;
}

.attention-details[b-gpga9i0npc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.attention-details strong[b-gpga9i0npc] {
    font-size: 0.9375rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attention-type[b-gpga9i0npc] {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.attention-date[b-gpga9i0npc] {
    flex-shrink: 0;
    font-size: 0.8125rem;
}

/* ==========================================================================
   Recent Assets List
   ========================================================================== */

.recent-assets-list[b-gpga9i0npc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.recent-asset-item[b-gpga9i0npc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.recent-asset-item:hover[b-gpga9i0npc] {
    background-color: var(--bg-hover);
}

.recent-asset-info[b-gpga9i0npc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.recent-asset-info strong[b-gpga9i0npc] {
    font-size: 0.9375rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-asset-info span[b-gpga9i0npc] {
    font-size: 0.8125rem;
}

.recent-asset-date[b-gpga9i0npc] {
    flex-shrink: 0;
    font-size: 0.8125rem;
}

/* ==========================================================================
   Chart Filters
   ========================================================================== */

.chart-filters[b-gpga9i0npc] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.empty-state[b-gpga9i0npc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    text-align: center;
}

/* ==========================================================================
   Card Header with Action
   ========================================================================== */

.card-header-with-action[b-gpga9i0npc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.card-subtitle[b-gpga9i0npc] {
    font-size: 0.8125rem;
}


/* ==========================================================================
   Loading State
   ========================================================================== */

.loading-container[b-gpga9i0npc] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.loading-spinner[b-gpga9i0npc] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-color);
    border-top-color: var(--itamfy-primary);
    border-radius: 50%;
    animation: spin-b-gpga9i0npc 1s linear infinite;
}

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

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

@media (max-width: 992px) {
    .content-grid[b-gpga9i0npc] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-header[b-gpga9i0npc] {
        flex-direction: column;
        gap: var(--space-4);
    }

    .header-actions[b-gpga9i0npc] {
        width: 100%;
        justify-content: flex-end;
    }

    .stats-grid[b-gpga9i0npc] {
        grid-template-columns: 1fr;
    }

    .quick-actions-bar[b-gpga9i0npc] {
        flex-direction: column;
    }

    .stat-card[b-gpga9i0npc] {
        padding: var(--space-5);
    }

    .stat-icon[b-gpga9i0npc] {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .stat-card h2[b-gpga9i0npc] {
        font-size: 1.75rem;
    }
}

@media (max-width: 576px) {
    .dashboard-container[b-gpga9i0npc] {
        padding: 0;
    }

    .header-content h1[b-gpga9i0npc] {
        font-size: 1.5rem;
    }

    .stat-top[b-gpga9i0npc] {
        gap: var(--space-3);
    }

    .attention-item[b-gpga9i0npc] {
        flex-wrap: wrap;
    }

    .attention-date[b-gpga9i0npc] {
        width: 100%;
        padding-left: calc(32px + var(--space-3));
    }
}

@media (max-width: 480px) {
    .dashboard-header[b-gpga9i0npc] {
        gap: var(--space-3);
    }

    .header-actions[b-gpga9i0npc] {
        justify-content: flex-start;
    }

    .header-actions :global(.btn)[b-gpga9i0npc] {
        flex: 1 1 auto;
    }

    .header-content h1[b-gpga9i0npc] {
        font-size: 1.25rem;
    }

    .stat-card h2[b-gpga9i0npc] {
        font-size: 1.5rem;
    }

    .stat-icon[b-gpga9i0npc] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}
/* /Components/Pages/Licenses/LicenseDetails.razor.rz.scp.css */
/* Container with full-width toggle */
.license-details-container[b-uabanbkjhs] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.license-details-container.full-width[b-uabanbkjhs] {
    max-width: 100%;
}

/* Page Header */
.page-header[b-uabanbkjhs] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-uabanbkjhs] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

/* Field Labels */
[b-uabanbkjhs] .field-label {
    font-weight: 600;
    color: var(--bs-secondary, #6c757d);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Card Headers */
[b-uabanbkjhs] .card-title {
    font-weight: 600;
    margin-bottom: 0;
}

/* Detail Grid - side-by-side cards */
.detail-grid[b-uabanbkjhs] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4, 1rem);
    align-items: stretch;
    margin-bottom: var(--space-4, 1rem);
}

.detail-grid[b-uabanbkjhs]  .card {
    height: 100%;
}

/* Right column: two cards stacked vertically */
.right-stack[b-uabanbkjhs] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.right-stack[b-uabanbkjhs]  .card {
    height: auto;
}

.right-stack[b-uabanbkjhs]  .card:last-child {
    flex: 1;
}

/* Stacked field for detail cards */
.detail-field[b-uabanbkjhs] {
    margin-bottom: 1rem;
}

.detail-field:last-child[b-uabanbkjhs] {
    margin-bottom: 0;
}

/* Usage Stats */
.usage-stats[b-uabanbkjhs] {
    text-align: center;
}

.usage-stats .stat-label[b-uabanbkjhs] {
    font-weight: 600;
    color: var(--bs-secondary, #6c757d);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.usage-stats .stat-value[b-uabanbkjhs] {
    font-size: 2rem;
    font-weight: 700;
}

/* Assignment Search */
.assignment-search[b-uabanbkjhs]  .input-group {
    display: flex;
    width: 100%;
}

.assignment-search[b-uabanbkjhs]  .form-control,
.assignment-search[b-uabanbkjhs]  .b-is-autocomplete .form-control {
    background-color: var(--bg-hover, #f1f3f5);
    border-color: var(--border-color);
}

.assignment-search[b-uabanbkjhs]  .input-group-text {
    background-color: var(--bg-hover, #f1f3f5);
    border-color: var(--border-color);
}

:global(body[data-theme="dark"]) .assignment-search[b-uabanbkjhs]  .form-control,
:global(body[data-theme="dark"]) .assignment-search[b-uabanbkjhs]  .b-is-autocomplete .form-control {
    background-color: rgba(255, 255, 255, 0.05);
}

:global(body[data-theme="dark"]) .assignment-search[b-uabanbkjhs]  .input-group-text {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Add User Form */
.add-user-form[b-uabanbkjhs] {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color, #dee2e6);
}

:global(body[data-theme="dark"]) .add-user-form[b-uabanbkjhs] {
    border-bottom-color: var(--border-color);
}

/* Assignees Table */
.assignees-table[b-uabanbkjhs] {
    margin-bottom: 0;
    font-size: 0.9rem;
}

.assignees-table thead[b-uabanbkjhs] {
    background-color: var(--bg-hover, #f8f9fa);
}

.assignees-table thead th[b-uabanbkjhs] {
    font-weight: 600;
    border-bottom: 2px solid var(--border-color, #dee2e6);
    padding: 0.75rem;
}

.assignees-table tbody td[b-uabanbkjhs] {
    vertical-align: middle;
    padding: 0.75rem;
}

:global(body[data-theme="dark"]) .assignees-table thead[b-uabanbkjhs] {
    background-color: rgba(255, 255, 255, 0.03);
}

/* License Key */
.license-key[b-uabanbkjhs] {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-hover, #f8f9fa);
    border-radius: var(--radius-md, 6px);
    word-break: break-all;
}

:global(body[data-theme="dark"]) .license-key[b-uabanbkjhs] {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Empty State */
.empty-state[b-uabanbkjhs] {
    text-align: center;
    padding: var(--space-5) var(--space-4);
}

/* Dark Mode */
:global(body[data-theme="dark"]) .page-header[b-uabanbkjhs] {
    border-bottom-color: var(--border-color);
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-uabanbkjhs] {
        flex-direction: column;
        gap: 1rem;
    }

    .detail-grid[b-uabanbkjhs] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .page-header[b-uabanbkjhs] {
        gap: var(--space-3);
    }

    .header-actions[b-uabanbkjhs] {
        width: 100%;
    }

    .header-actions :global(.btn)[b-uabanbkjhs] {
        flex: 1 1 auto;
        text-align: center;
    }
}
/* /Components/Pages/Licenses/Licenses.razor.rz.scp.css */
/* Licenses Container */
.licenses-container[b-oxmwhd687u] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.licenses-container.full-width[b-oxmwhd687u] {
    max-width: 100%;
}

/* Page Header */
.page-header[b-oxmwhd687u] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-oxmwhd687u] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

/* Header Action Buttons */
.header-actions :global(.btn)[b-oxmwhd687u] {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    font-weight: 500;
}

.header-actions :global(.btn:hover)[b-oxmwhd687u] {
    background-color: var(--bg-hover);
    border-color: var(--itamfy-primary);
    color: var(--itamfy-primary);
}

.header-actions :global(.btn-primary)[b-oxmwhd687u] {
    background: var(--itamfy-primary);
    border: none;
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

.header-actions :global(.btn-primary:hover)[b-oxmwhd687u] {
    background: var(--itamfy-primary-light);
    color: #ffffff;
    box-shadow: var(--shadow-md);
}

/* Filter Toolbar */
.filter-toolbar[b-oxmwhd687u] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
}

.filter-buttons[b-oxmwhd687u] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Quick Stats Grid */
.stats-grid[b-oxmwhd687u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

/* Table Container */
.table-container[b-oxmwhd687u] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-card);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Licenses Table */
.licenses-table[b-oxmwhd687u] {
    margin-bottom: 0;
    font-size: 0.9375rem;
}

.licenses-table thead[b-oxmwhd687u] {
    background: var(--gradient-card);
}

.licenses-table thead th[b-oxmwhd687u] {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
    padding: var(--space-4);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.licenses-table thead th:hover[b-oxmwhd687u] {
    color: var(--itamfy-primary);
    background-color: var(--bg-hover);
}

.licenses-table tbody tr[b-oxmwhd687u] {
    transition: background-color var(--transition-fast);
}

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

.licenses-table tbody td[b-oxmwhd687u] {
    vertical-align: middle;
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

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

.licenses-table .actions-column[b-oxmwhd687u] {
    text-align: right;
    white-space: nowrap;
}

/* Pagination */
.pagination-controls[b-oxmwhd687u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.pagination-info[b-oxmwhd687u] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.pagination-buttons[b-oxmwhd687u] {
    display: flex;
    gap: var(--space-1);
}

/* Dark Mode */
:global(body[data-theme="dark"]) .page-header[b-oxmwhd687u] {
    border-bottom-color: var(--border-color);
}

:global(body[data-theme="dark"]) .licenses-table thead[b-oxmwhd687u] {
    background-color: rgba(255, 255, 255, 0.02);
}

:global(body[data-theme="dark"]) .licenses-table thead th[b-oxmwhd687u] {
    color: var(--text-secondary);
}

:global(body[data-theme="dark"]) .licenses-table thead th:hover[b-oxmwhd687u] {
    color: var(--itamfy-primary-light);
    background-color: var(--bg-hover);
}

:global(body[data-theme="dark"]) .licenses-table tbody tr:hover[b-oxmwhd687u] {
    background-color: var(--bg-hover);
}

:global(body[data-theme="dark"]) .pagination-controls[b-oxmwhd687u] {
    border-top-color: var(--border-color);
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-oxmwhd687u] {
        flex-direction: column;
        gap: 1rem;
    }

    .header-actions[b-oxmwhd687u] {
        justify-content: flex-end;
    }

    .pagination-controls[b-oxmwhd687u] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .pagination-info[b-oxmwhd687u] {
        text-align: center;
    }

    .pagination-buttons[b-oxmwhd687u] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .stats-grid[b-oxmwhd687u] {
        grid-template-columns: repeat(2, 1fr);
    }

    .table-responsive[b-oxmwhd687u] {
        font-size: 0.85rem;
    }

    .licenses-table .actions-column[b-oxmwhd687u] {
        width: auto;
    }
}

@media (max-width: 480px) {
    .page-header[b-oxmwhd687u] {
        gap: var(--space-3);
    }

    .header-actions[b-oxmwhd687u] {
        width: 100%;
    }

    .header-actions :global(.btn)[b-oxmwhd687u] {
        flex: 1 1 auto;
        text-align: center;
    }

    .stats-grid[b-oxmwhd687u] {
        grid-template-columns: 1fr;
    }

    .pagination-controls[b-oxmwhd687u] {
        padding: var(--space-3);
    }
}
/* /Components/Pages/Locations/Locations.razor.rz.scp.css */
/* Locations Container */
.locations-container[b-rk39e57we7] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.locations-container.full-width[b-rk39e57we7] {
    max-width: 100%;
}

/* Page Header */
.page-header[b-rk39e57we7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-rk39e57we7] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Full Width Toggle Button - Fix visibility in both modes */
.header-actions :global(.btn)[b-rk39e57we7] {
    background-color: var(--card-bg, #ffffff);
    border-color: var(--border-color, #dee2e6);
    color: var(--body-text, #212529);
}

.header-actions :global(.btn:hover)[b-rk39e57we7] {
    background-color: var(--toolbar-hover, #f8f9fa);
    border-color: var(--toolbar-text, #495057);
    color: var(--body-text, #212529);
}

:global(body[data-theme="dark"]) .header-actions :global(.btn)[b-rk39e57we7] {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--body-text);
}

:global(body[data-theme="dark"]) .header-actions :global(.btn:hover)[b-rk39e57we7] {
    background-color: var(--toolbar-hover);
    border-color: var(--toolbar-text);
}

/* Filter Toolbar */
.filter-toolbar[b-rk39e57we7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    margin-top: var(--space-3);
}

.filter-buttons[b-rk39e57we7] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Locations Grid */
.locations-grid[b-rk39e57we7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

/* Location Card */
.location-card[b-rk39e57we7] {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid var(--border-color);
}

.location-card:hover[b-rk39e57we7] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
}

.location-card-header[b-rk39e57we7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.location-icon[b-rk39e57we7] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg, 8px);
    background: rgba(40, 167, 69, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #28a745;
    font-size: 1.1rem;
}

:global(body[data-theme="dark"]) .location-icon[b-rk39e57we7] {
    background: rgba(40, 167, 69, 0.15);
}

.location-card-actions[b-rk39e57we7] {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.location-card:hover .location-card-actions[b-rk39e57we7] {
    opacity: 1;
}

.location-card-title[b-rk39e57we7] {
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
    word-break: break-word;
}

.location-card-org[b-rk39e57we7] {
    font-size: 0.8rem;
    color: var(--bs-secondary, #6c757d);
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.location-card-address[b-rk39e57we7] {
    font-size: 0.8rem;
    color: var(--bs-secondary, #6c757d);
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.location-card-desc[b-rk39e57we7] {
    font-size: 0.85rem;
    color: var(--bs-secondary, #6c757d);
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.location-card-footer[b-rk39e57we7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.location-footer-badges[b-rk39e57we7] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.location-card-date[b-rk39e57we7] {
    font-size: 0.75rem;
    color: var(--bs-secondary, #6c757d);
    flex-shrink: 0;
}

/* Pagination */
.pagination-controls[b-rk39e57we7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl, 12px);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.pagination-info[b-rk39e57we7] {
    font-size: 0.875rem;
    color: var(--bs-secondary, #6c757d);
}

.pagination-buttons[b-rk39e57we7] {
    display: flex;
    align-items: center;
}

/* Dark Mode */
:global(body[data-theme="dark"]) .page-header[b-rk39e57we7] {
    border-bottom-color: var(--border-color);
}

:global(body[data-theme="dark"]) .pagination-controls[b-rk39e57we7] {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-rk39e57we7] {
        flex-direction: column;
        gap: 1rem;
    }

    .locations-grid[b-rk39e57we7] {
        grid-template-columns: 1fr;
    }

    .pagination-controls[b-rk39e57we7] {
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .page-header[b-rk39e57we7] {
        gap: var(--space-3);
    }

    .header-actions[b-rk39e57we7] {
        width: 100%;
    }

    .header-actions :global(.btn)[b-rk39e57we7] {
        flex: 1 1 auto;
        text-align: center;
    }

    .locations-grid[b-rk39e57we7] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Organizations/OrganizationDetails.razor.rz.scp.css */
/* Container */
.org-details-container[b-vovujk4snx] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
    overflow-x: hidden;
}

.org-details-container.full-width[b-vovujk4snx] {
    max-width: 100%;
}

/* Page Header */
.page-header[b-vovujk4snx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-vovujk4snx] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

/* Field Labels - consistent with other detail pages */
[b-vovujk4snx] .field-label {
    font-weight: 600;
    color: var(--bs-secondary, #6c757d);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Card Headers */
[b-vovujk4snx] .card-title {
    font-weight: 600;
    margin-bottom: 0;
}

/* ==========================================================================
   Detail Grid - side-by-side cards (matches License/Certificate/Asset pages)
   ========================================================================== */

.detail-grid[b-vovujk4snx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4, 1rem);
    align-items: stretch;
    margin-bottom: var(--space-4, 1rem);
}

.detail-grid[b-vovujk4snx]  .card {
    height: 100%;
}

/* Stacked field for detail cards */
.detail-field[b-vovujk4snx] {
    margin-bottom: 1rem;
}

.detail-field:last-child[b-vovujk4snx] {
    margin-bottom: 0;
}

/* ==========================================================================
   Stats Grid - Resource overview (Overview tab)
   ========================================================================== */

.stats-grid[b-vovujk4snx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.stat-item[b-vovujk4snx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-lg, 8px);
    background-color: var(--bg-hover, rgba(0, 0, 0, 0.01));
    transition: background-color 0.15s ease;
}

.stat-item:hover[b-vovujk4snx] {
    background-color: rgba(0, 0, 0, 0.03);
}

.stat-item-icon[b-vovujk4snx] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md, 6px);
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.stat-item-icon.templates[b-vovujk4snx] {
    background: var(--itamfy-primary-light, rgba(79, 70, 229, 0.1));
    color: var(--itamfy-primary, #4f46e5);
}

.stat-item-icon.owners[b-vovujk4snx] {
    background: rgba(255, 193, 7, 0.15);
    color: #d4a017;
}

.stat-item-icon.admins[b-vovujk4snx] {
    background: rgba(23, 162, 184, 0.1);
    color: #17a2b8;
}

.stat-item-content[b-vovujk4snx] {
    flex: 1;
    min-width: 0;
}

.stat-item-value[b-vovujk4snx] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

.stat-item-label[b-vovujk4snx] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #6c757d);
}

/* ==========================================================================
   Items List - Locations & Templates (Overview tab)
   ========================================================================== */

.items-list[b-vovujk4snx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.item-row[b-vovujk4snx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-lg, 8px);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.item-row:hover[b-vovujk4snx] {
    background-color: rgba(0, 0, 0, 0.02);
}

.item-row.clickable[b-vovujk4snx] {
    cursor: pointer;
}

.item-row.clickable:hover[b-vovujk4snx] {
    background-color: rgba(0, 0, 0, 0.03);
    transform: translateX(4px);
}

.item-icon[b-vovujk4snx] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md, 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.item-icon.location[b-vovujk4snx] {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.item-icon.template[b-vovujk4snx] {
    background: var(--itamfy-primary-light, rgba(79, 70, 229, 0.1));
    color: var(--itamfy-primary, #4f46e5);
}

.item-info[b-vovujk4snx] {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
}

.item-arrow[b-vovujk4snx] {
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 0.15s ease;
}

.item-row.clickable:hover .item-arrow[b-vovujk4snx] {
    opacity: 0.8;
}

/* ==========================================================================
   Security List - Owners & Admins (Security tab)
   ========================================================================== */

.security-list[b-vovujk4snx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.security-item[b-vovujk4snx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-lg, 8px);
    transition: background-color 0.15s ease;
}

.security-item:hover[b-vovujk4snx] {
    background-color: rgba(0, 0, 0, 0.02);
}

.security-item-icon[b-vovujk4snx] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md, 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.security-item-icon.owner[b-vovujk4snx] {
    background: rgba(255, 193, 7, 0.15);
    color: #d4a017;
}

.security-item-icon.admin[b-vovujk4snx] {
    background: rgba(23, 162, 184, 0.1);
    color: #17a2b8;
}

.security-item-info[b-vovujk4snx] {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
}

.security-item-actions[b-vovujk4snx] {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.security-item:hover .security-item-actions[b-vovujk4snx] {
    opacity: 1;
}

/* ==========================================================================
   Members Table (Members tab)
   ========================================================================== */

.members-table[b-vovujk4snx] {
    margin-bottom: 0;
    font-size: 0.9rem;
}

.members-table thead[b-vovujk4snx] {
    background-color: var(--bg-hover, #f8f9fa);
}

.members-table thead th[b-vovujk4snx] {
    font-weight: 600;
    border-bottom: 2px solid var(--border-color, #dee2e6);
    padding: 0.75rem;
}

.members-table tbody td[b-vovujk4snx] {
    vertical-align: middle;
    padding: 0.75rem;
}

/* Empty State */
.empty-state[b-vovujk4snx] {
    text-align: center;
    padding: var(--space-5) var(--space-4);
}

/* ==========================================================================
   Vertical Tab Layout
   ========================================================================== */

.org-layout[b-vovujk4snx] {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
}

.org-sidebar[b-vovujk4snx] {
    min-width: 220px;
    max-width: 220px;
    position: sticky;
    top: var(--space-4);
}

.org-nav[b-vovujk4snx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    box-shadow: var(--shadow-card);
}

.org-nav-item[b-vovujk4snx] {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    gap: var(--space-2);
}

.org-nav-item:hover[b-vovujk4snx] {
    background: var(--bg-hover);
    color: var(--text-primary);
    text-decoration: none;
}

.org-nav-item.active[b-vovujk4snx] {
    background: var(--itamfy-primary);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

.org-nav-item.active:hover[b-vovujk4snx] {
    background: var(--itamfy-primary-light);
    color: #ffffff;
}

.org-content[b-vovujk4snx] {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

/* ==========================================================================
   Settings Tab - Two Column Layout
   ========================================================================== */

.settings-grid[b-vovujk4snx] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-4);
    align-items: start;
}

.settings-form[b-vovujk4snx] {
    min-width: 0;
}

.settings-guide[b-vovujk4snx] {
    min-width: 0;
}

.settings-section[b-vovujk4snx] {
    margin-bottom: var(--space-2);
}

.settings-section-title[b-vovujk4snx] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
}

.settings-actions[b-vovujk4snx] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Setup Guide Steps */
.guide-steps[b-vovujk4snx] {
    padding: 0;
}

.guide-step[b-vovujk4snx] {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.guide-step:last-child[b-vovujk4snx] {
    border-bottom: none;
}

.guide-step-number[b-vovujk4snx] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--itamfy-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    margin-top: 1px;
}

.guide-step-content[b-vovujk4snx] {
    flex: 1;
    min-width: 0;
}

.guide-step-title[b-vovujk4snx] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
}

.guide-list[b-vovujk4snx] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.guide-list li[b-vovujk4snx] {
    position: relative;
    padding-left: var(--space-4);
    margin-bottom: var(--space-1);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.guide-list li[b-vovujk4snx]::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-muted);
}

.guide-list li a[b-vovujk4snx] {
    color: var(--itamfy-primary);
    text-decoration: none;
}

.guide-list li a:hover[b-vovujk4snx] {
    text-decoration: underline;
}

.guide-sublist[b-vovujk4snx] {
    list-style: none;
    padding: 0;
    margin: var(--space-1) 0 0 var(--space-4);
}

.guide-sublist li[b-vovujk4snx] {
    padding-left: 0;
    margin-bottom: 0;
}

.guide-sublist li[b-vovujk4snx]::before {
    display: none;
}

.guide-sublist code[b-vovujk4snx] {
    font-size: 0.75rem;
    background: var(--bg-hover);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.guide-footer[b-vovujk4snx] {
    padding: var(--space-3);
    border-top: 1px solid var(--border-color);
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

:global(body[data-theme="dark"]) .page-header[b-vovujk4snx] {
    border-bottom-color: var(--border-color);
}

:global(body[data-theme="dark"]) .stat-item[b-vovujk4snx] {
    border-color: #495057;
    background-color: rgba(255, 255, 255, 0.02);
}

:global(body[data-theme="dark"]) .stat-item:hover[b-vovujk4snx] {
    background-color: rgba(255, 255, 255, 0.05);
}

:global(body[data-theme="dark"]) .stat-item-icon[b-vovujk4snx] {
    background: rgba(40, 167, 69, 0.15);
}

:global(body[data-theme="dark"]) .stat-item-icon.templates[b-vovujk4snx] {
    background: rgba(79, 70, 229, 0.15);
}

:global(body[data-theme="dark"]) .stat-item-icon.owners[b-vovujk4snx] {
    background: rgba(255, 193, 7, 0.12);
}

:global(body[data-theme="dark"]) .stat-item-icon.admins[b-vovujk4snx] {
    background: rgba(23, 162, 184, 0.15);
}

:global(body[data-theme="dark"]) .item-row[b-vovujk4snx] {
    border-color: #495057;
}

:global(body[data-theme="dark"]) .item-row:hover[b-vovujk4snx] {
    background-color: rgba(255, 255, 255, 0.05);
}

:global(body[data-theme="dark"]) .item-icon.location[b-vovujk4snx] {
    background: rgba(40, 167, 69, 0.15);
}

:global(body[data-theme="dark"]) .item-icon.template[b-vovujk4snx] {
    background: rgba(79, 70, 229, 0.15);
}

:global(body[data-theme="dark"]) .security-item[b-vovujk4snx] {
    border-color: #495057;
}

:global(body[data-theme="dark"]) .security-item:hover[b-vovujk4snx] {
    background-color: rgba(255, 255, 255, 0.05);
}

:global(body[data-theme="dark"]) .security-item-icon.owner[b-vovujk4snx] {
    background: rgba(255, 193, 7, 0.12);
}

:global(body[data-theme="dark"]) .security-item-icon.admin[b-vovujk4snx] {
    background: rgba(23, 162, 184, 0.15);
}

:global(body[data-theme="dark"]) .members-table thead[b-vovujk4snx] {
    background-color: rgba(255, 255, 255, 0.03);
}

:global(body[data-theme="dark"]) .guide-step[b-vovujk4snx] {
    border-bottom-color: var(--border-color);
}

:global(body[data-theme="dark"]) .guide-footer[b-vovujk4snx] {
    border-top-color: var(--border-color);
}

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

@media (max-width: 768px) {
    .page-header[b-vovujk4snx] {
        flex-direction: column;
        gap: 1rem;
    }

    .detail-grid[b-vovujk4snx] {
        grid-template-columns: 1fr;
    }

    .stats-grid[b-vovujk4snx] {
        grid-template-columns: 1fr 1fr;
    }

    .org-layout[b-vovujk4snx] {
        flex-direction: column;
        gap: var(--space-4);
    }

    .org-sidebar[b-vovujk4snx] {
        min-width: 100%;
        max-width: 100%;
        position: static;
    }

    .org-nav[b-vovujk4snx] {
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
        padding: var(--space-2);
    }

    .org-nav-item[b-vovujk4snx] {
        padding: var(--space-2) var(--space-3);
        font-size: 0.8125rem;
    }

    .org-content[b-vovujk4snx] {
        width: 100%;
    }

    .org-content :deep(.table-responsive)[b-vovujk4snx] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .settings-grid[b-vovujk4snx] {
        grid-template-columns: 1fr;
    }

    .settings-actions[b-vovujk4snx] {
        flex-direction: column;
    }

    .settings-actions :global(.btn)[b-vovujk4snx] {
        width: 100%;
    }

    .security-item-actions[b-vovujk4snx] {
        opacity: 1;
    }
}

@media (max-width: 576px) {
    .org-details-container[b-vovujk4snx] {
        padding: 0;
    }

    .stats-grid[b-vovujk4snx] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .page-header[b-vovujk4snx] {
        gap: var(--space-3);
    }

    .header-actions[b-vovujk4snx] {
        width: 100%;
    }

    .header-actions :global(.btn)[b-vovujk4snx] {
        flex: 1 1 auto;
        text-align: center;
    }

    .org-nav-item[b-vovujk4snx] {
        padding: var(--space-2) var(--space-2);
        font-size: 0.75rem;
    }

    .item-row[b-vovujk4snx] {
        padding: 0.625rem 0.75rem;
    }

    .security-item[b-vovujk4snx] {
        padding: 0.625rem 0.75rem;
    }

    .stat-item[b-vovujk4snx] {
        padding: 0.625rem 0.75rem;
    }
}
/* /Components/Pages/Organizations/OrganizationMembers.razor.rz.scp.css */
/* Members Container */
.members-container[b-xuzxhz93at] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.members-container.full-width[b-xuzxhz93at] {
    max-width: 100%;
}

/* Page Header */
.page-header[b-xuzxhz93at] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-xuzxhz93at] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

/* Dark Mode */
:global(body[data-theme="dark"]) .page-header[b-xuzxhz93at] {
    border-bottom-color: var(--border-color);
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-xuzxhz93at] {
        flex-direction: column;
        gap: 1rem;
    }
}
/* /Components/Pages/Organizations/Organizations.razor.rz.scp.css */
/* Organizations Container */
.organizations-container[b-21ebgx9rbt] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.organizations-container.full-width[b-21ebgx9rbt] {
    max-width: 100%;
}

/* Page Header */
.page-header[b-21ebgx9rbt] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-21ebgx9rbt] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Full Width Toggle Button - Fix visibility in both modes */
.header-actions :global(.btn)[b-21ebgx9rbt] {
    background-color: var(--card-bg, #ffffff);
    border-color: var(--border-color, #dee2e6);
    color: var(--body-text, #212529);
}

.header-actions :global(.btn:hover)[b-21ebgx9rbt] {
    background-color: var(--toolbar-hover, #f8f9fa);
    border-color: var(--toolbar-text, #495057);
    color: var(--body-text, #212529);
}

:global(body[data-theme="dark"]) .header-actions :global(.btn)[b-21ebgx9rbt] {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--body-text);
}

:global(body[data-theme="dark"]) .header-actions :global(.btn:hover)[b-21ebgx9rbt] {
    background-color: var(--toolbar-hover);
    border-color: var(--toolbar-text);
}

/* Filter Toolbar */
.filter-toolbar[b-21ebgx9rbt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    margin-top: var(--space-3);
}

/* Organizations Grid */
.organizations-grid[b-21ebgx9rbt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

/* Organization Card */
.organization-card[b-21ebgx9rbt] {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid var(--border-color);
}

.organization-card:hover[b-21ebgx9rbt] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
}

.org-card-header[b-21ebgx9rbt] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.org-icon[b-21ebgx9rbt] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg, 8px);
    background: var(--bg-hover, #f1f3f5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--itamfy-primary, #4f46e5);
    font-size: 1.1rem;
}

:global(body[data-theme="dark"]) .org-icon[b-21ebgx9rbt] {
    background: rgba(255, 255, 255, 0.08);
}

.org-card-actions[b-21ebgx9rbt] {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.organization-card:hover .org-card-actions[b-21ebgx9rbt] {
    opacity: 1;
}

.org-card-title[b-21ebgx9rbt] {
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
    word-break: break-word;
}

.org-card-desc[b-21ebgx9rbt] {
    font-size: 0.85rem;
    color: var(--bs-secondary, #6c757d);
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.org-card-footer[b-21ebgx9rbt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.org-member-badges[b-21ebgx9rbt] {
    display: flex;
    gap: 0.375rem;
}

.org-card-date[b-21ebgx9rbt] {
    font-size: 0.75rem;
    color: var(--bs-secondary, #6c757d);
}

/* Dark Mode */
:global(body[data-theme="dark"]) .page-header[b-21ebgx9rbt] {
    border-bottom-color: var(--border-color);
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-21ebgx9rbt] {
        flex-direction: column;
        gap: 1rem;
    }

    .organizations-grid[b-21ebgx9rbt] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .page-header[b-21ebgx9rbt] {
        gap: var(--space-3);
    }

    .header-actions[b-21ebgx9rbt] {
        width: 100%;
    }

    .header-actions :global(.btn)[b-21ebgx9rbt] {
        flex: 1 1 auto;
        text-align: center;
    }

    .organizations-grid[b-21ebgx9rbt] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Organizations/OrganizationSettings.razor.rz.scp.css */
/* Page Header */
.page-header[b-6sc0fyouml] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

:global(body[data-theme="dark"]) .page-header[b-6sc0fyouml] {
    border-bottom-color: var(--border-color);
}

/* Vertical Tab Layout */
.settings-layout[b-6sc0fyouml] {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
}

.settings-sidebar[b-6sc0fyouml] {
    min-width: 220px;
    max-width: 220px;
    position: sticky;
    top: var(--space-4);
}

.settings-nav[b-6sc0fyouml] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    box-shadow: var(--shadow-card);
}

.settings-nav-item[b-6sc0fyouml] {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    gap: var(--space-2);
}

.settings-nav-item:hover[b-6sc0fyouml] {
    background: var(--bg-hover);
    color: var(--text-primary);
    text-decoration: none;
}

.settings-nav-item.active[b-6sc0fyouml] {
    background: var(--itamfy-primary);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

.settings-nav-item.active:hover[b-6sc0fyouml] {
    background: var(--itamfy-primary-light);
    color: #ffffff;
}

.settings-content[b-6sc0fyouml] {
    flex: 1;
    min-width: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-6sc0fyouml] {
        flex-direction: column;
        gap: 1rem;
    }

    .settings-layout[b-6sc0fyouml] {
        flex-direction: column;
        gap: var(--space-4);
    }

    .settings-sidebar[b-6sc0fyouml] {
        min-width: 100%;
        max-width: 100%;
        position: static;
    }

    .settings-nav[b-6sc0fyouml] {
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
        padding: var(--space-2);
    }

    .settings-nav-item[b-6sc0fyouml] {
        padding: var(--space-2) var(--space-3);
        font-size: 0.8125rem;
    }
}
/* /Components/Pages/Subscription/Billing.razor.rz.scp.css */
.billing-container[b-xqtyhd1tk1] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.billing-container.full-width[b-xqtyhd1tk1] {
    max-width: 100%;
}

.page-header[b-xqtyhd1tk1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 1rem;
}

.header-actions[b-xqtyhd1tk1] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.loading-container[b-xqtyhd1tk1] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.subscription-details[b-xqtyhd1tk1] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-row[b-xqtyhd1tk1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color, #e0e6ed);
}

.detail-row:last-child[b-xqtyhd1tk1] {
    border-bottom: none;
}

.detail-label[b-xqtyhd1tk1] {
    font-weight: 500;
    color: var(--text-secondary, #6c757d);
}

.detail-value[b-xqtyhd1tk1] {
    text-align: right;
}

.cancel-section[b-xqtyhd1tk1] {
    margin-top: 1rem;
}

.cancel-actions[b-xqtyhd1tk1] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.invoice-link[b-xqtyhd1tk1] {
    text-decoration: none;
    color: var(--itamfy-primary, #0d6efd);
    font-weight: 500;
}

.invoice-link:hover[b-xqtyhd1tk1] {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .page-header[b-xqtyhd1tk1] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-actions[b-xqtyhd1tk1] {
        justify-content: flex-end;
    }

    .detail-row[b-xqtyhd1tk1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .detail-value[b-xqtyhd1tk1] {
        text-align: left;
    }
}
/* /Components/Pages/Subscription/PaymentCancel.razor.rz.scp.css */
.payment-result-container[b-4st7sfvr2z] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 2rem;
}

.payment-card[b-4st7sfvr2z] {
    max-width: 600px;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cancel-icon[b-4st7sfvr2z] {
    display: inline-block;
    animation: scaleIn-b-4st7sfvr2z 0.5s ease-out;
}

@keyframes scaleIn-b-4st7sfvr2z {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

[b-4st7sfvr2z] .fa-times-circle {
    color: var(--bs-warning) !important;
}
/* /Components/Pages/Subscription/PaymentSuccess.razor.rz.scp.css */
.payment-result-container[b-y29bqc0qib] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 2rem;
}

.payment-card[b-y29bqc0qib] {
    max-width: 600px;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.success-icon[b-y29bqc0qib],
.error-icon[b-y29bqc0qib],
.cancel-icon[b-y29bqc0qib] {
    display: inline-block;
    animation: scaleIn-b-y29bqc0qib 0.5s ease-out;
}

@keyframes scaleIn-b-y29bqc0qib {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

[b-y29bqc0qib] .fa-check-circle {
    color: var(--bs-success) !important;
}

[b-y29bqc0qib] .fa-exclamation-circle {
    color: var(--bs-danger) !important;
}

[b-y29bqc0qib] .fa-times-circle {
    color: var(--bs-warning) !important;
}
/* /Components/Pages/Subscription/Plans.razor.rz.scp.css */
/* Container */
.subscription-container[b-qkhel4upuw] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.subscription-container.full-width[b-qkhel4upuw] {
    max-width: 100%;
}

/* Page Header */
.page-header[b-qkhel4upuw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-qkhel4upuw] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

/* Field Labels */
[b-qkhel4upuw] .field-label {
    font-weight: 600;
    color: var(--bs-secondary, #6c757d);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Card Titles */
[b-qkhel4upuw] .card-title {
    font-weight: 600;
    margin-bottom: 0;
}

/* ==========================================================================
   Period Selection Bar
   ========================================================================== */

.period-bar[b-qkhel4upuw] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.08));
    margin-bottom: var(--space-5);
}

.period-label[b-qkhel4upuw] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-secondary, #6c757d);
    white-space: nowrap;
}

.period-buttons[b-qkhel4upuw] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.period-btn[b-qkhel4upuw] {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-md, 6px);
    background: transparent;
    color: var(--text-secondary, #6c757d);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.period-btn:hover[b-qkhel4upuw] {
    border-color: var(--itamfy-primary, #4f46e5);
    color: var(--itamfy-primary, #4f46e5);
    background: var(--itamfy-primary-light, rgba(79, 70, 229, 0.05));
}

.period-btn.active[b-qkhel4upuw] {
    background: var(--itamfy-primary, #4f46e5);
    border-color: var(--itamfy-primary, #4f46e5);
    color: #ffffff;
}

.period-discount[b-qkhel4upuw] {
    display: inline-flex;
    padding: 0.125rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border-radius: 999px;
}

.period-btn.active .period-discount[b-qkhel4upuw] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* ==========================================================================
   Plans Grid
   ========================================================================== */

.plans-grid[b-qkhel4upuw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

/* ==========================================================================
   Plan Card
   ========================================================================== */

.plan-card[b-qkhel4upuw] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-xl, 12px);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.08));
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.plan-card:hover[b-qkhel4upuw] {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
}

.plan-current[b-qkhel4upuw] {
    border: 2px solid var(--itamfy-primary, #4f46e5);
}

.plan-badge[b-qkhel4upuw] {
    position: absolute;
    top: -1px;
    right: var(--space-4);
    background: var(--itamfy-primary, #4f46e5);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 0 0 var(--radius-md, 6px) var(--radius-md, 6px);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
}

/* Plan Header */
.plan-header[b-qkhel4upuw] {
    text-align: center;
    padding: var(--space-5) var(--space-4) var(--space-4);
    border-bottom: 1px solid var(--border-color, #dee2e6);
}

.plan-icon[b-qkhel4upuw] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin: 0 auto var(--space-3);
}

.plan-icon.free[b-qkhel4upuw] {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.plan-icon.paid[b-qkhel4upuw] {
    background: var(--itamfy-primary-light, rgba(79, 70, 229, 0.1));
    color: var(--itamfy-primary, #4f46e5);
}

.plan-icon.enterprise[b-qkhel4upuw] {
    background: rgba(255, 193, 7, 0.12);
    color: #d4a017;
}

.plan-name[b-qkhel4upuw] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.plan-price[b-qkhel4upuw] {
    margin-bottom: var(--space-2);
}

.price-amount[b-qkhel4upuw] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.price-period[b-qkhel4upuw] {
    font-size: 0.8125rem;
    color: var(--text-muted, #adb5bd);
}

.plan-description[b-qkhel4upuw] {
    font-size: 0.8125rem;
    color: var(--text-secondary, #6c757d);
    margin-top: var(--space-1);
}

/* ==========================================================================
   Plan Features
   ========================================================================== */

.plan-features[b-qkhel4upuw] {
    display: flex;
    flex-direction: column;
    padding: var(--space-3) var(--space-4);
    flex: 1;
}

.feature-item[b-qkhel4upuw] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color, #dee2e6);
    font-size: 0.8125rem;
    color: var(--text-primary);
}

.feature-item:last-child[b-qkhel4upuw] {
    border-bottom: none;
}

.feature-icon[b-qkhel4upuw] {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm, 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.feature-icon.included[b-qkhel4upuw] {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.feature-icon.excluded[b-qkhel4upuw] {
    background: rgba(220, 53, 69, 0.08);
    color: var(--text-muted, #adb5bd);
}

.feature-disabled[b-qkhel4upuw] {
    color: var(--text-muted, #adb5bd);
    text-decoration: line-through;
}

/* ==========================================================================
   Plan Footer
   ========================================================================== */

.plan-footer[b-qkhel4upuw] {
    padding: var(--space-3) var(--space-4) var(--space-4);
    margin-top: auto;
}

.plan-footer :global(.btn)[b-qkhel4upuw] {
    font-weight: 600;
    border-radius: var(--radius-md, 6px);
}

/* ==========================================================================
   Upgrade Modal
   ========================================================================== */

.modal-plan-summary[b-qkhel4upuw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    background: var(--bg-hover, #f8f9fa);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-lg, 8px);
    margin-bottom: var(--space-4);
}

.modal-plan-info[b-qkhel4upuw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-plan-icon[b-qkhel4upuw] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg, 8px);
    background: var(--itamfy-primary-light, rgba(79, 70, 229, 0.1));
    color: var(--itamfy-primary, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.modal-plan-price[b-qkhel4upuw] {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.modal-features-grid[b-qkhel4upuw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.modal-feature[b-qkhel4upuw] {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    padding: 0.25rem 0;
}

/* ==========================================================================
   MoR Notice
   ========================================================================== */

.mor-notice[b-qkhel4upuw] {
    margin-top: var(--space-2);
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

:global(body[data-theme="dark"]) .page-header[b-qkhel4upuw] {
    border-bottom-color: var(--border-color);
}

:global(body[data-theme="dark"]) .plan-card[b-qkhel4upuw] {
    background: var(--bg-card);
}

:global(body[data-theme="dark"]) .plan-card:hover[b-qkhel4upuw] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

:global(body[data-theme="dark"]) .plan-current[b-qkhel4upuw] {
    border-color: var(--itamfy-primary);
}

:global(body[data-theme="dark"]) .plan-icon.free[b-qkhel4upuw] {
    background: rgba(40, 167, 69, 0.15);
}

:global(body[data-theme="dark"]) .plan-icon.paid[b-qkhel4upuw] {
    background: rgba(79, 70, 229, 0.15);
}

:global(body[data-theme="dark"]) .plan-icon.enterprise[b-qkhel4upuw] {
    background: rgba(255, 193, 7, 0.15);
}

:global(body[data-theme="dark"]) .feature-icon.included[b-qkhel4upuw] {
    background: rgba(40, 167, 69, 0.15);
}

:global(body[data-theme="dark"]) .feature-icon.excluded[b-qkhel4upuw] {
    background: rgba(220, 53, 69, 0.12);
}

:global(body[data-theme="dark"]) .period-bar[b-qkhel4upuw] {
    background: var(--bg-card);
    border-color: var(--border-color);
}

:global(body[data-theme="dark"]) .period-btn[b-qkhel4upuw] {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

:global(body[data-theme="dark"]) .period-btn:hover[b-qkhel4upuw] {
    border-color: var(--itamfy-primary);
    background: rgba(79, 70, 229, 0.1);
}

:global(body[data-theme="dark"]) .modal-plan-summary[b-qkhel4upuw] {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--border-color);
}

:global(body[data-theme="dark"]) .modal-plan-icon[b-qkhel4upuw] {
    background: rgba(79, 70, 229, 0.15);
}

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

@media (max-width: 768px) {
    .page-header[b-qkhel4upuw] {
        flex-direction: column;
        gap: 1rem;
    }

    .period-bar[b-qkhel4upuw] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .plans-grid[b-qkhel4upuw] {
        grid-template-columns: 1fr;
    }

    .plan-card:hover[b-qkhel4upuw] {
        transform: none;
    }

    .modal-features-grid[b-qkhel4upuw] {
        grid-template-columns: 1fr;
    }

    .modal-plan-summary[b-qkhel4upuw] {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }

    .modal-plan-info[b-qkhel4upuw] {
        flex-direction: column;
    }

    .modal-plan-price[b-qkhel4upuw] {
        align-items: center;
    }
}

@media (max-width: 576px) {
    .subscription-container[b-qkhel4upuw] {
        padding: 0;
    }
}
/* /Components/Pages/Subscription/Usage.razor.rz.scp.css */
.usage-container[b-relctufqjg] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.usage-container.full-width[b-relctufqjg] {
    max-width: 100%;
}

.page-header[b-relctufqjg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 1rem;
}

.header-actions[b-relctufqjg] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.loading-container[b-relctufqjg] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.plan-info[b-relctufqjg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.plan-name[b-relctufqjg] {
    font-size: 1.25rem;
    display: flex;
    align-items: center;
}

.usage-grid[b-relctufqjg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.usage-card-header[b-relctufqjg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.usage-numbers[b-relctufqjg] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.usage-current[b-relctufqjg] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--itamfy-primary);
}

.usage-separator[b-relctufqjg] {
    font-size: 1.5rem;
    color: var(--text-muted);
}

.usage-max[b-relctufqjg] {
    font-size: 1.25rem;
    color: var(--text-muted);
}

.usage-remaining[b-relctufqjg] {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .page-header[b-relctufqjg] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-actions[b-relctufqjg] {
        justify-content: flex-end;
    }

    .plan-info[b-relctufqjg] {
        flex-direction: column;
        align-items: flex-start;
    }

    .usage-grid[b-relctufqjg] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Templates/TemplateDetails.razor.rz.scp.css */
/* Container with full-width toggle */
.template-details-container[b-aw3orykepb] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.template-details-container.full-width[b-aw3orykepb] {
    max-width: 100%;
}

/* Page Header */
.page-header[b-aw3orykepb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-aw3orykepb] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

/* Field Labels */
[b-aw3orykepb] .field-label {
    font-weight: 600;
    color: var(--bs-secondary, #6c757d);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Card Headers */
[b-aw3orykepb] .card-title {
    font-weight: 600;
    margin-bottom: 0;
}

/* Detail Grid - side-by-side cards */
.detail-grid[b-aw3orykepb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4, 1rem);
    align-items: stretch;
    margin-bottom: var(--space-4, 1rem);
}

.detail-grid[b-aw3orykepb]  .card {
    height: 100%;
}

/* Stacked field for detail cards */
.detail-field[b-aw3orykepb] {
    margin-bottom: 1rem;
}

.detail-field:last-child[b-aw3orykepb] {
    margin-bottom: 0;
}

/* Default Fields Grid */
.default-fields-grid[b-aw3orykepb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.field-item[b-aw3orykepb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-lg, 8px);
    background-color: var(--bg-hover, rgba(0, 0, 0, 0.01));
    transition: background-color 0.15s ease;
}

.field-item:hover[b-aw3orykepb] {
    background-color: rgba(0, 0, 0, 0.03);
}

.field-item-icon[b-aw3orykepb] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md, 6px);
    background: var(--itamfy-primary-light, rgba(79, 70, 229, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--itamfy-primary, #4f46e5);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.field-item-content[b-aw3orykepb] {
    flex: 1;
    font-size: 0.9rem;
}

/* Custom Properties List */
.properties-list[b-aw3orykepb] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.property-item[b-aw3orykepb] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-lg, 8px);
    transition: background-color 0.15s ease;
}

.property-item:hover[b-aw3orykepb] {
    background-color: rgba(0, 0, 0, 0.02);
}

.property-icon[b-aw3orykepb] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md, 6px);
    background: var(--itamfy-primary-light, rgba(79, 70, 229, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--itamfy-primary, #4f46e5);
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.property-info[b-aw3orykepb] {
    flex: 1;
    min-width: 0;
}

.property-header[b-aw3orykepb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.property-badges[b-aw3orykepb] {
    display: flex;
    gap: 0.25rem;
}

.property-actions[b-aw3orykepb] {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.property-item:hover .property-actions[b-aw3orykepb] {
    opacity: 1;
}

/* Empty State */
.empty-state[b-aw3orykepb] {
    text-align: center;
    padding: var(--space-5) var(--space-4);
}

/* Dark Mode */
:global(body[data-theme="dark"]) .page-header[b-aw3orykepb] {
    border-bottom-color: var(--border-color);
}

:global(body[data-theme="dark"]) .field-item[b-aw3orykepb] {
    border-color: var(--border-color, #495057);
    background-color: rgba(255, 255, 255, 0.02);
}

:global(body[data-theme="dark"]) .field-item:hover[b-aw3orykepb] {
    background-color: rgba(255, 255, 255, 0.05);
}

:global(body[data-theme="dark"]) .field-item-icon[b-aw3orykepb] {
    background: rgba(255, 255, 255, 0.08);
}

:global(body[data-theme="dark"]) .property-item[b-aw3orykepb] {
    border-color: var(--border-color, #495057);
}

:global(body[data-theme="dark"]) .property-item:hover[b-aw3orykepb] {
    background-color: rgba(255, 255, 255, 0.05);
}

:global(body[data-theme="dark"]) .property-icon[b-aw3orykepb] {
    background: rgba(255, 255, 255, 0.08);
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-aw3orykepb] {
        flex-direction: column;
        gap: 1rem;
    }

    .detail-grid[b-aw3orykepb] {
        grid-template-columns: 1fr;
    }

    .default-fields-grid[b-aw3orykepb] {
        grid-template-columns: 1fr;
    }

    .property-item[b-aw3orykepb] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .property-actions[b-aw3orykepb] {
        opacity: 1;
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 480px) {
    .page-header[b-aw3orykepb] {
        gap: var(--space-3);
    }

    .header-actions[b-aw3orykepb] {
        width: 100%;
    }

    .header-actions :global(.btn)[b-aw3orykepb] {
        flex: 1 1 auto;
        text-align: center;
    }
}
/* /Components/Pages/Templates/Templates.razor.rz.scp.css */
/* Templates Container */
.templates-container[b-j50znpxqob] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    transition: max-width var(--transition-base);
}

.templates-container.full-width[b-j50znpxqob] {
    max-width: 100%;
}

/* Page Header */
.page-header[b-j50znpxqob] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-color);
}

.header-actions[b-j50znpxqob] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Full Width Toggle Button - Fix visibility in both modes */
.header-actions :global(.btn)[b-j50znpxqob] {
    background-color: var(--card-bg, #ffffff);
    border-color: var(--border-color, #dee2e6);
    color: var(--body-text, #212529);
}

.header-actions :global(.btn:hover)[b-j50znpxqob] {
    background-color: var(--toolbar-hover, #f8f9fa);
    border-color: var(--toolbar-text, #495057);
    color: var(--body-text, #212529);
}

:global(body[data-theme="dark"]) .header-actions :global(.btn)[b-j50znpxqob] {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--body-text);
}

:global(body[data-theme="dark"]) .header-actions :global(.btn:hover)[b-j50znpxqob] {
    background-color: var(--toolbar-hover);
    border-color: var(--toolbar-text);
}

/* Filter Toolbar */
.filter-toolbar[b-j50znpxqob] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    margin-top: var(--space-3);
}

.filter-buttons[b-j50znpxqob] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Templates Grid */
.templates-grid[b-j50znpxqob] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

/* Template Card */
.template-card[b-j50znpxqob] {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid var(--border-color);
}

.template-card:hover[b-j50znpxqob] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
}

.template-card-header[b-j50znpxqob] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.template-icon[b-j50znpxqob] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg, 8px);
    background: var(--bg-hover, #f1f3f5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--itamfy-primary, #4f46e5);
    font-size: 1.1rem;
}

:global(body[data-theme="dark"]) .template-icon[b-j50znpxqob] {
    background: rgba(255, 255, 255, 0.08);
}

.template-card-actions[b-j50znpxqob] {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.template-card:hover .template-card-actions[b-j50znpxqob] {
    opacity: 1;
}

.template-card-title[b-j50znpxqob] {
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
    word-break: break-word;
}

.template-card-org[b-j50znpxqob] {
    font-size: 0.8rem;
    color: var(--bs-secondary, #6c757d);
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.template-card-desc[b-j50znpxqob] {
    font-size: 0.85rem;
    color: var(--bs-secondary, #6c757d);
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.template-card-footer[b-j50znpxqob] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.template-card-date[b-j50znpxqob] {
    font-size: 0.75rem;
    color: var(--bs-secondary, #6c757d);
}

/* Pagination */
.pagination-controls[b-j50znpxqob] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl, 12px);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.pagination-info[b-j50znpxqob] {
    font-size: 0.875rem;
    color: var(--bs-secondary, #6c757d);
}

.pagination-buttons[b-j50znpxqob] {
    display: flex;
    align-items: center;
}

/* Dark Mode */
:global(body[data-theme="dark"]) .page-header[b-j50znpxqob] {
    border-bottom-color: var(--border-color);
}

:global(body[data-theme="dark"]) .pagination-controls[b-j50znpxqob] {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-j50znpxqob] {
        flex-direction: column;
        gap: 1rem;
    }

    .templates-grid[b-j50znpxqob] {
        grid-template-columns: 1fr;
    }

    .pagination-controls[b-j50znpxqob] {
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .page-header[b-j50znpxqob] {
        gap: var(--space-3);
    }

    .header-actions[b-j50znpxqob] {
        width: 100%;
    }

    .header-actions :global(.btn)[b-j50znpxqob] {
        flex: 1 1 auto;
        text-align: center;
    }

    .templates-grid[b-j50znpxqob] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/AnnouncementBanner.razor.rz.scp.css */
.announcement-container[b-mkj80fu3rt] {
    width: 100%;
}

.announcement-banner[b-mkj80fu3rt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.announcement-content[b-mkj80fu3rt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.announcement-message[b-mkj80fu3rt] {
    margin-left: 0.25rem;
}

.announcement-close[b-mkj80fu3rt] {
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.7;
    padding: 0.25rem 0.5rem;
    color: inherit;
}

.announcement-close:hover[b-mkj80fu3rt] {
    opacity: 1;
}

.announcement-info[b-mkj80fu3rt] {
    background-color: #dbeafe;
    color: #1e40af;
    border-left: 4px solid #3b82f6;
}

.announcement-warning[b-mkj80fu3rt] {
    background-color: #fef3c7;
    color: #92400e;
    border-left: 4px solid #f59e0b;
}

.announcement-critical[b-mkj80fu3rt] {
    background-color: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #ef4444;
}

.announcement-success[b-mkj80fu3rt] {
    background-color: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

:global(body[data-theme="dark"]) .announcement-info[b-mkj80fu3rt] {
    background-color: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}

:global(body[data-theme="dark"]) .announcement-warning[b-mkj80fu3rt] {
    background-color: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
}

:global(body[data-theme="dark"]) .announcement-critical[b-mkj80fu3rt] {
    background-color: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

:global(body[data-theme="dark"]) .announcement-success[b-mkj80fu3rt] {
    background-color: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
}
/* /Components/Shared/LanguageSelector.razor.rz.scp.css */
.language-selector[b-utmq1rzoe9] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
}

.language-selector:hover[b-utmq1rzoe9] {
    color: var(--itamfy-primary) !important;
    text-decoration: none !important;
}

.language-selector:global(.btn-link)[b-utmq1rzoe9] {
    color: var(--text-secondary) !important;
    text-decoration: none !important;
}

.language-selector:global(.btn-link):hover[b-utmq1rzoe9] {
    color: var(--itamfy-primary) !important;
    text-decoration: none !important;
}

.language-code[b-utmq1rzoe9] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--itamfy-primary);
    color: white;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    min-width: 1.5rem;
    text-align: center;
}

/* Row wrapper is authored in this component, so it keeps the scoped attribute and lays out as a
   flex row inside the Bootstrap dropdown menu. The check icon is pushed to the right with the
   global .ms-auto class. */
.language-item-row[b-utmq1rzoe9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.language-option[b-utmq1rzoe9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.language-option-code[b-utmq1rzoe9] {
    font-size: 0.7rem;
    font-weight: 600;
    background-color: var(--gray-500);
    color: white;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    min-width: 1.5rem;
    text-align: center;
}

.language-option-name[b-utmq1rzoe9] {
    font-size: 0.875rem;
}

.dropdown-item[b-utmq1rzoe9] {
    display: flex;
    align-items: center;
}

/* Selected language: use a subtle neutral row highlight (works in light AND dark) and a solid
   brand-coloured code badge with white text, so the code stays high-contrast in both themes. */
.dropdown-item.active[b-utmq1rzoe9] {
    background: var(--bg-hover);
}

.dropdown-item.active .language-option-code[b-utmq1rzoe9] {
    background-color: var(--itamfy-primary);
    color: #ffffff;
}
/* /Components/Shared/RateLimitedOverlay.razor.rz.scp.css */
.rate-limited-overlay[b-hd8r5f1vnp] {
    padding: 2rem 0;
}

.skeleton-container[b-hd8r5f1vnp] {
    max-width: 500px;
    margin: 1.5rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skeleton-line[b-hd8r5f1vnp] {
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--skeleton-base, #e0e6ed) 25%, var(--skeleton-shine, #f0f3f7) 50%, var(--skeleton-base, #e0e6ed) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-hd8r5f1vnp 1.5s ease-in-out infinite;
}

.skeleton-line-long[b-hd8r5f1vnp] {
    width: 100%;
}

.skeleton-line-medium[b-hd8r5f1vnp] {
    width: 75%;
}

.skeleton-line-short[b-hd8r5f1vnp] {
    width: 50%;
}

@keyframes skeleton-shimmer-b-hd8r5f1vnp {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

:global(body[data-theme="dark"]) .skeleton-line[b-hd8r5f1vnp] {
    --skeleton-base: #3a3f46;
    --skeleton-shine: #4a5058;
}