/* _content/PKFAPI/Components/Account/Pages/Login.razor.rz.scp.css */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
/* _content/PKFAPI/Components/Pages/CustomerDetail.razor.rz.scp.css */
/* Customer Detail Container */
.customer-detail-container[b-51g2xhzvyq] {
    min-height: 100vh;
    animation: fadeIn-b-51g2xhzvyq 0.5s ease-out;
    position: relative;
    background: var(--bg-primary);
}

@keyframes fadeIn-b-51g2xhzvyq {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Detail Header - Enhanced with stunning gradient and animations */
.detail-header[b-51g2xhzvyq] {
    background: linear-gradient(135deg, #9B8FFF 0%, #FF8FA3 50%, #7DD3C0 100%);
    padding: var(--spacing-6) 0;
    margin: calc(var(--spacing-8) * -1) calc(var(--spacing-8) * -1) var(--spacing-8);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(155, 143, 255, 0.2);
}

    .detail-header[b-51g2xhzvyq]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 120%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
        animation: float-b-51g2xhzvyq 25s ease-in-out infinite;
    }

    .detail-header[b-51g2xhzvyq]::after {
        content: '';
        position: absolute;
        bottom: -50%;
        left: -10%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(125, 211, 192, 0.2) 0%, transparent 60%);
        animation: floatReverse-b-51g2xhzvyq 30s ease-in-out infinite;
    }

@keyframes float-b-51g2xhzvyq {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(-30px, 30px) rotate(120deg);
    }

    66% {
        transform: translate(20px, -20px) rotate(240deg);
    }
}

@keyframes floatReverse-b-51g2xhzvyq {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(30px, -30px) rotate(-120deg);
    }

    66% {
        transform: translate(-20px, 20px) rotate(-240deg);
    }
}

.header-content[b-51g2xhzvyq] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-8);
    position: relative;
    z-index: 1;
}

/* Breadcrumb */
.breadcrumb[b-51g2xhzvyq] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
    font-size: 0.875rem;
}

    .breadcrumb a[b-51g2xhzvyq] {
        color: var(--text-on-primary);
        text-decoration: none;
        font-weight: 500;
        transition: var(--transition-fast);
        opacity: 0.9;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

        .breadcrumb a:hover[b-51g2xhzvyq] {
            opacity: 1;
            text-decoration: underline;
            transform: translateX(2px);
        }

    .breadcrumb i[b-51g2xhzvyq] {
        font-size: 0.75rem;
        color: var(--text-on-primary);
        opacity: 0.7;
    }

    .breadcrumb span[b-51g2xhzvyq] {
        color: var(--text-on-primary);
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

/* Header Main */
.header-main[b-51g2xhzvyq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-info[b-51g2xhzvyq] {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
}

/* Customer Avatar - Enhanced with gradient and animations */
.customer-avatar-large[b-51g2xhzvyq] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-600);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), inset 0 2px 4px rgba(255, 255, 255, 0.5);
    animation: avatarFloat-b-51g2xhzvyq 3s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

    .customer-avatar-large[b-51g2xhzvyq]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        transform: rotate(45deg);
        animation: shimmer-b-51g2xhzvyq 3s ease-in-out infinite;
    }

@keyframes avatarFloat-b-51g2xhzvyq {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-5px) scale(1.02);
    }
}

@keyframes shimmer-b-51g2xhzvyq {
    0% {
        transform: translateX(-200%) translateY(-200%) rotate(45deg);
    }

    100% {
        transform: translateX(200%) translateY(200%) rotate(45deg);
    }
}

.customer-details h1[b-51g2xhzvyq] {
    margin: 0 0 var(--spacing-2) 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-on-primary);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.02em;
}

.customer-meta[b-51g2xhzvyq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-4);
}

.meta-item[b-51g2xhzvyq] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--text-on-primary);
    font-size: 0.875rem;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

    .meta-item i[b-51g2xhzvyq] {
        font-size: 1rem;
        opacity: 0.8;
    }

/* Badges - Enhanced */
.badge[b-51g2xhzvyq] {
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
}

    .badge.active[b-51g2xhzvyq] {
        background: rgba(255, 255, 255, 0.2);
        color: var(--text-on-primary);
        border: 1px solid rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(10px);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .badge.inactive[b-51g2xhzvyq] {
        background: rgba(0, 0, 0, 0.1);
        color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.2);
    }

    .badge.scim[b-51g2xhzvyq] {
        background: rgba(255, 255, 255, 0.2);
        color: var(--text-on-primary);
        border: 1px solid rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(10px);
    }

/* Header Actions */
.header-actions[b-51g2xhzvyq] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.btn-action[b-51g2xhzvyq] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    background: white;
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

    .btn-action[b-51g2xhzvyq]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: radial-gradient(circle, rgba(155, 143, 255, 0.1) 0%, transparent 70%);
        transition: all 0.5s ease;
        transform: translate(-50%, -50%);
    }

    .btn-action:hover[b-51g2xhzvyq]::before {
        width: 300px;
        height: 300px;
    }

    .btn-action:hover:not(:disabled)[b-51g2xhzvyq] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .btn-action:disabled[b-51g2xhzvyq] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-action.primary[b-51g2xhzvyq] {
        background: var(--gradient-primary);
        color: var(--text-on-primary);
    }

    .btn-action.success[b-51g2xhzvyq] {
        background: var(--gradient-success);
        color: var(--text-on-primary);
    }

    .btn-action.warning[b-51g2xhzvyq] {
        color: var(--warning-600);
        background: white;
        border-color: var(--warning-200);
    }

        .btn-action.warning:hover:not(:disabled)[b-51g2xhzvyq] {
            background: var(--warning-50);
            border-color: var(--warning-300);
            color: var(--warning-700);
        }

/* Statistics Grid - Enhanced with better animations */
.stats-grid[b-51g2xhzvyq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
    position: relative;
    z-index: 10;
}

.stat-card[b-51g2xhzvyq] {
    position: relative;
    padding: var(--spacing-5);
    border-radius: var(--radius-xl);
    color: var(--text-on-primary);
    overflow: hidden;
    transition: var(--transition-base);
    animation: slideUp-b-51g2xhzvyq 0.5s ease-out backwards;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    transform-style: preserve-3d;
    perspective: 1000px;
}

    .stat-card[b-51g2xhzvyq]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .stat-card:hover[b-51g2xhzvyq]::before {
        opacity: 1;
    }

    .stat-card:nth-child(1)[b-51g2xhzvyq] {
        animation-delay: 0.1s;
    }

    .stat-card:nth-child(2)[b-51g2xhzvyq] {
        animation-delay: 0.2s;
    }

    .stat-card:nth-child(3)[b-51g2xhzvyq] {
        animation-delay: 0.3s;
    }

    .stat-card:nth-child(4)[b-51g2xhzvyq] {
        animation-delay: 0.4s;
    }

@keyframes slideUp-b-51g2xhzvyq {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.stat-card:hover[b-51g2xhzvyq] {
    transform: translateY(-5px) rotateX(-5deg);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.stat-card.gradient-primary[b-51g2xhzvyq] {
    background: var(--gradient-primary);
}

.stat-card.gradient-secondary[b-51g2xhzvyq] {
    background: var(--gradient-secondary);
}

.stat-card.gradient-tertiary[b-51g2xhzvyq] {
    background: var(--gradient-tertiary);
}

.stat-card.gradient-info[b-51g2xhzvyq] {
    background: var(--gradient-info);
}

.stat-icon[b-51g2xhzvyq] {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    animation: iconPulse-b-51g2xhzvyq 2s ease-in-out infinite;
}

@keyframes iconPulse-b-51g2xhzvyq {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.stat-content[b-51g2xhzvyq] {
    flex: 1;
}

.stat-value[b-51g2xhzvyq] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--spacing-1);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    animation: countUp-b-51g2xhzvyq 1s ease-out;
}

@keyframes countUp-b-51g2xhzvyq {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-label[b-51g2xhzvyq] {
    font-size: 0.875rem;
    opacity: 0.9;
    font-weight: 500;
}

/* Content Tabs - Enhanced */
.content-tabs[b-51g2xhzvyq] {
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
    z-index: 10;
}

.tabs-header[b-51g2xhzvyq] {
    display: flex;
    align-items: center;
    background: var(--bg-tertiary);
    border-bottom: 2px solid var(--border-secondary);
    padding: 0 var(--spacing-6);
    overflow-x: auto;
    scrollbar-width: none;
}

    .tabs-header[b-51g2xhzvyq]::-webkit-scrollbar {
        display: none;
    }

.tab-btn[b-51g2xhzvyq] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4) var(--spacing-5);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
    white-space: nowrap;
}

    .tab-btn[b-51g2xhzvyq]::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 50%;
        width: 0;
        height: 3px;
        background: var(--gradient-primary);
        transition: var(--transition-base);
        transform: translateX(-50%);
    }

    .tab-btn:hover[b-51g2xhzvyq] {
        color: var(--text-primary);
        background: var(--bg-secondary);
    }

    .tab-btn.active[b-51g2xhzvyq] {
        color: var(--primary-600);
        background: white;
    }

        .tab-btn.active[b-51g2xhzvyq]::after {
            width: 100%;
        }

    .tab-btn i[b-51g2xhzvyq] {
        font-size: 1.125rem;
        transition: var(--transition-fast);
    }

    .tab-btn:hover i[b-51g2xhzvyq] {
        transform: scale(1.1);
    }

.tab-badge[b-51g2xhzvyq] {
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--bg-quaternary);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
    transition: var(--transition-fast);
}

.tab-btn.active .tab-badge[b-51g2xhzvyq] {
    background: var(--gradient-primary);
    color: var(--text-on-primary);
    animation: badgePop-b-51g2xhzvyq 0.3s ease-out;
}

@keyframes badgePop-b-51g2xhzvyq {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.tab-content[b-51g2xhzvyq] {
    padding: var(--spacing-6);
    animation: tabContentFade-b-51g2xhzvyq 0.3s ease-out;
}

@keyframes tabContentFade-b-51g2xhzvyq {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tab Toolbar */
.tab-toolbar[b-51g2xhzvyq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

    .tab-toolbar h3[b-51g2xhzvyq] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

/* Request Filters */
.request-filters[b-51g2xhzvyq] {
    display: flex;
    gap: var(--spacing-3);
}

    .request-filters select[b-51g2xhzvyq] {
        padding: var(--spacing-3) var(--spacing-4);
        background: white;
        border: 2px solid var(--border-secondary);
        border-radius: var(--radius-lg);
        font-size: 0.875rem;
        color: var(--text-primary);
        cursor: pointer;
        transition: var(--transition-base);
    }

        .request-filters select:focus[b-51g2xhzvyq] {
            outline: none;
            border-color: var(--primary-400);
            box-shadow: 0 0 0 3px var(--pastel-lavender);
        }

/* Add Button */
.btn-add[b-51g2xhzvyq] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    background: var(--gradient-secondary);
    border: none;
    border-radius: var(--radius-xl);
    color: var(--text-on-primary);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

    .btn-add[b-51g2xhzvyq]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: all 0.5s ease;
        opacity: 0;
    }

    .btn-add:hover[b-51g2xhzvyq]::before {
        opacity: 1;
        animation: rotateGlow-b-51g2xhzvyq 1s linear;
    }

@keyframes rotateGlow-b-51g2xhzvyq {
    from {
        transform: rotate(45deg);
    }

    to {
        transform: rotate(405deg);
    }
}

.btn-add:hover[b-51g2xhzvyq] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--glow-secondary);
}

/* Organizations Tab */
.organizations-grid[b-51g2xhzvyq] {
    display: grid;
    gap: var(--spacing-4);
}

.organization-card[b-51g2xhzvyq] {
    background: var(--bg-secondary);
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: var(--transition-base);
}

    .organization-card:hover[b-51g2xhzvyq] {
        border-color: var(--pastel-lavender);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.org-header[b-51g2xhzvyq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-5);
    cursor: pointer;
    transition: var(--transition-fast);
}

    .org-header:hover[b-51g2xhzvyq] {
        background: var(--pastel-lavender-light);
    }

.org-info[b-51g2xhzvyq] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.org-icon[b-51g2xhzvyq] {
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-primary);
    font-size: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.org-details h4[b-51g2xhzvyq] {
    margin: 0 0 var(--spacing-1) 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.org-id[b-51g2xhzvyq] {
    font-size: 0.875rem;
    color: var(--text-tertiary);
}

.org-actions[b-51g2xhzvyq] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.action-btn[b-51g2xhzvyq] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .action-btn:hover[b-51g2xhzvyq] {
        background: var(--pastel-mint);
        color: var(--accent-mint-dark);
        transform: scale(1.1);
    }

    .action-btn.danger:hover[b-51g2xhzvyq] {
        background: var(--danger-50);
        color: var(--danger-600);
    }

.expand-toggle[b-51g2xhzvyq] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .expand-toggle i[b-51g2xhzvyq] {
        transition: transform 0.3s ease;
    }

.organization-card.expanded .expand-toggle i[b-51g2xhzvyq] {
    transform: rotate(180deg);
}

/* Organization Expanded Content */
.org-content[b-51g2xhzvyq] {
    padding: 0 var(--spacing-5) var(--spacing-5);
    animation: expandContent-b-51g2xhzvyq 0.3s ease-out;
}

@keyframes expandContent-b-51g2xhzvyq {
    from {
        opacity: 0;
        max-height: 0;
    }

    to {
        opacity: 1;
        max-height: 500px;
    }
}

.org-stats[b-51g2xhzvyq] {
    display: flex;
    gap: var(--spacing-6);
    padding: var(--spacing-4) 0;
    border-top: 1px solid var(--border-secondary);
    border-bottom: 1px solid var(--border-secondary);
    margin-bottom: var(--spacing-4);
}

.stat-item[b-51g2xhzvyq] {
    text-align: center;
    flex: 1;
}

    .stat-item .stat-label[b-51g2xhzvyq] {
        display: block;
        font-size: 0.75rem;
        color: var(--text-tertiary);
        text-transform: uppercase;
        margin-bottom: var(--spacing-1);
    }

    .stat-item .stat-value[b-51g2xhzvyq] {
        display: block;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-600);
    }

.org-service-desks h5[b-51g2xhzvyq] {
    margin: 0 0 var(--spacing-3) 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.service-desks-list[b-51g2xhzvyq] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.sd-item[b-51g2xhzvyq] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
}

    .sd-item:hover[b-51g2xhzvyq] {
        background: var(--pastel-mint-light);
        transform: translateX(4px);
    }

    .sd-item i[b-51g2xhzvyq] {
        color: var(--accent-mint);
    }

.sd-key[b-51g2xhzvyq] {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* Service Desks Tab */
.service-desks-grid[b-51g2xhzvyq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-4);
}

.service-desk-card[b-51g2xhzvyq] {
    background: var(--bg-secondary);
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

    .service-desk-card[b-51g2xhzvyq]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gradient-secondary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .service-desk-card:hover[b-51g2xhzvyq]::before {
        transform: scaleX(1);
    }

    .service-desk-card:hover[b-51g2xhzvyq] {
        border-color: var(--accent-mint);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.sd-header[b-51g2xhzvyq] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.sd-icon[b-51g2xhzvyq] {
    width: 48px;
    height: 48px;
    background: var(--gradient-secondary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-primary);
    font-size: 1.25rem;
    animation: float-b-51g2xhzvyq 3s ease-in-out infinite;
}

.sd-info[b-51g2xhzvyq] {
    flex: 1;
}

    .sd-info h4[b-51g2xhzvyq] {
        margin: 0 0 var(--spacing-1) 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.unlink-btn[b-51g2xhzvyq] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-danger-bg);
    border: 1px solid var(--btn-danger-border);
    border-radius: var(--radius-md);
    color: var(--btn-danger-text);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .unlink-btn:hover[b-51g2xhzvyq] {
        background: var(--btn-danger-hover-bg);
        border-color: var(--btn-danger-hover-border);
        color: var(--btn-danger-hover-text);
        transform: scale(1.1);
        box-shadow: var(--shadow-sm);
    }

.sd-stats[b-51g2xhzvyq] {
    display: flex;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-4) 0;
    border-top: 1px solid var(--border-secondary);
    border-bottom: 1px solid var(--border-secondary);
}

.sd-stat[b-51g2xhzvyq] {
    text-align: center;
    flex: 1;
}

    .sd-stat .stat-value[b-51g2xhzvyq] {
        display: block;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--accent-mint);
        margin-bottom: var(--spacing-1);
    }

    .sd-stat .stat-label[b-51g2xhzvyq] {
        font-size: 0.75rem;
        color: var(--text-tertiary);
        text-transform: uppercase;
    }

.sd-actions[b-51g2xhzvyq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-link[b-51g2xhzvyq] {
    background: none;
    border: none;
    color: var(--primary-500);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: var(--transition-fast);
    padding: var(--spacing-2) 0;
}

    .btn-link:hover[b-51g2xhzvyq] {
        color: var(--primary-600);
        transform: translateX(2px);
    }

/* Requests Tab */
.requests-table[b-51g2xhzvyq] {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

    .requests-table table[b-51g2xhzvyq] {
        width: 100%;
        border-collapse: collapse;
    }

    .requests-table th[b-51g2xhzvyq] {
        text-align: left;
        padding: var(--spacing-3) var(--spacing-4);
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 2px solid var(--border-secondary);
        background: var(--bg-tertiary);
    }

    .requests-table td[b-51g2xhzvyq] {
        padding: var(--spacing-4);
        border-bottom: 1px solid var(--border-secondary);
        font-size: 0.875rem;
    }

    .requests-table tr[b-51g2xhzvyq] {
        transition: var(--transition-fast);
    }

        .requests-table tr:hover[b-51g2xhzvyq] {
            background: var(--pastel-pink-light);
        }

.request-key[b-51g2xhzvyq] {
    font-weight: 600;
    color: var(--primary-600);
    font-family: 'Courier New', monospace;
}

.request-summary[b-51g2xhzvyq] {
    color: var(--text-primary);
    font-weight: 500;
}

.request-status[b-51g2xhzvyq] {
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

    .request-status.status-open[b-51g2xhzvyq] {
        background: var(--info-100);
        color: var(--info-700);
    }

    .request-status.status-waiting[b-51g2xhzvyq] {
        background: var(--warning-100);
        color: var(--warning-700);
    }

    .request-status.status-closed[b-51g2xhzvyq] {
        background: var(--success-100);
        color: var(--success-700);
    }

    .request-status.status-default[b-51g2xhzvyq] {
        background: var(--gray-100);
        color: var(--gray-700);
    }

.table-actions[b-51g2xhzvyq] {
    display: flex;
    gap: var(--spacing-2);
}

.action-btn.small[b-51g2xhzvyq] {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
}

.pagination-simple[b-51g2xhzvyq] {
    text-align: center;
    margin-top: var(--spacing-4);
}

/* Properties Tab */
.properties-list[b-51g2xhzvyq] {
    display: grid;
    gap: var(--spacing-4);
}

.property-item[b-51g2xhzvyq] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

    .property-item[b-51g2xhzvyq]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--gradient-tertiary);
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform 0.3s ease;
    }

    .property-item:hover[b-51g2xhzvyq]::before {
        transform: scaleY(1);
    }

    .property-item:hover[b-51g2xhzvyq] {
        border-color: var(--pastel-lavender);
        box-shadow: var(--shadow-sm);
        transform: translateX(4px);
    }

.property-header[b-51g2xhzvyq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-3);
}

.property-key[b-51g2xhzvyq] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9375rem;
}

.property-actions[b-51g2xhzvyq] {
    display: flex;
    gap: var(--spacing-2);
}

.property-value[b-51g2xhzvyq] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    word-break: break-word;
}

.json-value[b-51g2xhzvyq] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
    font-family: 'Courier New', monospace;
    font-size: 0.8125rem;
    overflow-x: auto;
    white-space: pre;
}

.property-meta[b-51g2xhzvyq] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

    .property-meta i[b-51g2xhzvyq] {
        font-size: 0.875rem;
    }

/* Activity Tab */
.activity-filter[b-51g2xhzvyq] {
    padding: var(--spacing-3) var(--spacing-4);
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-base);
}

    .activity-filter:focus[b-51g2xhzvyq] {
        outline: none;
        border-color: var(--primary-400);
        box-shadow: 0 0 0 3px var(--pastel-lavender);
    }

.activity-summary[b-51g2xhzvyq] {
    margin-bottom: var(--spacing-6);
}

.summary-card[b-51g2xhzvyq] {
    background: var(--gradient-soft);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    margin-bottom: var(--spacing-6);
    color: var(--text-primary);
}

    .summary-card h4[b-51g2xhzvyq] {
        margin: 0 0 var(--spacing-4) 0;
        font-size: 1.125rem;
        font-weight: 600;
    }

.summary-stats[b-51g2xhzvyq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-4);
}

    .summary-stats .stat[b-51g2xhzvyq] {
        text-align: center;
    }

        .summary-stats .stat .value[b-51g2xhzvyq] {
            display: block;
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-600);
            margin-bottom: var(--spacing-1);
        }

        .summary-stats .stat .label[b-51g2xhzvyq] {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

/* Activity Timeline */
.activity-timeline[b-51g2xhzvyq] {
    position: relative;
}

    .activity-timeline h4[b-51g2xhzvyq] {
        margin: 0 0 var(--spacing-4) 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.timeline-item[b-51g2xhzvyq] {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    position: relative;
    padding-left: var(--spacing-10);
    animation: timelineFade-b-51g2xhzvyq 0.5s ease-out backwards;
}

    .timeline-item:nth-child(odd)[b-51g2xhzvyq] {
        animation-delay: 0.1s;
    }

    .timeline-item:nth-child(even)[b-51g2xhzvyq] {
        animation-delay: 0.2s;
    }

@keyframes timelineFade-b-51g2xhzvyq {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.timeline-item[b-51g2xhzvyq]::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 40px;
    bottom: -20px;
    width: 2px;
    background: var(--border-secondary);
}

.timeline-item:last-child[b-51g2xhzvyq]::before {
    display: none;
}

.timeline-icon[b-51g2xhzvyq] {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: white;
    border: 2px solid var(--border-secondary);
    transition: var(--transition-fast);
}

    .timeline-icon.icon-primary[b-51g2xhzvyq] {
        background: var(--primary-100);
        color: var(--primary-600);
        border-color: var(--primary-200);
    }

    .timeline-icon.icon-success[b-51g2xhzvyq] {
        background: var(--success-100);
        color: var(--success-600);
        border-color: var(--success-200);
    }

    .timeline-icon.icon-info[b-51g2xhzvyq] {
        background: var(--info-100);
        color: var(--info-600);
        border-color: var(--info-200);
    }

    .timeline-icon.icon-secondary[b-51g2xhzvyq] {
        background: var(--secondary-100);
        color: var(--secondary-600);
        border-color: var(--secondary-200);
    }

    .timeline-icon.icon-tertiary[b-51g2xhzvyq] {
        background: var(--warning-100);
        color: var(--warning-600);
        border-color: var(--warning-200);
    }

    .timeline-icon.icon-default[b-51g2xhzvyq] {
        background: var(--gray-100);
        color: var(--gray-600);
        border-color: var(--gray-200);
    }

.timeline-content[b-51g2xhzvyq] {
    flex: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    transition: var(--transition-fast);
}

    .timeline-content:hover[b-51g2xhzvyq] {
        border-color: var(--pastel-lavender);
        box-shadow: var(--shadow-sm);
    }

.timeline-header[b-51g2xhzvyq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-2);
}

.activity-title[b-51g2xhzvyq] {
    font-weight: 600;
    color: var(--text-primary);
}

.activity-time[b-51g2xhzvyq] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.activity-description[b-51g2xhzvyq] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-2);
}

.activity-related[b-51g2xhzvyq] {
    display: flex;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}

.related-link[b-51g2xhzvyq] {
    color: var(--primary-500);
    font-size: 0.875rem;
    text-decoration: none;
    transition: var(--transition-fast);
}

    .related-link:hover[b-51g2xhzvyq] {
        color: var(--primary-600);
        text-decoration: underline;
    }

/* Empty States - Enhanced */
.empty-tab[b-51g2xhzvyq] {
    padding: var(--spacing-12);
    text-align: center;
    color: var(--text-tertiary);
    animation: emptyFade-b-51g2xhzvyq 0.5s ease-out;
}

@keyframes emptyFade-b-51g2xhzvyq {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.empty-tab > i[b-51g2xhzvyq] {
    font-size: 4rem;
    margin-bottom: var(--spacing-4);
    display: block;
    color: var(--pastel-lavender-dark);
    animation: iconFloat 3s ease-in-out infinite;
}

.empty-tab h4[b-51g2xhzvyq] {
    margin: 0 0 var(--spacing-2) 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.empty-tab p[b-51g2xhzvyq] {
    margin: 0 0 var(--spacing-6) 0;
    color: var(--text-secondary);
}

/* Loading States */
.loading-container[b-51g2xhzvyq] {
    padding: var(--spacing-12);
    text-align: center;
}

.loading-spinner[b-51g2xhzvyq] {
    font-size: 3rem;
    color: var(--primary-500);
    margin-bottom: var(--spacing-4);
    animation: spin-b-51g2xhzvyq 1s linear infinite;
}

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

/* Not Found */
.not-found[b-51g2xhzvyq] {
    padding: var(--spacing-12);
    text-align: center;
    animation: fadeIn-b-51g2xhzvyq 0.5s ease-out;
}

.not-found-icon[b-51g2xhzvyq] {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--spacing-6);
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: white;
    box-shadow: var(--shadow-lg), var(--glow-primary);
    animation: iconPulse-b-51g2xhzvyq 2s ease-in-out infinite;
}

.not-found h3[b-51g2xhzvyq] {
    margin: 0 0 var(--spacing-3) 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.not-found p[b-51g2xhzvyq] {
    margin: 0 0 var(--spacing-6) 0;
    color: var(--text-secondary);
}

/* Button Styles */
.btn-primary[b-51g2xhzvyq] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    background: var(--gradient-primary);
    color: var(--text-on-primary);
    border: none;
    border-radius: var(--radius-xl);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

    .btn-primary[b-51g2xhzvyq]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.5s ease, height 0.5s ease;
    }

    .btn-primary:hover[b-51g2xhzvyq]::before {
        width: 300px;
        height: 300px;
    }

    .btn-primary:hover[b-51g2xhzvyq] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg), var(--glow-primary);
    }

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

    .service-desks-grid[b-51g2xhzvyq] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .detail-header[b-51g2xhzvyq] {
        padding: var(--spacing-5) 0;
    }

    .header-main[b-51g2xhzvyq] {
        flex-direction: column;
        gap: var(--spacing-4);
    }

    .header-info[b-51g2xhzvyq] {
        flex-direction: column;
        text-align: center;
    }

    .customer-details h1[b-51g2xhzvyq] {
        font-size: 1.5rem;
    }

    .header-actions[b-51g2xhzvyq] {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .stats-grid[b-51g2xhzvyq] {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

    .tabs-header[b-51g2xhzvyq] {
        overflow-x: auto;
        padding: 0;
    }

    .tab-btn[b-51g2xhzvyq] {
        white-space: nowrap;
        padding: var(--spacing-3) var(--spacing-4);
    }

        .tab-btn span:not(.tab-badge)[b-51g2xhzvyq] {
            display: none;
        }

        .tab-btn i[b-51g2xhzvyq] {
            font-size: 1.25rem;
        }

    .tab-toolbar[b-51g2xhzvyq] {
        flex-direction: column;
        gap: var(--spacing-3);
        align-items: stretch;
    }

    .request-filters[b-51g2xhzvyq] {
        flex-direction: column;
        width: 100%;
    }

        .request-filters select[b-51g2xhzvyq] {
            width: 100%;
        }

    .requests-table[b-51g2xhzvyq] {
        font-size: 0.8125rem;
    }

        .requests-table th[b-51g2xhzvyq],
        .requests-table td[b-51g2xhzvyq] {
            padding: var(--spacing-3) var(--spacing-2);
        }

    .property-header[b-51g2xhzvyq] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-2);
    }

    .service-desks-grid[b-51g2xhzvyq] {
        grid-template-columns: 1fr;
    }

    .summary-stats[b-51g2xhzvyq] {
        grid-template-columns: 1fr;
    }

    .timeline-item[b-51g2xhzvyq] {
        padding-left: var(--spacing-8);
    }

    .timeline-icon[b-51g2xhzvyq] {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }

    .timeline-item[b-51g2xhzvyq]::before {
        left: 15px;
    }
}

/* Dark Mode Adjustments */
[data-theme="dark"] .detail-header[b-51g2xhzvyq] {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-quaternary) 50%, var(--bg-tertiary) 100%);
}

[data-theme="dark"] .customer-avatar-large[b-51g2xhzvyq] {
    background: linear-gradient(135deg, rgba(155, 143, 255, 0.2) 0%, rgba(155, 143, 255, 0.1) 100%);
    color: var(--primary-400);
}

[data-theme="dark"] .content-tabs[b-51g2xhzvyq] {
    background: var(--bg-secondary);
}

[data-theme="dark"] .tabs-header[b-51g2xhzvyq] {
    background: var(--bg-quaternary);
}

[data-theme="dark"] .tab-btn.active[b-51g2xhzvyq] {
    background: var(--bg-secondary);
}

[data-theme="dark"] .organization-card[b-51g2xhzvyq] {
    background: var(--bg-tertiary);
}

    [data-theme="dark"] .organization-card:hover[b-51g2xhzvyq] {
        background: var(--bg-quaternary);
    }

[data-theme="dark"] .org-header:hover[b-51g2xhzvyq] {
    background: rgba(232, 227, 245, 0.05);
}

[data-theme="dark"] .service-desk-card[b-51g2xhzvyq] {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .requests-table tr:hover[b-51g2xhzvyq] {
    background: rgba(255, 232, 236, 0.05);
}

[data-theme="dark"] .property-item[b-51g2xhzvyq] {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .timeline-content[b-51g2xhzvyq] {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .summary-card[b-51g2xhzvyq] {
    background: linear-gradient(135deg, rgba(227, 240, 255, 0.1) 0%, rgba(245, 232, 255, 0.1) 100%);
}

[data-theme="dark"] .btn-action[b-51g2xhzvyq] {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .action-btn[b-51g2xhzvyq] {
    background: var(--bg-quaternary);
}

[data-theme="dark"] .unlink-btn[b-51g2xhzvyq] {
    background: rgba(244, 67, 54, 0.1);
    border-color: rgba(244, 67, 54, 0.2);
    color: var(--danger-400);
}

    [data-theme="dark"] .unlink-btn:hover[b-51g2xhzvyq] {
        background: rgba(244, 67, 54, 0.2);
        border-color: rgba(244, 67, 54, 0.3);
        color: var(--danger-300);
    }

/* Print Styles */
@media print {
    .detail-header[b-51g2xhzvyq] {
        background: none;
        color: black;
    }

    .btn-action[b-51g2xhzvyq],
    .btn-add[b-51g2xhzvyq],
    .action-btn[b-51g2xhzvyq],
    .expand-toggle[b-51g2xhzvyq],
    .tabs-header[b-51g2xhzvyq] {
        display: none !important;
    }

    .stat-card[b-51g2xhzvyq] {
        background: white;
        border: 1px solid #ddd;
        color: black;
    }

    .content-tabs[b-51g2xhzvyq] {
        box-shadow: none;
    }

    .tab-content > div[b-51g2xhzvyq] {
        display: block !important;
    }
}
/* _content/PKFAPI/Components/Pages/Customers.razor.rz.scp.css */
/* Customers Container */
.customers-container[b-500hg4ei5q] {
    min-height: 100vh;
    animation: fadeIn-b-500hg4ei5q 0.5s ease-out;
    position: relative;
    background: var(--bg-primary);
}

/* Animated Background */
.animated-background[b-500hg4ei5q] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

    .animated-background[b-500hg4ei5q]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 25% 25%, var(--pastel-pink-light) 0%, transparent 40%), radial-gradient(circle at 75% 75%, var(--pastel-mint-light) 0%, transparent 40%), radial-gradient(circle at 50% 50%, var(--pastel-lavender-light) 0%, transparent 60%);
        opacity: 0.7;
    }

.floating-shape[b-500hg4ei5q] {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    animation: float-b-500hg4ei5q 20s infinite ease-in-out;
}

.shape-1[b-500hg4ei5q] {
    width: 400px;
    height: 400px;
    background: var(--pastel-pink);
    top: -200px;
    left: -200px;
    animation-duration: 25s;
}

.shape-2[b-500hg4ei5q] {
    width: 300px;
    height: 300px;
    background: var(--pastel-mint);
    top: 50%;
    right: -150px;
    animation-duration: 20s;
    animation-delay: -5s;
}

.shape-3[b-500hg4ei5q] {
    width: 500px;
    height: 500px;
    background: var(--pastel-lavender);
    bottom: -250px;
    left: 50%;
    animation-duration: 30s;
    animation-delay: -10s;
}

.shape-4[b-500hg4ei5q] {
    width: 250px;
    height: 250px;
    background: var(--pastel-sky);
    top: 20%;
    left: 60%;
    animation-duration: 22s;
    animation-delay: -15s;
}

.shape-5[b-500hg4ei5q] {
    width: 350px;
    height: 350px;
    background: var(--pastel-peach);
    bottom: 20%;
    right: 20%;
    animation-duration: 28s;
    animation-delay: -7s;
}

@keyframes float-b-500hg4ei5q {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    25% {
        transform: translate(30px, -50px) rotate(90deg) scale(1.1);
    }

    50% {
        transform: translate(-40px, 30px) rotate(180deg) scale(0.9);
    }

    75% {
        transform: translate(50px, 50px) rotate(270deg) scale(1.05);
    }
}

/* Customers Header */
.customers-header[b-500hg4ei5q] {
    background: var(--gradient-soft);
    padding: var(--spacing-10) 0;
    margin: calc(var(--spacing-8) * -1) calc(var(--spacing-8) * -1) var(--spacing-8);
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(155, 143, 255, 0.15);
}

    .customers-header[b-500hg4ei5q]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -10%;
        width: 120%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
        animation: headerFloat-b-500hg4ei5q 20s ease-in-out infinite;
    }

    .customers-header[b-500hg4ei5q]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 120px;
        background: linear-gradient(to top, var(--bg-primary), transparent);
        pointer-events: none;
    }

@keyframes headerFloat-b-500hg4ei5q {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(40px, -40px) rotate(120deg);
    }

    66% {
        transform: translate(-30px, 30px) rotate(240deg);
    }
}

.header-particles[b-500hg4ei5q] {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.particle[b-500hg4ei5q] {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: particleFloat-b-500hg4ei5q 15s infinite linear;
}

    .particle:nth-child(1)[b-500hg4ei5q] {
        left: 10%;
        animation-delay: 0s;
        animation-duration: 20s;
    }

    .particle:nth-child(2)[b-500hg4ei5q] {
        left: 50%;
        animation-delay: 5s;
        animation-duration: 25s;
    }

    .particle:nth-child(3)[b-500hg4ei5q] {
        left: 80%;
        animation-delay: 10s;
        animation-duration: 18s;
    }

@keyframes particleFloat-b-500hg4ei5q {
    from {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    to {
        transform: translateY(-100vh) rotate(720deg);
        opacity: 0;
    }
}

.header-content[b-500hg4ei5q] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-8);
    position: relative;
    z-index: 1;
}

.header-title[b-500hg4ei5q] {
    margin-bottom: var(--spacing-6);
}

    .header-title h1[b-500hg4ei5q] {
        margin: 0 0 var(--spacing-2) 0;
        font-size: 3rem;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -0.03em;
    }

.title-main[b-500hg4ei5q] {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    filter: drop-shadow(2px 2px 4px rgba(155, 143, 255, 0.2));
}

.title-accent[b-500hg4ei5q] {
    display: inline-block;
    background: var(--gradient-secondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-left: var(--spacing-3);
    animation: titleGlow-b-500hg4ei5q 3s ease-in-out infinite;
}

@keyframes titleGlow-b-500hg4ei5q {
    0%, 100% {
        filter: drop-shadow(2px 2px 4px rgba(138, 180, 248, 0.3));
    }

    50% {
        filter: drop-shadow(2px 2px 8px rgba(138, 180, 248, 0.5));
    }
}

.header-subtitle[b-500hg4ei5q] {
    margin: 0;
    color: var(--primary-600);
    font-size: 1.125rem;
    opacity: 0.9;
    font-weight: 500;
}

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

.btn-create[b-500hg4ei5q],
.btn-import[b-500hg4ei5q],
.btn-sync[b-500hg4ei5q],
.btn-refresh[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn-create[b-500hg4ei5q] {
    background: white;
    color: var(--primary-600);
    box-shadow: var(--shadow-md);
}

    .btn-create:hover[b-500hg4ei5q] {
        background: var(--pastel-lavender-light);
        border-color: var(--pastel-lavender);
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

.btn-import[b-500hg4ei5q] {
    background: rgba(255, 255, 255, 0.9);
    color: var(--accent-mint-dark);
    backdrop-filter: blur(10px);
}

    .btn-import:hover[b-500hg4ei5q] {
        background: var(--pastel-mint-light);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.btn-sync[b-500hg4ei5q],
.btn-refresh[b-500hg4ei5q] {
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-secondary);
}

    .btn-sync:hover:not(:disabled)[b-500hg4ei5q],
    .btn-refresh:hover:not(:disabled)[b-500hg4ei5q] {
        background: white;
        color: var(--primary-600);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .btn-sync:disabled[b-500hg4ei5q],
    .btn-refresh:disabled[b-500hg4ei5q] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-sync.syncing[b-500hg4ei5q],
    .btn-refresh.refreshing[b-500hg4ei5q] {
        background: var(--gradient-primary);
        color: white;
    }

.btn-icon[b-500hg4ei5q] {
    font-size: 1.125rem;
    transition: var(--transition-base);
}

.btn-text[b-500hg4ei5q] {
    position: relative;
}

.btn-shine[b-500hg4ei5q] {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: rotate(45deg) translateX(-100%);
    transition: transform 0.6s;
}

.btn-create:hover .btn-shine[b-500hg4ei5q],
.btn-import:hover .btn-shine[b-500hg4ei5q] {
    transform: rotate(45deg) translateX(100%);
}

/* Search and Filter Section */
.search-filter-section[b-500hg4ei5q] {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-6);
    position: relative;
    z-index: 10;
    display: flex;
    gap: var(--spacing-6);
    align-items: center;
    border: 1px solid var(--border-secondary);
}

.search-wrapper[b-500hg4ei5q] {
    flex: 1;
}

.search-container[b-500hg4ei5q] {
    position: relative;
}

.search-box[b-500hg4ei5q] {
    position: relative;
}

    .search-box i[b-500hg4ei5q] {
        position: absolute;
        left: var(--spacing-4);
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-tertiary);
        pointer-events: none;
        transition: var(--transition-fast);
    }

.search-input[b-500hg4ei5q] {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-10);
    background: var(--bg-secondary);
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    transition: var(--transition-base);
    color: var(--text-primary);
}

    .search-input:focus[b-500hg4ei5q] {
        outline: none;
        border-color: var(--pastel-pink-dark);
        background: white;
        box-shadow: 0 0 0 4px var(--pastel-pink-light);
        transform: translateY(-1px);
    }

        .search-input:focus ~ i[b-500hg4ei5q] {
            color: var(--secondary-500);
            transform: translateY(-50%) scale(1.1);
        }

.search-border[b-500hg4ei5q] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    border-radius: var(--radius-full);
}

.search-input:focus ~ .search-border[b-500hg4ei5q] {
    transform: scaleX(1);
}

.search-clear[b-500hg4ei5q] {
    position: absolute;
    right: var(--spacing-3);
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: var(--text-tertiary);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 0.875rem;
}

    .search-clear:hover[b-500hg4ei5q] {
        background: var(--text-secondary);
        transform: translateY(-50%) scale(1.1);
    }

.search-loading[b-500hg4ei5q] {
    position: absolute;
    right: var(--spacing-4);
    top: 50%;
    transform: translateY(-50%);
}

.loading-dots[b-500hg4ei5q] {
    display: flex;
    gap: 4px;
}

    .loading-dots span[b-500hg4ei5q] {
        width: 6px;
        height: 6px;
        background: var(--secondary-400);
        border-radius: 50%;
        animation: dotPulse-b-500hg4ei5q 1.4s infinite ease-in-out;
    }

        .loading-dots span:nth-child(1)[b-500hg4ei5q] {
            animation-delay: -0.32s;
        }

        .loading-dots span:nth-child(2)[b-500hg4ei5q] {
            animation-delay: -0.16s;
        }

@keyframes dotPulse-b-500hg4ei5q {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.filter-actions[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.btn-filter[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--pastel-lavender-light);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    color: var(--primary-600);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    position: relative;
}

    .btn-filter:hover[b-500hg4ei5q],
    .btn-filter.active[b-500hg4ei5q] {
        background: var(--pastel-lavender);
        border-color: var(--primary-300);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

.filter-count[b-500hg4ei5q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--primary-500);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: var(--spacing-1);
    animation: badgePop-b-500hg4ei5q 0.3s ease-out;
}

@keyframes badgePop-b-500hg4ei5q {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.filter-glow[b-500hg4ei5q] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: var(--primary-400);
    border-radius: var(--radius-lg);
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.3s;
}

.btn-filter.active .filter-glow[b-500hg4ei5q] {
    opacity: 0.3;
}

.view-toggle[b-500hg4ei5q] {
    display: flex;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-1);
    gap: var(--spacing-1);
}

.view-btn[b-500hg4ei5q] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
}

    .view-btn:hover[b-500hg4ei5q] {
        color: var(--text-secondary);
    }

    .view-btn.active[b-500hg4ei5q] {
        background: white;
        color: var(--primary-600);
        box-shadow: var(--shadow-sm);
    }

.view-indicator[b-500hg4ei5q] {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 20px;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
    transition: transform 0.3s ease;
}

.view-btn.active .view-indicator[b-500hg4ei5q] {
    transform: translateX(-50%) scaleX(1);
}

/* Filters Panel */
.filters-panel[b-500hg4ei5q] {
    background: var(--bg-tertiary);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
    animation: slideDown-b-500hg4ei5q 0.3s ease-out;
    border: 1px solid var(--border-secondary);
    position: relative;
    z-index: 10;
}

@keyframes slideDown-b-500hg4ei5q {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filters-header[b-500hg4ei5q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

    .filters-header h3[b-500hg4ei5q] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

        .filters-header h3 i[b-500hg4ei5q] {
            color: var(--primary-400);
        }

.clear-filters-btn[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    background: none;
    border: none;
    color: var(--danger-600);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    border-radius: var(--radius-md);
}

    .clear-filters-btn:hover[b-500hg4ei5q] {
        background: var(--danger-50);
        transform: translateX(2px);
    }

.filters-grid[b-500hg4ei5q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
}

.filter-group[b-500hg4ei5q] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

    .filter-group label[b-500hg4ei5q] {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

        .filter-group label i[b-500hg4ei5q] {
            font-size: 0.875rem;
            color: var(--primary-400);
        }

.filter-select[b-500hg4ei5q] {
    padding: var(--spacing-3) var(--spacing-4);
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-base);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23718096' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-3) center;
    padding-right: var(--spacing-10);
}

    .filter-select:focus[b-500hg4ei5q] {
        outline: none;
        border-color: var(--primary-300);
        box-shadow: 0 0 0 3px var(--pastel-lavender-light);
    }

/* Summary Grid */
.summary-grid[b-500hg4ei5q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
    position: relative;
    z-index: 10;
}

.summary-card[b-500hg4ei5q] {
    position: relative;
    padding: var(--spacing-6);
    border-radius: var(--radius-2xl);
    color: white;
    overflow: hidden;
    transition: var(--transition-base);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: slideUp-b-500hg4ei5q 0.5s ease-out backwards;
}

    .summary-card:nth-child(1)[b-500hg4ei5q] {
        animation-delay: 0.1s;
    }

    .summary-card:nth-child(2)[b-500hg4ei5q] {
        animation-delay: 0.15s;
    }

    .summary-card:nth-child(3)[b-500hg4ei5q] {
        animation-delay: 0.2s;
    }

    .summary-card:nth-child(4)[b-500hg4ei5q] {
        animation-delay: 0.25s;
    }

    .summary-card:nth-child(5)[b-500hg4ei5q] {
        animation-delay: 0.3s;
    }

@keyframes slideUp-b-500hg4ei5q {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.summary-card:hover[b-500hg4ei5q] {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.summary-card.active[b-500hg4ei5q] {
    ring: 2px solid white;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2), 0 20px 40px rgba(0, 0, 0, 0.15);
}

.summary-card.gradient-primary[b-500hg4ei5q] {
    background: var(--gradient-primary);
}

.summary-card.gradient-secondary[b-500hg4ei5q] {
    background: var(--gradient-secondary);
}

.summary-card.gradient-tertiary[b-500hg4ei5q] {
    background: var(--gradient-tertiary);
}

.summary-card.gradient-warning[b-500hg4ei5q] {
    background: var(--gradient-warning);
}

.summary-card.gradient-info[b-500hg4ei5q] {
    background: var(--gradient-info);
}

.card-background[b-500hg4ei5q] {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    transform: rotate(45deg);
    transition: var(--transition-slow);
}

.summary-card:hover .card-background[b-500hg4ei5q] {
    transform: rotate(45deg) scale(1.2);
}

.card-icon[b-500hg4ei5q] {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: var(--spacing-4);
    animation: iconFloat-b-500hg4ei5q 3s ease-in-out infinite;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

@keyframes iconFloat-b-500hg4ei5q {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.card-content[b-500hg4ei5q] {
    position: relative;
    z-index: 1;
}

    .card-content h3[b-500hg4ei5q] {
        margin: 0 0 var(--spacing-3) 0;
        font-size: 0.875rem;
        font-weight: 600;
        opacity: 0.9;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

.card-value[b-500hg4ei5q] {
    position: relative;
    margin-bottom: var(--spacing-3);
}

.value-number[b-500hg4ei5q] {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.value-animation[b-500hg4ei5q] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translateX(-100%);
    animation: valueShine-b-500hg4ei5q 3s infinite;
}

@keyframes valueShine-b-500hg4ei5q {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.card-trend[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.875rem;
    opacity: 0.9;
}

    .card-trend i[b-500hg4ei5q] {
        font-size: 1rem;
    }

    .card-trend.warning[b-500hg4ei5q] {
        color: #FFE0B2;
    }

        .card-trend.warning i[b-500hg4ei5q] {
            animation: warningPulse-b-500hg4ei5q 2s infinite;
        }

@keyframes warningPulse-b-500hg4ei5q {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.card-hover-effect[b-500hg4ei5q] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.2), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.summary-card:hover .card-hover-effect[b-500hg4ei5q] {
    opacity: 1;
}

/* Bulk Actions Bar */
.bulk-actions-bar[b-500hg4ei5q] {
    position: sticky;
    top: var(--spacing-4);
    z-index: 20;
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--spacing-4) var(--spacing-6);
    margin-bottom: var(--spacing-6);
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--primary-200);
    animation: slideDown-b-500hg4ei5q 0.3s ease-out;
}

.bulk-bar-background[b-500hg4ei5q] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-primary);
    opacity: 0.05;
    border-radius: var(--radius-2xl);
}

.bulk-actions-bar[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
}

.selected-info[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.selected-icon[b-500hg4ei5q] {
    width: 40px;
    height: 40px;
    background: var(--pastel-lavender);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
    font-size: 1.25rem;
    animation: checkPulse-b-500hg4ei5q 2s infinite;
}

@keyframes checkPulse-b-500hg4ei5q {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(155, 143, 255, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(155, 143, 255, 0);
    }
}

.selected-text[b-500hg4ei5q] {
    font-weight: 600;
    color: var(--text-primary);
}

.bulk-actions[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.btn-bulk[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--bg-tertiary);
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .btn-bulk:hover[b-500hg4ei5q] {
        background: var(--pastel-lavender-light);
        border-color: var(--pastel-lavender);
        color: var(--primary-600);
        transform: translateY(-2px);
    }

    .btn-bulk.danger[b-500hg4ei5q] {
        color: var(--danger-600);
    }

        .btn-bulk.danger:hover[b-500hg4ei5q] {
            background: var(--danger-50);
            border-color: var(--danger-200);
            color: var(--danger-700);
        }

.btn-clear[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    border-radius: var(--radius-md);
}

    .btn-clear:hover[b-500hg4ei5q] {
        background: var(--bg-tertiary);
        color: var(--text-secondary);
    }

/* Customers Grid */
.customers-grid[b-500hg4ei5q] {
    display: grid;
    gap: var(--spacing-6);
    position: relative;
    z-index: 10;
}

    .customers-grid.grid[b-500hg4ei5q] {
    }

    .customers-grid.list[b-500hg4ei5q] {
        grid-template-columns: 1fr;
    }

/* Customer Card */
.customer-card[b-500hg4ei5q] {
    background: white;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    position: relative;
    border: 2px solid var(--border-secondary);
}

    .customer-card[b-500hg4ei5q]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gradient-primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .customer-card:hover[b-500hg4ei5q] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        border-color: var(--pastel-pink-light);
    }

        .customer-card:hover[b-500hg4ei5q]::before {
            transform: scaleX(1);
        }

    .customer-card.expanded[b-500hg4ei5q] {
        border-color: var(--secondary-300);
        box-shadow: 0 0 0 3px var(--pastel-pink-light), var(--shadow-xl);
    }

    .customer-card.selected[b-500hg4ei5q] {
        background: var(--pastel-lavender-light);
        border-color: var(--primary-300);
    }

.card-glow[b-500hg4ei5q] {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--pastel-pink-light) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.customer-card:hover .card-glow[b-500hg4ei5q] {
    opacity: 0.3;
}

.customer-header[b-500hg4ei5q] {
    padding: var(--spacing-6);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    cursor: pointer;
    background: var(--bg-secondary);
    transition: var(--transition-base);
}

    .customer-header:hover[b-500hg4ei5q] {
        background: var(--pastel-pink-light);
    }

.customer-checkbox[b-500hg4ei5q] {
    position: relative;
}

    .customer-checkbox input[type="checkbox"][b-500hg4ei5q] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    .customer-checkbox label[b-500hg4ei5q] {
        width: 24px;
        height: 24px;
        background: var(--bg-tertiary);
        border: 2px solid var(--border-secondary);
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: var(--transition-fast);
    }

    .customer-checkbox input[type="checkbox"]:checked ~ label[b-500hg4ei5q] {
        background: var(--gradient-primary);
        border-color: transparent;
    }

.checkbox-icon[b-500hg4ei5q] {
    opacity: 0;
    color: white;
    font-size: 0.875rem;
    transform: scale(0);
    transition: var(--transition-fast);
}

.customer-checkbox input[type="checkbox"]:checked ~ label .checkbox-icon[b-500hg4ei5q] {
    opacity: 1;
    transform: scale(1);
}

.customer-info[b-500hg4ei5q] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.customer-avatar[b-500hg4ei5q] {
    width: 56px;
    height: 56px;
    background: var(--gradient-secondary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    position: relative;
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
}

.avatar-text[b-500hg4ei5q] {
    position: relative;
    z-index: 1;
}

.avatar-ring[b-500hg4ei5q] {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: var(--radius-xl);
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s;
    animation: ringPulse-b-500hg4ei5q 2s infinite;
}

@keyframes ringPulse-b-500hg4ei5q {
    0%, 100% {
        transform: scale(1);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.3;
    }
}

.customer-card:hover .avatar-ring[b-500hg4ei5q] {
    opacity: 1;
}

.customer-details h3[b-500hg4ei5q] {
    margin: 0 0 var(--spacing-2) 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.customer-meta[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}

.email[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.875rem;
    color: var(--text-tertiary);
}

    .email i[b-500hg4ei5q] {
        font-size: 0.875rem;
        color: var(--primary-400);
    }

.timezone[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.875rem;
    color: var(--text-tertiary);
}

    .timezone i[b-500hg4ei5q] {
        font-size: 0.875rem;
        color: var(--accent-blue);
    }

.badge[b-500hg4ei5q] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: var(--transition-fast);
}

.badge-dot[b-500hg4ei5q] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: dotPulse-b-500hg4ei5q 2s infinite;
}

@keyframes dotPulse-b-500hg4ei5q {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

.badge.active[b-500hg4ei5q] {
    background: var(--success-100);
    color: var(--success-700);
    border: 1px solid var(--success-200);
}

    .badge.active .badge-dot[b-500hg4ei5q] {
        background: var(--success-500);
    }

.badge.inactive[b-500hg4ei5q] {
    background: var(--gray-100);
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
}

    .badge.inactive .badge-dot[b-500hg4ei5q] {
        background: var(--gray-400);
    }

.customer-stats[b-500hg4ei5q] {
    display: flex;
    gap: var(--spacing-4);
}

.stat[b-500hg4ei5q] {
    text-align: center;
    position: relative;
    padding: var(--spacing-2);
    transition: var(--transition-fast);
}

    .stat:hover[b-500hg4ei5q] {
        transform: translateY(-2px);
    }

.stat-value[b-500hg4ei5q] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-600);
    margin-bottom: var(--spacing-1);
}

.stat-label[b-500hg4ei5q] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat.warning .stat-value[b-500hg4ei5q] {
    color: var(--warning-600);
}

.stat-bg[b-500hg4ei5q] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--pastel-lavender-light);
    border-radius: var(--radius-md);
    opacity: 0;
    transform: scale(0.8);
    transition: var(--transition-fast);
}

.stat:hover .stat-bg[b-500hg4ei5q] {
    opacity: 1;
    transform: scale(1);
}

.customer-actions[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.action-btn[b-500hg4ei5q] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
}

    .action-btn:hover[b-500hg4ei5q] {
        background: var(--pastel-mint-light);
        color: var(--accent-mint);
        transform: scale(1.1);
    }

.action-tooltip[b-500hg4ei5q] {
    position: absolute;
    bottom: calc(100% + var(--spacing-2));
    left: 50%;
    transform: translateX(-50%);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.action-btn:hover .action-tooltip[b-500hg4ei5q] {
    opacity: 1;
}

.expand-toggle[b-500hg4ei5q] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pastel-lavender-light);
    border: none;
    border-radius: var(--radius-lg);
    color: var(--primary-600);
    font-size: 1.125rem;
    cursor: pointer;
    transition: var(--transition-base);
    position: relative;
}

    .expand-toggle:hover[b-500hg4ei5q] {
        background: var(--pastel-lavender);
        transform: scale(1.1);
    }

.expand-bg[b-500hg4ei5q] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    opacity: 0;
    transform: scale(0);
    transition: var(--transition-base);
}

.expand-toggle:hover .expand-bg[b-500hg4ei5q] {
    opacity: 0.1;
    transform: scale(1);
}

/* Customer Content */
.customer-content[b-500hg4ei5q] {
    animation: expandContent-b-500hg4ei5q 0.3s ease-out;
    border-top: 1px solid var(--border-secondary);
}

@keyframes expandContent-b-500hg4ei5q {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-section[b-500hg4ei5q] {
    padding: var(--spacing-6);
    border-bottom: 1px solid var(--border-secondary);
    display: flex;
    gap: var(--spacing-4);
}

    .content-section:last-child[b-500hg4ei5q] {
        border-bottom: none;
    }

.section-icon[b-500hg4ei5q] {
    width: 48px;
    height: 48px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.organizations-section .section-icon[b-500hg4ei5q] {
    background: var(--pastel-lavender-light);
    color: var(--primary-500);
}

.service-desks-section .section-icon[b-500hg4ei5q] {
    background: var(--pastel-sky-light);
    color: var(--accent-blue);
}

.requests-section .section-icon[b-500hg4ei5q] {
    background: var(--pastel-mint-light);
    color: var(--accent-mint);
}

.properties-section .section-icon[b-500hg4ei5q] {
    background: var(--pastel-lilac-light);
    color: var(--accent-purple);
}

.section-content[b-500hg4ei5q] {
    flex: 1;
}

.subsection-header[b-500hg4ei5q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

    .subsection-header h4[b-500hg4ei5q] {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

        .subsection-header h4 i[b-500hg4ei5q] {
            font-size: 0.875rem;
            color: var(--primary-400);
        }

.count-badge[b-500hg4ei5q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--pastel-lavender);
    color: var(--primary-600);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: var(--spacing-2);
}

.btn-link[b-500hg4ei5q] {
    background: none;
    border: none;
    color: var(--primary-500);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: var(--transition-fast);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
}

    .btn-link:hover[b-500hg4ei5q] {
        color: var(--primary-600);
        background: var(--pastel-lavender-light);
        transform: translateX(2px);
    }

/* Organizations List */
.organizations-list[b-500hg4ei5q] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.organization-item[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    padding: var(--spacing-3);
    background: var(--pastel-lavender-light);
    border-radius: var(--radius-lg);
    transition: var(--transition-fast);
    cursor: pointer;
    border: 1px solid transparent;
}

    .organization-item:hover[b-500hg4ei5q] {
        background: var(--pastel-lavender);
        border-color: var(--pastel-lavender-dark);
        transform: translateX(4px);
    }

.org-icon[b-500hg4ei5q] {
    width: 36px;
    height: 36px;
    background: var(--primary-200);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
    margin-right: var(--spacing-3);
}

.org-info[b-500hg4ei5q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.org-name[b-500hg4ei5q] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.org-id[b-500hg4ei5q] {
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.remove-btn[b-500hg4ei5q] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--danger-500);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
    opacity: 0;
}

.organization-item:hover .remove-btn[b-500hg4ei5q] {
    opacity: 1;
}

.remove-btn:hover[b-500hg4ei5q] {
    background: var(--danger-50);
    color: var(--danger-600);
    transform: scale(1.1);
}

/* Service Desks Grid */
.service-desks-grid[b-500hg4ei5q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-3);
}

.service-desk-card[b-500hg4ei5q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-4);
    background: var(--pastel-sky-light);
    border-radius: var(--radius-lg);
    transition: var(--transition-fast);
    cursor: pointer;
    text-align: center;
    border: 1px solid transparent;
}

    .service-desk-card:hover[b-500hg4ei5q] {
        background: var(--pastel-sky);
        border-color: var(--pastel-sky-dark);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

.sd-icon[b-500hg4ei5q] {
    width: 48px;
    height: 48px;
    background: var(--accent-blue);
    color: white;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: var(--spacing-3);
}

.sd-info[b-500hg4ei5q] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    margin-bottom: var(--spacing-2);
}

    .sd-info h5[b-500hg4ei5q] {
        margin: 0;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.sd-key[b-500hg4ei5q] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* Requests List */
.requests-list[b-500hg4ei5q] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.request-item[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    transition: var(--transition-fast);
    cursor: pointer;
}

    .request-item:hover[b-500hg4ei5q] {
        background: var(--pastel-mint-light);
        transform: translateX(2px);
    }

.request-icon[b-500hg4ei5q] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

    .request-icon.status-open[b-500hg4ei5q] {
        background: var(--info-100);
        color: var(--info-600);
    }

    .request-icon.status-waiting[b-500hg4ei5q] {
        background: var(--warning-100);
        color: var(--warning-600);
    }

    .request-icon.status-closed[b-500hg4ei5q] {
        background: var(--success-100);
        color: var(--success-600);
    }

    .request-icon.status-default[b-500hg4ei5q] {
        background: var(--gray-100);
        color: var(--gray-600);
    }

.request-info[b-500hg4ei5q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.request-key[b-500hg4ei5q] {
    font-weight: 600;
    color: var(--primary-600);
    font-size: 0.875rem;
}

.request-summary[b-500hg4ei5q] {
    color: var(--text-primary);
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.request-date[b-500hg4ei5q] {
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.request-status[b-500hg4ei5q] {
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

    .request-status.status-open[b-500hg4ei5q] {
        background: var(--info-100);
        color: var(--info-700);
    }

    .request-status.status-waiting[b-500hg4ei5q] {
        background: var(--warning-100);
        color: var(--warning-700);
    }

    .request-status.status-closed[b-500hg4ei5q] {
        background: var(--success-100);
        color: var(--success-700);
    }

    .request-status.status-default[b-500hg4ei5q] {
        background: var(--gray-100);
        color: var(--gray-600);
    }

.btn-show-all[b-500hg4ei5q] {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: white;
    border: 2px solid var(--accent-mint);
    border-radius: var(--radius-lg);
    color: var(--accent-mint);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    transition: var(--transition-fast);
}

    .btn-show-all:hover[b-500hg4ei5q] {
        background: var(--accent-mint);
        color: white;
        transform: translateX(4px);
    }

/* Properties Grid */
.properties-grid[b-500hg4ei5q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--spacing-3);
}

.property-card[b-500hg4ei5q] {
    position: relative;
    padding: var(--spacing-3);
    background: var(--pastel-lilac-light);
    border-radius: var(--radius-lg);
    border: 1px solid var(--pastel-lilac);
    transition: var(--transition-fast);
    overflow: hidden;
}

    .property-card:hover[b-500hg4ei5q] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

.prop-key[b-500hg4ei5q] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    display: block;
    margin-bottom: var(--spacing-1);
}

.prop-value[b-500hg4ei5q] {
    font-size: 0.875rem;
    color: var(--text-primary);
    word-break: break-word;
}

.prop-bg[b-500hg4ei5q] {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: var(--accent-purple);
    opacity: 0.1;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.3s;
}

.property-card:hover .prop-bg[b-500hg4ei5q] {
    transform: scale(2);
}

.properties-more[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3);
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    color: var(--text-tertiary);
    font-size: 0.875rem;
    font-style: italic;
    border: 2px dashed var(--border-secondary);
}

/* No Data State */
.no-data[b-500hg4ei5q] {
    padding: var(--spacing-6);
    text-align: center;
    color: var(--text-tertiary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3);
}

.no-data-icon[b-500hg4ei5q] {
    width: 64px;
    height: 64px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--text-quaternary);
    animation: noDataFloat-b-500hg4ei5q 3s ease-in-out infinite;
}

@keyframes noDataFloat-b-500hg4ei5q {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Quick Actions */
.quick-actions[b-500hg4ei5q] {
    padding: var(--spacing-5) var(--spacing-6);
    background: var(--bg-tertiary);
    display: flex;
    gap: var(--spacing-3);
}

.quick-action[b-500hg4ei5q] {
    flex: 1;
    padding: var(--spacing-3);
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
}

    .quick-action:hover[b-500hg4ei5q] {
        background: var(--pastel-lavender-light);
        border-color: var(--pastel-lavender);
        color: var(--primary-600);
        transform: translateY(-2px);
    }

.action-bg[b-500hg4ei5q] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    opacity: 0.1;
    border-radius: 50%;
    transition: transform 0.3s;
}

.quick-action:hover .action-bg[b-500hg4ei5q] {
    transform: translate(-50%, -50%) scale(2);
}

/* Pagination */
.pagination[b-500hg4ei5q] {
    margin-top: var(--spacing-8);
    padding: var(--spacing-6);
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 10;
}

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

.pagination-controls[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.page-btn[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .page-btn:hover:not(:disabled)[b-500hg4ei5q] {
        background: var(--pastel-lavender-light);
        border-color: var(--pastel-lavender);
        transform: translateY(-2px);
    }

    .page-btn:disabled[b-500hg4ei5q] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.page-numbers[b-500hg4ei5q] {
    display: flex;
    gap: var(--spacing-1);
}

.page-number[b-500hg4ei5q] {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .page-number:hover[b-500hg4ei5q] {
        background: var(--pastel-pink-light);
        border-color: var(--pastel-pink);
        transform: translateY(-2px);
    }

    .page-number.active[b-500hg4ei5q] {
        background: var(--gradient-primary);
        color: white;
        border-color: transparent;
    }

.page-dots[b-500hg4ei5q] {
    padding: 0 var(--spacing-2);
    color: var(--text-tertiary);
}

/* Loading State */
.loading-container[b-500hg4ei5q] {
    padding: var(--spacing-12);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.loading-content[b-500hg4ei5q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
}

.loading-spinner[b-500hg4ei5q] {
    position: relative;
    width: 80px;
    height: 80px;
}

.spinner-ring[b-500hg4ei5q] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid var(--pastel-lavender);
    border-radius: 50%;
    animation: spinnerRing-b-500hg4ei5q 2s linear infinite;
}

    .spinner-ring:nth-child(1)[b-500hg4ei5q] {
        border-color: var(--pastel-pink);
        animation-delay: -0.5s;
    }

    .spinner-ring:nth-child(2)[b-500hg4ei5q] {
        border-color: var(--pastel-mint);
        animation-delay: -1s;
        transform: scale(0.8);
    }

    .spinner-ring:nth-child(3)[b-500hg4ei5q] {
        border-color: var(--pastel-lavender);
        animation-delay: -1.5s;
        transform: scale(0.6);
    }

@keyframes spinnerRing-b-500hg4ei5q {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }

    50% {
        transform: rotate(180deg) scale(1.1);
        opacity: 0.5;
    }

    100% {
        transform: rotate(360deg) scale(1);
        opacity: 1;
    }
}

.loading-spinner i[b-500hg4ei5q] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: var(--primary-500);
    animation: iconBounce-b-500hg4ei5q 2s ease-in-out infinite;
}

@keyframes iconBounce-b-500hg4ei5q {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }
}

.loading-text[b-500hg4ei5q] {
    margin: 0;
    font-size: 1rem;
    color: var(--text-secondary);
}

.loading-progress[b-500hg4ei5q] {
    width: 200px;
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-bar[b-500hg4ei5q] {
    height: 100%;
    background: var(--gradient-primary);
    width: 30%;
    border-radius: var(--radius-full);
    animation: progressLoad-b-500hg4ei5q 2s ease-in-out infinite;
}

@keyframes progressLoad-b-500hg4ei5q {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(400%);
    }
}

/* Empty State */
.empty-state[b-500hg4ei5q] {
    padding: var(--spacing-12);
    text-align: center;
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 10;
    overflow: hidden;
}

    .empty-state[b-500hg4ei5q]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, var(--pastel-pink-light) 0%, transparent 40%);
        opacity: 0.5;
        animation: emptyBg-b-500hg4ei5q 20s linear infinite;
    }

@keyframes emptyBg-b-500hg4ei5q {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.empty-animation[b-500hg4ei5q] {
    position: relative;
    margin-bottom: var(--spacing-6);
}

.empty-icon[b-500hg4ei5q] {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    background: var(--pastel-pink-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--secondary-400);
    position: relative;
    z-index: 1;
    animation: emptyIconFloat-b-500hg4ei5q 3s ease-in-out infinite;
}

@keyframes emptyIconFloat-b-500hg4ei5q {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.empty-icon-bg[b-500hg4ei5q] {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: var(--gradient-secondary);
    border-radius: var(--radius-full);
    opacity: 0.2;
    filter: blur(20px);
    animation: emptyGlow-b-500hg4ei5q 3s ease-in-out infinite;
}

@keyframes emptyGlow-b-500hg4ei5q {
    0%, 100% {
        transform: scale(1);
        opacity: 0.2;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.3;
    }
}

.empty-particles[b-500hg4ei5q] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
}

    .empty-particles span[b-500hg4ei5q] {
        position: absolute;
        width: 4px;
        height: 4px;
        background: var(--secondary-300);
        border-radius: 50%;
    }

        .empty-particles span:nth-child(1)[b-500hg4ei5q] {
            top: 0;
            left: 50%;
            animation: particle1-b-500hg4ei5q 4s linear infinite;
        }

        .empty-particles span:nth-child(2)[b-500hg4ei5q] {
            top: 50%;
            right: 0;
            animation: particle2-b-500hg4ei5q 4s linear infinite;
        }

        .empty-particles span:nth-child(3)[b-500hg4ei5q] {
            bottom: 0;
            left: 50%;
            animation: particle3-b-500hg4ei5q 4s linear infinite;
        }

@keyframes particle1-b-500hg4ei5q {
    0% {
        transform: translate(-50%, 0) scale(0);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -100px) scale(1);
        opacity: 0.5;
    }

    100% {
        transform: translate(-50%, -200px) scale(0);
        opacity: 0;
    }
}

@keyframes particle2-b-500hg4ei5q {
    0% {
        transform: translate(0, -50%) scale(0);
        opacity: 1;
    }

    50% {
        transform: translate(100px, -50%) scale(1);
        opacity: 0.5;
    }

    100% {
        transform: translate(200px, -50%) scale(0);
        opacity: 0;
    }
}

@keyframes particle3-b-500hg4ei5q {
    0% {
        transform: translate(-50%, 0) scale(0);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, 100px) scale(1);
        opacity: 0.5;
    }

    100% {
        transform: translate(-50%, 200px) scale(0);
        opacity: 0;
    }
}

.empty-state h3[b-500hg4ei5q] {
    margin: 0 0 var(--spacing-3) 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    position: relative;
    z-index: 1;
}

.empty-state p[b-500hg4ei5q] {
    margin: 0 0 var(--spacing-6) 0;
    color: var(--text-secondary);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.empty-actions[b-500hg4ei5q] {
    display: flex;
    gap: var(--spacing-3);
    justify-content: center;
    position: relative;
    z-index: 1;
}

.btn-primary[b-500hg4ei5q],
.btn-secondary[b-500hg4ei5q] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    border-radius: var(--radius-xl);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    text-decoration: none;
}

.btn-primary[b-500hg4ei5q] {
    background: var(--gradient-primary);
    color: white;
    border: none;
    box-shadow: var(--shadow-md);
}

    .btn-primary:hover[b-500hg4ei5q] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg), var(--glow-primary);
    }

.btn-secondary[b-500hg4ei5q] {
    background: white;
    color: var(--text-primary);
    border: 2px solid var(--border-secondary);
}

    .btn-secondary:hover[b-500hg4ei5q] {
        border-color: var(--pastel-lavender);
        background: var(--pastel-lavender-light);
    }

/* Responsive Design */
@media (max-width: 1400px) {
    .customers-grid.grid[b-500hg4ei5q] {
        grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    }
}

@media (max-width: 1200px) {
    .summary-grid[b-500hg4ei5q] {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .filters-grid[b-500hg4ei5q] {
        grid-template-columns: repeat(2, 1fr);
    }

    .customer-stats[b-500hg4ei5q] {
        gap: var(--spacing-3);
    }
}

@media (max-width: 768px) {
    .customers-header[b-500hg4ei5q] {
        padding: var(--spacing-6) 0;
    }

    .header-content[b-500hg4ei5q] {
        text-align: center;
    }

    .header-title h1[b-500hg4ei5q] {
        font-size: 2rem;
    }

    .title-accent[b-500hg4ei5q] {
        display: block;
        margin-left: 0;
        margin-top: var(--spacing-2);
    }

    .header-actions[b-500hg4ei5q] {
        width: 100%;
        justify-content: center;
        margin-top: var(--spacing-4);
    }

    .search-filter-section[b-500hg4ei5q] {
        flex-direction: column;
        gap: var(--spacing-4);
    }

    .filter-actions[b-500hg4ei5q] {
        width: 100%;
        justify-content: space-between;
    }

    .customers-grid.grid[b-500hg4ei5q] {
        grid-template-columns: 1fr;
    }

    .customer-header[b-500hg4ei5q] {
        flex-wrap: wrap;
        gap: var(--spacing-3);
    }

    .customer-info[b-500hg4ei5q] {
        width: 100%;
    }

    .customer-stats[b-500hg4ei5q] {
        width: 100%;
        justify-content: space-between;
    }

    .customer-actions[b-500hg4ei5q] {
        width: 100%;
        justify-content: flex-end;
    }

    .service-desks-grid[b-500hg4ei5q] {
        grid-template-columns: 1fr;
    }

    .properties-grid[b-500hg4ei5q] {
        grid-template-columns: 1fr;
    }

    .quick-actions[b-500hg4ei5q] {
        flex-direction: column;
    }

    .pagination[b-500hg4ei5q] {
        flex-direction: column;
        gap: var(--spacing-4);
        text-align: center;
    }

    .bulk-actions-bar[b-500hg4ei5q] {
        flex-direction: column;
        gap: var(--spacing-3);
    }

    .bulk-actions[b-500hg4ei5q] {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .filters-grid[b-500hg4ei5q] {
        grid-template-columns: 1fr;
    }

    .floating-shape[b-500hg4ei5q] {
        display: none;
    }
}

/* Dark Mode Adjustments */
[data-theme="dark"] .animated-background[b-500hg4ei5q]::before {
    opacity: 0.2;
}

[data-theme="dark"] .customers-header[b-500hg4ei5q] {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-quaternary) 100%);
}

[data-theme="dark"] .customer-card[b-500hg4ei5q] {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .customer-header[b-500hg4ei5q] {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .search-filter-section[b-500hg4ei5q],
[data-theme="dark"] .pagination[b-500hg4ei5q],
[data-theme="dark"] .empty-state[b-500hg4ei5q],
[data-theme="dark"] .bulk-actions-bar[b-500hg4ei5q] {
    background: var(--bg-secondary);
}

[data-theme="dark"] .organization-item[b-500hg4ei5q] {
    background: rgba(232, 227, 245, 0.1);
    border-color: transparent;
}

[data-theme="dark"] .service-desk-card[b-500hg4ei5q] {
    background: rgba(227, 240, 255, 0.1);
    border-color: transparent;
}

[data-theme="dark"] .property-card[b-500hg4ei5q] {
    background: rgba(245, 232, 255, 0.1);
    border-color: transparent;
}

[data-theme="dark"] .quick-action[b-500hg4ei5q] {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .filters-panel[b-500hg4ei5q] {
    background: var(--bg-quaternary);
}

/* Animations */
@keyframes fadeIn-b-500hg4ei5q {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Print Styles */
@media print {
    .animated-background[b-500hg4ei5q],
    .floating-shape[b-500hg4ei5q],
    .header-particles[b-500hg4ei5q],
    .card-glow[b-500hg4ei5q],
    .card-background[b-500hg4ei5q],
    .search-filter-section[b-500hg4ei5q],
    .header-actions[b-500hg4ei5q],
    .customer-actions[b-500hg4ei5q],
    .bulk-actions-bar[b-500hg4ei5q],
    .pagination[b-500hg4ei5q] {
        display: none !important;
    }

    .customers-container[b-500hg4ei5q] {
        background: white;
    }

    .customer-card[b-500hg4ei5q] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}
/* Animated Background */
.animated-background[b-500hg4ei5q] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

    .animated-background[b-500hg4ei5q]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 25% 25%, var(--pastel-pink-light) 0%, transparent 40%), radial-gradient(circle at 75% 75%, var(--pastel-mint-light) 0%, transparent 40%), radial-gradient(circle at 50% 50%, var(--pastel-lavender-light) 0%, transparent 60%);
        opacity: 0.7;
    }

.floating-shape[b-500hg4ei5q] {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    animation: float-b-500hg4ei5q 20s infinite ease-in-out;
}

.shape-1[b-500hg4ei5q] {
    width: 400px;
    height: 400px;
    background: var(--pastel-pink);
    top: -200px;
    left: -200px;
    animation-duration: 25s;
}

.shape-2[b-500hg4ei5q] {
    width: 300px;
    height: 300px;
    background: var(--pastel-mint);
    top: 50%;
    right: -150px;
    animation-duration: 20s;
    animation-delay: -5s;
}

.shape-3[b-500hg4ei5q] {
    width: 500px;
    height: 500px;
    background: var(--pastel-lavender);
    bottom: -250px;
    left: 50%;
    animation-duration: 30s;
    animation-delay: -10s;
}

.shape-4[b-500hg4ei5q] {
    width: 250px;
    height: 250px;
    background: var(--pastel-sky);
    top: 20%;
    left: 60%;
    animation-duration: 22s;
    animation-delay: -15s;
}

.shape-5[b-500hg4ei5q] {
    width: 350px;
    height: 350px;
    background: var(--pastel-peach);
    bottom: 20%;
    right: 20%;
    animation-duration: 28s;
    animation-delay: -7s;
}

@keyframes float-b-500hg4ei5q {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    25% {
        transform: translate(30px, -50px) rotate(90deg) scale(1.1);
    }

    50% {
        transform: translate(-40px, 30px) rotate(180deg) scale(0.9);
    }

    75% {
        transform: translate(50px, 50px) rotate(270deg) scale(1.05);
    }
}

/* Customers Header */
.customers-header[b-500hg4ei5q] {
    background: linear-gradient(135deg, #F472B6 0%, #EC4899 50%, #DB2777 100%);
    padding: var(--spacing-8) 0;
    margin: calc(var(--spacing-8) * -1) calc(var(--spacing-8) * -1) var(--spacing-8);
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(236, 72, 153, 0.25);
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
}

    .customers-header[b-500hg4ei5q]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -10%;
        width: 150%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
        animation: rotateGlow-b-500hg4ei5q 20s linear infinite;
    }

    .customers-header[b-500hg4ei5q]::after {
        content: '';
        position: absolute;
        bottom: -50%;
        right: -10%;
        width: 120%;
        height: 150%;
        background: radial-gradient(circle, rgba(244, 114, 182, 0.2) 0%, transparent 60%);
        animation: rotateGlowReverse-b-500hg4ei5q 25s linear infinite;
    }

@keyframes rotateGlow-b-500hg4ei5q {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateGlowReverse-b-500hg4ei5q {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.header-content[b-500hg4ei5q] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.header-main[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
}

.header-icon[b-500hg4ei5q] {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--secondary-600);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), inset 0 2px 8px rgba(255, 255, 255, 0.5);
    animation: iconFloat-b-500hg4ei5q 3s ease-in-out infinite;
}

@keyframes iconFloat-b-500hg4ei5q {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

.header-info h1[b-500hg4ei5q] {
    margin: 0 0 var(--spacing-2) 0;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-on-primary);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.02em;
}

.header-content .lead[b-500hg4ei5q] {
    margin: 0;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Header Stats */
.header-content .header-stats[b-500hg4ei5q] {
    display: flex;
    gap: var(--spacing-4);
}

.header-content .stat-badge[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-5);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: var(--transition-base);
}

    .header-content .stat-badge:hover[b-500hg4ei5q] {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .header-content .stat-badge.success[b-500hg4ei5q] {
        border-color: rgba(102, 187, 106, 0.5);
    }

    .header-content .stat-badge.warning[b-500hg4ei5q] {
        border-color: rgba(255, 152, 0, 0.5);
    }

    .header-content .stat-badge.info[b-500hg4ei5q] {
        border-color: rgba(3, 169, 244, 0.5);
    }

    .header-content .stat-badge i[b-500hg4ei5q] {
        font-size: 1.5rem;
        color: var(--text-on-primary);
    }

.header-content .stat-content[b-500hg4ei5q] {
    text-align: left;
}

.header-content .stat-value[b-500hg4ei5q] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-on-primary);
    line-height: 1;
}

.header-content .stat-label[b-500hg4ei5q] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Header Actions Bar */
.header-actions-bar[b-500hg4ei5q] {
    background: white;
    padding: var(--spacing-4) 0;
    margin-bottom: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 10;
}

.actions-content[b-500hg4ei5q] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-8);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.btn-action[b-500hg4ei5q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

    .btn-action.primary[b-500hg4ei5q] {
        background: var(--gradient-primary);
        color: white;
        box-shadow: var(--shadow-md);
    }

        .btn-action.primary:hover[b-500hg4ei5q] {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg), var(--glow-primary);
        }

    .btn-action.secondary[b-500hg4ei5q] {
        background: white;
        color: var(--primary-600);
        border-color: var(--border-secondary);
    }

        .btn-action.secondary:hover[b-500hg4ei5q] {
            background: var(--pastel-lavender-light);
            border-color: var(--pastel-lavender);
            transform: translateY(-2px);
        }

    .btn-action:not(.primary):not(.secondary)[b-500hg4ei5q] {
        background: white;
        color: var(--text-secondary);
        border-color: var(--border-secondary);
    }

        .btn-action:not(.primary):not(.secondary):hover:not(:disabled)[b-500hg4ei5q] {
            background: var(--bg-tertiary);
            border-color: var(--primary-300);
            color: var(--primary-600);
            transform: translateY(-2px);
        }

    .btn-action.syncing[b-500hg4ei5q] {
        background: var(--gradient-primary);
        color: white;
    }

    .btn-action:disabled[b-500hg4ei5q] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-action i[b-500hg4ei5q] {
        font-size: 1.125rem;
    }
/* _content/PKFAPI/Components/Pages/Home.razor.rz.scp.css */
/* Dashboard Container */
.dashboard-container[b-z1eljkvxty] {
    min-height: 100vh;
    animation: fadeIn-b-z1eljkvxty 0.5s ease-out;
    position: relative;
    background: var(--bg-primary);
}

    .dashboard-container[b-z1eljkvxty]::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 20% 80%, var(--pastel-lavender-light) 0%, transparent 40%), radial-gradient(circle at 80% 20%, var(--pastel-pink-light) 0%, transparent 40%), radial-gradient(circle at 50% 50%, var(--pastel-sky-light) 0%, transparent 60%);
        opacity: 0.6;
        pointer-events: none;
        z-index: 0;
    }

@keyframes fadeIn-b-z1eljkvxty {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dashboard Header */
.dashboard-header[b-z1eljkvxty] {
    background: var(--gradient-soft);
    padding: var(--spacing-8) 0;
    margin: calc(var(--spacing-8) * -1) calc(var(--spacing-8) * -1) var(--spacing-8);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(155, 143, 255, 0.1);
}

    .dashboard-header[b-z1eljkvxty]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -10%;
        width: 120%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
        animation: float-b-z1eljkvxty 20s ease-in-out infinite;
    }

    .dashboard-header[b-z1eljkvxty]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100px;
        background: linear-gradient(to top, var(--bg-primary), transparent);
        pointer-events: none;
    }

@keyframes float-b-z1eljkvxty {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(30px, -30px) rotate(120deg);
    }

    66% {
        transform: translate(-20px, 20px) rotate(240deg);
    }
}

.header-content[b-z1eljkvxty] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.header-title h1[b-z1eljkvxty] {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.03em;
    line-height: 1.2;
    filter: drop-shadow(2px 2px 4px rgba(155, 143, 255, 0.2));
}

.header-subtitle[b-z1eljkvxty] {
    margin: var(--spacing-2) 0 0;
    color: var(--primary-600);
    font-size: 1rem;
    opacity: 0.85;
    font-weight: 500;
}

.header-actions[b-z1eljkvxty] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.btn-sync[b-z1eljkvxty],
.btn-refresh[b-z1eljkvxty] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    background: white;
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    color: var(--primary-600);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

    .btn-sync[b-z1eljkvxty]::before,
    .btn-refresh[b-z1eljkvxty]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: var(--pastel-lavender);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .btn-sync:hover[b-z1eljkvxty]::before,
    .btn-refresh:hover[b-z1eljkvxty]::before {
        width: 300%;
        height: 300%;
    }

    .btn-sync:hover:not(:disabled)[b-z1eljkvxty],
    .btn-refresh:hover:not(:disabled)[b-z1eljkvxty] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        border-color: var(--pastel-lavender-dark);
    }

        .btn-sync:hover:not(:disabled) span[b-z1eljkvxty],
        .btn-refresh:hover:not(:disabled) span[b-z1eljkvxty],
        .btn-sync:hover:not(:disabled) i[b-z1eljkvxty],
        .btn-refresh:hover:not(:disabled) i[b-z1eljkvxty] {
            position: relative;
            z-index: 1;
        }

    .btn-sync:disabled[b-z1eljkvxty],
    .btn-refresh:disabled[b-z1eljkvxty] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-sync.syncing[b-z1eljkvxty],
    .btn-refresh.refreshing[b-z1eljkvxty] {
        background: var(--gradient-primary);
        color: white;
    }

    .btn-sync i[b-z1eljkvxty],
    .btn-refresh i[b-z1eljkvxty] {
        font-size: 1.125rem;
    }

.date-display[b-z1eljkvxty] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    color: var(--text-secondary);
    font-size: 0.875rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--glass-border);
}

/* Search Section */
.search-section[b-z1eljkvxty] {
    margin-bottom: var(--spacing-8);
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 10;
    border: 1px solid var(--border-secondary);
    transition: var(--transition-base);
}

    .search-section:hover[b-z1eljkvxty] {
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
    }

.search-container[b-z1eljkvxty] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
}

.search-group[b-z1eljkvxty] {
    position: relative;
}

.search-box[b-z1eljkvxty] {
    position: relative;
}

    .search-box i[b-z1eljkvxty] {
        position: absolute;
        left: var(--spacing-4);
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-tertiary);
        pointer-events: none;
        transition: var(--transition-fast);
    }

    .search-box input[b-z1eljkvxty] {
        width: 100%;
        padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-10);
        background: var(--bg-secondary);
        border: 2px solid var(--border-secondary);
        border-radius: var(--radius-lg);
        font-size: 0.875rem;
        transition: var(--transition-base);
        color: var(--text-primary);
    }

        .search-box input[b-z1eljkvxty]::placeholder {
            color: var(--text-tertiary);
        }

        .search-box input:focus[b-z1eljkvxty] {
            outline: none;
            border-color: var(--primary-300);
            background: white;
            box-shadow: 0 0 0 4px var(--pastel-lavender-light);
            transform: translateY(-1px);
        }

            .search-box input:focus ~ i[b-z1eljkvxty] {
                color: var(--primary-500);
                transform: translateY(-50%) scale(1.1);
            }

.search-loading[b-z1eljkvxty] {
    position: absolute;
    right: var(--spacing-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-400);
    animation: spin-b-z1eljkvxty 1s linear infinite;
}

/* Search Results */
.search-results[b-z1eljkvxty] {
    margin-top: var(--spacing-4);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
    animation: slideDown-b-z1eljkvxty 0.3s ease-out;
}

@keyframes slideDown-b-z1eljkvxty {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-results-section[b-z1eljkvxty] {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    border: 1px solid var(--border-secondary);
    transition: var(--transition-base);
}

    .search-results-section:hover[b-z1eljkvxty] {
        border-color: var(--pastel-lavender);
        box-shadow: var(--shadow-sm);
    }

    .search-results-section h4[b-z1eljkvxty] {
        margin: 0 0 var(--spacing-3) 0;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

        .search-results-section h4 i[b-z1eljkvxty] {
            color: var(--primary-400);
        }

.results-list[b-z1eljkvxty] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.result-item[b-z1eljkvxty] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: white;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
    border: 1px solid transparent;
}

    .result-item:hover[b-z1eljkvxty] {
        background: var(--pastel-lavender-light);
        transform: translateX(4px);
        border-color: var(--pastel-lavender);
        box-shadow: var(--shadow-sm);
    }

.result-icon[b-z1eljkvxty] {
    width: 40px;
    height: 40px;
    background: var(--gradient-soft);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
    font-size: 1.125rem;
    transition: var(--transition-base);
}

.result-item:hover .result-icon[b-z1eljkvxty] {
    transform: rotate(-5deg) scale(1.1);
}

.result-info[b-z1eljkvxty] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.result-name[b-z1eljkvxty] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.result-detail[b-z1eljkvxty] {
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.result-meta[b-z1eljkvxty] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.results-more[b-z1eljkvxty] {
    margin-top: var(--spacing-3);
    text-align: center;
}

/* Badges */
.badge[b-z1eljkvxty] {
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: var(--transition-fast);
}

    .badge.active[b-z1eljkvxty] {
        background: var(--success-100);
        color: var(--success-700);
        border: 1px solid var(--success-200);
    }

    .badge.inactive[b-z1eljkvxty] {
        background: var(--gray-100);
        color: var(--gray-600);
        border: 1px solid var(--gray-200);
    }

    .badge.required[b-z1eljkvxty] {
        background: var(--danger-100);
        color: var(--danger-700);
        border: 1px solid var(--danger-200);
    }

/* Summary Grid */
.summary-grid[b-z1eljkvxty] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-10);
    position: relative;
    z-index: 10;
}

.summary-card[b-z1eljkvxty] {
    position: relative;
    padding: var(--spacing-6);
    border-radius: var(--radius-2xl);
    color: white;
    overflow: hidden;
    transition: var(--transition-base);
    animation: slideUp-b-z1eljkvxty 0.5s ease-out backwards;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .summary-card:nth-child(1)[b-z1eljkvxty] {
        animation-delay: 0.1s;
    }

    .summary-card:nth-child(2)[b-z1eljkvxty] {
        animation-delay: 0.2s;
    }

    .summary-card:nth-child(3)[b-z1eljkvxty] {
        animation-delay: 0.3s;
    }

    .summary-card:nth-child(4)[b-z1eljkvxty] {
        animation-delay: 0.4s;
    }

    .summary-card:nth-child(5)[b-z1eljkvxty] {
        animation-delay: 0.5s;
    }

    .summary-card:nth-child(6)[b-z1eljkvxty] {
        animation-delay: 0.6s;
    }

@keyframes slideUp-b-z1eljkvxty {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.summary-card:hover[b-z1eljkvxty] {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.summary-card.gradient-primary[b-z1eljkvxty] {
    background: var(--gradient-primary);
}

.summary-card.gradient-secondary[b-z1eljkvxty] {
    background: var(--gradient-secondary);
}

.summary-card.gradient-tertiary[b-z1eljkvxty] {
    background: var(--gradient-tertiary);
}

.summary-card.gradient-warning[b-z1eljkvxty] {
    background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
}

.summary-card.gradient-info[b-z1eljkvxty] {
    background: linear-gradient(135deg, #03A9F4 0%, #29B6F6 100%);
}

.summary-card.gradient-success[b-z1eljkvxty] {
    background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
}

.summary-card[b-z1eljkvxty]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    transform: rotate(45deg);
    transition: var(--transition-slow);
}

.summary-card:hover[b-z1eljkvxty]::before {
    transform: rotate(45deg) scale(1.5);
}

.card-icon[b-z1eljkvxty] {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: var(--spacing-4);
    animation: iconFloat-b-z1eljkvxty 3s ease-in-out infinite;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

@keyframes iconFloat-b-z1eljkvxty {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.card-content h3[b-z1eljkvxty] {
    margin: 0 0 var(--spacing-3) 0;
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-value[b-z1eljkvxty] {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--spacing-3);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.card-trend[b-z1eljkvxty] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.875rem;
    opacity: 0.9;
}

    .card-trend i[b-z1eljkvxty] {
        font-size: 1rem;
    }

    .card-trend.positive i[b-z1eljkvxty] {
        color: #A7F3D0;
    }

    .card-trend.neutral i[b-z1eljkvxty] {
        color: #FDE68A;
    }

    .card-trend.warning i[b-z1eljkvxty] {
        color: #FFE0B2;
    }

/* Sync Metadata Section */
.sync-metadata-section[b-z1eljkvxty] {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-8);
    position: relative;
    z-index: 10;
}

.sync-metadata-grid[b-z1eljkvxty] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-4);
}

.sync-meta-card[b-z1eljkvxty] {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    border: 2px solid var(--border-secondary);
    transition: var(--transition-base);
}

    .sync-meta-card:hover[b-z1eljkvxty] {
        border-color: var(--pastel-lavender);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    .sync-meta-card.warning[b-z1eljkvxty] {
        border-color: var(--warning-300);
        background: var(--warning-50);
    }

.meta-header[b-z1eljkvxty] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-3);
}

    .meta-header h4[b-z1eljkvxty] {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.meta-count[b-z1eljkvxty] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    background: var(--pastel-lavender-light);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
}

.meta-info[b-z1eljkvxty] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.meta-item[b-z1eljkvxty] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

    .meta-item i[b-z1eljkvxty] {
        color: var(--primary-400);
        width: 20px;
    }

/* Sync Audit Section */
.sync-audit-section[b-z1eljkvxty] {
    background: var(--bg-secondary);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-8);
    position: relative;
    z-index: 10;
}

.sync-audit-table[b-z1eljkvxty] {
    overflow-x: auto;
}

    .sync-audit-table table[b-z1eljkvxty] {
        width: 100%;
        border-collapse: collapse;
    }

    .sync-audit-table th[b-z1eljkvxty] {
        text-align: left;
        padding: var(--spacing-3) var(--spacing-4);
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 2px solid var(--border-secondary);
        background: var(--bg-tertiary);
    }

    .sync-audit-table td[b-z1eljkvxty] {
        padding: var(--spacing-4);
        border-bottom: 1px solid var(--border-secondary);
        font-size: 0.875rem;
    }

    .sync-audit-table tr:hover[b-z1eljkvxty] {
        background: var(--pastel-lavender-light);
    }

    .sync-audit-table tr.error-row[b-z1eljkvxty] {
        background: var(--danger-50);
    }

.change-stats[b-z1eljkvxty] {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

    .change-stats span[b-z1eljkvxty] {
        padding: var(--spacing-1) var(--spacing-2);
        border-radius: var(--radius-md);
        font-size: 0.75rem;
        font-weight: 600;
    }

    .change-stats .added[b-z1eljkvxty] {
        background: var(--success-100);
        color: var(--success-700);
    }

    .change-stats .updated[b-z1eljkvxty] {
        background: var(--info-100);
        color: var(--info-700);
    }

    .change-stats .deleted[b-z1eljkvxty] {
        background: var(--warning-100);
        color: var(--warning-700);
    }

    .change-stats .failed[b-z1eljkvxty] {
        background: var(--danger-100);
        color: var(--danger-700);
    }

.status-badge[b-z1eljkvxty] {
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

    .status-badge.success[b-z1eljkvxty] {
        background: var(--success-100);
        color: var(--success-700);
    }

    .status-badge.error[b-z1eljkvxty] {
        background: var(--danger-100);
        color: var(--danger-700);
        cursor: help;
    }

/* Custom Fields Section */
.custom-fields-section[b-z1eljkvxty] {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-8);
    position: relative;
    z-index: 10;
}

.custom-fields-grid[b-z1eljkvxty] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-4);
}

.field-config-card[b-z1eljkvxty] {
    background: var(--pastel-lilac-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    transition: var(--transition-base);
    border: 1px solid var(--pastel-lilac);
}

    .field-config-card:hover[b-z1eljkvxty] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .field-config-card h4[b-z1eljkvxty] {
        margin: 0 0 var(--spacing-3) 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

.field-list[b-z1eljkvxty] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.field-item[b-z1eljkvxty] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-3);
    background: white;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

    .field-item:hover[b-z1eljkvxty] {
        background: var(--bg-tertiary);
        transform: translateX(2px);
    }

.field-info[b-z1eljkvxty] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.field-name[b-z1eljkvxty] {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.field-type[b-z1eljkvxty] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
}

.field-meta[b-z1eljkvxty] {
    display: flex;
    gap: var(--spacing-2);
}

.field-more[b-z1eljkvxty] {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.875rem;
    font-style: italic;
    margin-top: var(--spacing-2);
}

/* Service Desks Section */
.service-desks-section[b-z1eljkvxty] {
    background: var(--bg-secondary);
    border-radius: var(--radius-3xl);
    padding: var(--spacing-8);
    box-shadow: var(--shadow-sm);
    animation: fadeInUp-b-z1eljkvxty 0.6s ease-out 0.5s backwards;
    position: relative;
    z-index: 10;
    margin-bottom: var(--spacing-8);
}

@keyframes fadeInUp-b-z1eljkvxty {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-header[b-z1eljkvxty] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
}

    .section-header h2[b-z1eljkvxty] {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
    }

        .section-header h2 i[b-z1eljkvxty] {
            font-size: 1.25rem;
            color: var(--primary-500);
        }

.section-actions[b-z1eljkvxty] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.btn-filter[b-z1eljkvxty] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--pastel-lavender-light);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    color: var(--primary-600);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
}

    .btn-filter:hover[b-z1eljkvxty],
    .btn-filter.active[b-z1eljkvxty] {
        background: var(--pastel-lavender);
        border-color: var(--primary-300);
        transform: translateY(-1px);
    }

.view-toggle[b-z1eljkvxty] {
    display: flex;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-1);
    gap: var(--spacing-1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.view-btn[b-z1eljkvxty] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: var(--transition-fast);
}

    .view-btn:hover[b-z1eljkvxty] {
        color: var(--text-secondary);
    }

    .view-btn.active[b-z1eljkvxty] {
        background: white;
        color: var(--primary-600);
        box-shadow: var(--shadow-sm);
    }

/* Filters Panel */
.filters-panel[b-z1eljkvxty] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spacing-4);
    padding: var(--spacing-5);
    background: var(--bg-tertiary);
    border-radius: var(--radius-xl);
    margin-bottom: var(--spacing-6);
    animation: slideDown-b-z1eljkvxty 0.3s ease-out;
    border: 1px solid var(--border-secondary);
}

.filter-group label[b-z1eljkvxty] {
    display: block;
    margin-bottom: var(--spacing-2);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.filter-group select[b-z1eljkvxty] {
    padding: var(--spacing-3) var(--spacing-4);
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-base);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23718096' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-3) center;
    padding-right: var(--spacing-10);
}

    .filter-group select:focus[b-z1eljkvxty] {
        outline: none;
        border-color: var(--primary-300);
        box-shadow: 0 0 0 3px var(--pastel-lavender);
    }

/* Service Desks Grid */
.service-desks-grid[b-z1eljkvxty] {
    display: grid;
    gap: var(--spacing-6);
}

    .service-desks-grid.grid[b-z1eljkvxty] {
        grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    }

    .service-desks-grid.list[b-z1eljkvxty] {
        grid-template-columns: 1fr;
    }

/* Service Desk Card */
.service-desk-card[b-z1eljkvxty] {
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    transition: var(--transition-base);
    overflow: hidden;
    position: relative;
}

    .service-desk-card[b-z1eljkvxty]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gradient-primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .service-desk-card:hover[b-z1eljkvxty] {
        border-color: var(--pastel-lavender);
        box-shadow: var(--shadow-lg);
    }

        .service-desk-card:hover[b-z1eljkvxty]::before {
            transform: scaleX(1);
        }

    .service-desk-card.expanded[b-z1eljkvxty] {
        border-color: var(--primary-300);
        box-shadow: 0 0 0 3px var(--pastel-lavender), var(--shadow-xl);
    }

.desk-header[b-z1eljkvxty] {
    padding: var(--spacing-6);
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: var(--transition-base);
}

    .desk-header:hover[b-z1eljkvxty] {
        background: var(--pastel-lavender-light);
    }

.desk-info[b-z1eljkvxty] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    flex: 1;
}

.desk-icon[b-z1eljkvxty] {
    width: 56px;
    height: 56px;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    transition: var(--transition-base);
    box-shadow: var(--shadow-md);
}

.service-desk-card:hover .desk-icon[b-z1eljkvxty] {
    transform: rotate(-10deg) scale(1.1);
    box-shadow: var(--shadow-lg), var(--glow-primary);
}

.desk-details h3[b-z1eljkvxty] {
    margin: 0 0 var(--spacing-1) 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.desk-key[b-z1eljkvxty] {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    font-weight: 500;
}

.desk-stats[b-z1eljkvxty] {
    display: flex;
    gap: var(--spacing-6);
    margin-right: var(--spacing-4);
}

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

.stat-value[b-z1eljkvxty] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-600);
    margin-bottom: var(--spacing-1);
}

.stat-label[b-z1eljkvxty] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.expand-toggle[b-z1eljkvxty] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pastel-lavender-light);
    border: none;
    border-radius: var(--radius-lg);
    color: var(--primary-600);
    font-size: 1.125rem;
    cursor: pointer;
    transition: var(--transition-base);
}

    .expand-toggle:hover[b-z1eljkvxty] {
        background: var(--pastel-lavender);
        transform: scale(1.1);
    }

/* Desk Content */
.desk-content[b-z1eljkvxty] {
    padding: 0 var(--spacing-6) var(--spacing-6);
    animation: expandContent-b-z1eljkvxty 0.3s ease-out;
}

@keyframes expandContent-b-z1eljkvxty {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Portal Settings */
.portal-settings-info[b-z1eljkvxty] {
    background: var(--pastel-sky-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

    .portal-settings-info h4[b-z1eljkvxty] {
        margin: 0 0 var(--spacing-3) 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

        .portal-settings-info h4 i[b-z1eljkvxty] {
            color: var(--accent-blue);
        }

.portal-details[b-z1eljkvxty] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.portal-item[b-z1eljkvxty] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: 0.875rem;
}

    .portal-item .label[b-z1eljkvxty] {
        font-weight: 500;
        color: var(--text-secondary);
        min-width: 100px;
    }

    .portal-item .value[b-z1eljkvxty] {
        color: var(--text-primary);
    }

.portal-announcement[b-z1eljkvxty] {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--warning-50);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--warning-800);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

    .portal-announcement i[b-z1eljkvxty] {
        color: var(--warning-600);
    }

/* Request Types Section */
.request-types-section[b-z1eljkvxty] {
    margin-bottom: var(--spacing-6);
}

.subsection-header[b-z1eljkvxty] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

    .subsection-header h4[b-z1eljkvxty] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

        .subsection-header h4 i[b-z1eljkvxty] {
            font-size: 1rem;
            color: var(--primary-400);
        }

.subsection-actions[b-z1eljkvxty] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.btn-link[b-z1eljkvxty] {
    background: none;
    border: none;
    color: var(--primary-500);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: var(--transition-fast);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
}

    .btn-link:hover[b-z1eljkvxty] {
        color: var(--primary-600);
        transform: translateX(2px);
        background: var(--pastel-lavender-light);
    }

/* Request Types Grid */
.request-types-grid[b-z1eljkvxty] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-3);
}

.request-type-card[b-z1eljkvxty] {
    background: var(--pastel-peach-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition-base);
    border: 1px solid var(--pastel-peach);
}

    .request-type-card:hover[b-z1eljkvxty] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .request-type-card.expanded[b-z1eljkvxty] {
        background: var(--pastel-peach);
    }

.rt-header[b-z1eljkvxty] {
    padding: var(--spacing-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.rt-info h5[b-z1eljkvxty] {
    margin: 0 0 var(--spacing-1) 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.rt-description[b-z1eljkvxty] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: block;
}

.rt-meta[b-z1eljkvxty] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.field-count[b-z1eljkvxty] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    background: rgba(255, 255, 255, 0.7);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-md);
}

.rt-fields[b-z1eljkvxty] {
    padding: 0 var(--spacing-4) var(--spacing-4);
    animation: expandContent-b-z1eljkvxty 0.2s ease-out;
}

    .rt-fields h6[b-z1eljkvxty] {
        margin: 0 0 var(--spacing-2) 0;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-secondary);
    }

.fields-list[b-z1eljkvxty] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.fields-more[b-z1eljkvxty] {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-style: italic;
    margin-top: var(--spacing-2);
}

.no-request-types[b-z1eljkvxty] {
    padding: var(--spacing-6);
    text-align: center;
    color: var(--text-tertiary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
}

    .no-request-types i[b-z1eljkvxty] {
        font-size: 2rem;
        color: var(--pastel-peach-dark);
    }

/* Organizations Section */
.organizations-section[b-z1eljkvxty] {
    margin-bottom: var(--spacing-6);
}

/* Organizations Grid */
.organizations-grid[b-z1eljkvxty] {
    display: grid;
    gap: var(--spacing-3);
}

.organization-card[b-z1eljkvxty] {
    background: var(--pastel-mint-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition-base);
    border: 1px solid var(--pastel-mint);
}

    .organization-card:hover[b-z1eljkvxty] {
        background: var(--pastel-mint);
        transform: translateX(4px);
        box-shadow: var(--shadow-sm);
    }

    .organization-card.expanded[b-z1eljkvxty] {
        background: var(--pastel-mint);
    }

.org-header[b-z1eljkvxty] {
    padding: var(--spacing-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.org-info h5[b-z1eljkvxty] {
    margin: 0 0 var(--spacing-1) 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.customer-count[b-z1eljkvxty] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

    .customer-count i[b-z1eljkvxty] {
        font-size: 0.875rem;
        color: var(--accent-mint);
    }

.org-content[b-z1eljkvxty] {
    padding: 0 var(--spacing-4) var(--spacing-4);
    animation: expandContent-b-z1eljkvxty 0.2s ease-out;
}

/* Organization Properties */
.org-properties[b-z1eljkvxty] {
    margin-bottom: var(--spacing-3);
}

    .org-properties h6[b-z1eljkvxty] {
        margin: 0 0 var(--spacing-2) 0;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-secondary);
    }

.property-item[b-z1eljkvxty] {
    display: flex;
    gap: var(--spacing-2);
    padding: var(--spacing-2);
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-1);
    font-size: 0.8125rem;
}

.prop-key[b-z1eljkvxty] {
    font-weight: 500;
    color: var(--text-secondary);
}

.prop-value[b-z1eljkvxty] {
    color: var(--text-primary);
    word-break: break-word;
}

.properties-more[b-z1eljkvxty] {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-style: italic;
    margin-top: var(--spacing-2);
}

.no-organizations[b-z1eljkvxty] {
    padding: var(--spacing-6);
    text-align: center;
    color: var(--text-tertiary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
}

    .no-organizations i[b-z1eljkvxty] {
        font-size: 2rem;
        color: var(--primary-300);
    }

/* Customers List */
.customers-list[b-z1eljkvxty] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

    .customers-list h6[b-z1eljkvxty] {
        margin: 0 0 var(--spacing-2) 0;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-secondary);
    }

.customer-item[b-z1eljkvxty] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2);
    background: white;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
    cursor: pointer;
}

    .customer-item:hover[b-z1eljkvxty] {
        background: var(--bg-tertiary);
        transform: translateX(4px);
    }

.customer-avatar[b-z1eljkvxty] {
    width: 32px;
    height: 32px;
    background: var(--gradient-secondary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
}

.customer-info[b-z1eljkvxty] {
    display: flex;
    flex-direction: column;
}

.customer-name[b-z1eljkvxty] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.customer-email[b-z1eljkvxty] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.btn-show-more[b-z1eljkvxty] {
    margin-top: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    background: white;
    border: 2px solid var(--accent-mint);
    border-radius: var(--radius-md);
    color: var(--accent-mint-dark);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    transition: var(--transition-fast);
}

    .btn-show-more:hover[b-z1eljkvxty] {
        background: var(--accent-mint);
        color: white;
        transform: translateX(4px);
    }

/* Queues Section */
.queues-section[b-z1eljkvxty] {
    margin-bottom: var(--spacing-6);
}

.queues-list[b-z1eljkvxty] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.queue-item[b-z1eljkvxty] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4);
    background: var(--pastel-sky-light);
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
    border: 1px solid var(--pastel-sky);
}

    .queue-item:hover[b-z1eljkvxty] {
        background: var(--pastel-sky);
        transform: translateX(2px);
        box-shadow: var(--shadow-sm);
    }

.queue-info h6[b-z1eljkvxty] {
    margin: 0 0 var(--spacing-1) 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.queue-jql[b-z1eljkvxty] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: 'Courier New', monospace;
    background: rgba(255, 255, 255, 0.5);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    display: inline-block;
}

.queue-count[b-z1eljkvxty] {
    text-align: center;
}

.count-value[b-z1eljkvxty] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-blue);
}

.count-label[b-z1eljkvxty] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.no-queues[b-z1eljkvxty] {
    padding: var(--spacing-6);
    text-align: center;
    color: var(--text-tertiary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
}

    .no-queues i[b-z1eljkvxty] {
        font-size: 2rem;
        color: var(--pastel-sky-dark);
    }

/* Knowledge Base Section */
.knowledge-base-section[b-z1eljkvxty] {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-8);
    position: relative;
    z-index: 10;
}

.kb-articles-grid[b-z1eljkvxty] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-4);
}

.kb-article-card[b-z1eljkvxty] {
    background: var(--pastel-lilac-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    transition: var(--transition-base);
    border: 1px solid var(--pastel-lilac);
    cursor: pointer;
}

    .kb-article-card:hover[b-z1eljkvxty] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        border-color: var(--pastel-lilac-dark);
    }

    .kb-article-card h4[b-z1eljkvxty] {
        margin: 0 0 var(--spacing-2) 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        line-height: 1.4;
    }

    .kb-article-card p[b-z1eljkvxty] {
        margin: 0 0 var(--spacing-3) 0;
        font-size: 0.875rem;
        color: var(--text-secondary);
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

.article-meta[b-z1eljkvxty] {
    display: flex;
    gap: var(--spacing-2);
}

/* Assets Section */
.assets-section[b-z1eljkvxty] {
    background: var(--bg-secondary);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-8);
    position: relative;
    z-index: 10;
}

.assets-grid[b-z1eljkvxty] {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-4);
}

.asset-workspace-card[b-z1eljkvxty] {
    background: var(--pastel-lemon-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    transition: var(--transition-base);
    border: 1px solid var(--pastel-lemon);
    cursor: pointer;
}

    .asset-workspace-card:hover[b-z1eljkvxty] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        background: var(--pastel-lemon);
    }

.workspace-icon[b-z1eljkvxty] {
    width: 48px;
    height: 48px;
    background: var(--accent-yellow);
    color: white;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.workspace-info h5[b-z1eljkvxty] {
    margin: 0 0 var(--spacing-1) 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.workspace-info span[b-z1eljkvxty] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Import Activity Section */
.import-activity-section[b-z1eljkvxty] {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-8);
    position: relative;
    z-index: 10;
}

.import-activity-list[b-z1eljkvxty] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.import-item[b-z1eljkvxty] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
    border: 1px solid var(--border-secondary);
}

    .import-item:hover[b-z1eljkvxty] {
        transform: translateX(2px);
        box-shadow: var(--shadow-sm);
    }

    .import-item.completed[b-z1eljkvxty] {
        border-color: var(--success-200);
    }

    .import-item.failed[b-z1eljkvxty] {
        border-color: var(--danger-200);
        background: var(--danger-50);
    }

    .import-item.inprogress[b-z1eljkvxty] {
        border-color: var(--info-200);
        background: var(--info-50);
    }

.import-icon[b-z1eljkvxty] {
    width: 48px;
    height: 48px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--text-secondary);
}

.import-details[b-z1eljkvxty] {
    flex: 1;
}

    .import-details h5[b-z1eljkvxty] {
        margin: 0 0 var(--spacing-1) 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.import-meta[b-z1eljkvxty] {
    display: flex;
    gap: var(--spacing-3);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

    .import-meta span[b-z1eljkvxty] {
        display: flex;
        align-items: center;
    }

.import-stats[b-z1eljkvxty] {
    display: flex;
    gap: var(--spacing-2);
}

    .import-stats .stat[b-z1eljkvxty] {
        padding: var(--spacing-1) var(--spacing-3);
        border-radius: var(--radius-md);
        font-size: 0.875rem;
        font-weight: 600;
    }

        .import-stats .stat.success[b-z1eljkvxty] {
            background: var(--success-100);
            color: var(--success-700);
        }

        .import-stats .stat.error[b-z1eljkvxty] {
            background: var(--danger-100);
            color: var(--danger-700);
        }

        .import-stats .stat.skipped[b-z1eljkvxty] {
            background: var(--warning-100);
            color: var(--warning-700);
        }

.import-status[b-z1eljkvxty] {
    display: flex;
    align-items: center;
}

    .import-status .status-badge[b-z1eljkvxty] {
        padding: var(--spacing-2) var(--spacing-4);
        border-radius: var(--radius-full);
        font-size: 0.875rem;
        font-weight: 600;
        text-transform: uppercase;
    }

        .import-status .status-badge.completed[b-z1eljkvxty] {
            background: var(--success-100);
            color: var(--success-700);
        }

        .import-status .status-badge.failed[b-z1eljkvxty] {
            background: var(--danger-100);
            color: var(--danger-700);
        }

        .import-status .status-badge.inprogress[b-z1eljkvxty] {
            background: var(--info-100);
            color: var(--info-700);
        }

/* Loading States */
.loading-container[b-z1eljkvxty] {
    padding: var(--spacing-12);
    text-align: center;
}

.loading-spinner[b-z1eljkvxty] {
    font-size: 3rem;
    color: var(--primary-400);
    margin-bottom: var(--spacing-4);
    animation: spin-b-z1eljkvxty 1s linear infinite;
}

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

.loading-inline[b-z1eljkvxty] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

    .loading-inline.small[b-z1eljkvxty] {
        font-size: 0.75rem;
    }

    .loading-inline i[b-z1eljkvxty] {
        font-size: 1rem;
        color: var(--primary-400);
    }

/* Empty State */
.empty-state[b-z1eljkvxty] {
    padding: var(--spacing-12);
    text-align: center;
    animation: fadeIn-b-z1eljkvxty 0.5s ease-out;
}

.empty-icon[b-z1eljkvxty] {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--spacing-6);
    background: var(--pastel-lavender-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--primary-400);
    box-shadow: var(--shadow-lg);
}

.empty-state h3[b-z1eljkvxty] {
    margin: 0 0 var(--spacing-3) 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.empty-state p[b-z1eljkvxty] {
    margin: 0 0 var(--spacing-6) 0;
    color: var(--text-secondary);
}

/* Button Styles */
.btn-primary[b-z1eljkvxty] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-xl);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

    .btn-primary[b-z1eljkvxty]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .btn-primary:hover[b-z1eljkvxty]::before {
        width: 300%;
        height: 300%;
    }

    .btn-primary:hover[b-z1eljkvxty] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg), var(--glow-primary);
    }

/* Responsive Design */
@media (max-width: 1400px) {
    .service-desks-grid.grid[b-z1eljkvxty] {
        grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    }
}

@media (max-width: 1200px) {
    .service-desks-grid.grid[b-z1eljkvxty] {
        grid-template-columns: 1fr;
    }

    .desk-stats[b-z1eljkvxty] {
        gap: var(--spacing-4);
    }

    .search-container[b-z1eljkvxty],
    .search-results[b-z1eljkvxty] {
        grid-template-columns: 1fr;
    }

    .summary-grid[b-z1eljkvxty] {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media (max-width: 768px) {
    .dashboard-header[b-z1eljkvxty] {
        padding: var(--spacing-6) 0;
    }

    .header-content[b-z1eljkvxty] {
        flex-direction: column;
        gap: var(--spacing-4);
        text-align: center;
    }

    .header-title h1[b-z1eljkvxty] {
        font-size: 2rem;
    }

    .header-actions[b-z1eljkvxty] {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .summary-grid[b-z1eljkvxty] {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

    .service-desks-section[b-z1eljkvxty] {
        padding: var(--spacing-6);
    }

    .desk-header[b-z1eljkvxty] {
        flex-wrap: wrap;
        gap: var(--spacing-4);
    }

    .desk-info[b-z1eljkvxty] {
        width: 100%;
    }

    .desk-stats[b-z1eljkvxty] {
        width: 100%;
        justify-content: space-between;
    }

    .filters-panel[b-z1eljkvxty] {
        grid-template-columns: 1fr;
    }

    .date-display[b-z1eljkvxty] {
        display: none;
    }

    .sync-metadata-grid[b-z1eljkvxty],
    .custom-fields-grid[b-z1eljkvxty],
    .kb-articles-grid[b-z1eljkvxty] {
        grid-template-columns: 1fr;
    }

    .request-types-grid[b-z1eljkvxty] {
        grid-template-columns: 1fr;
    }
}

/* Dark Mode Adjustments */
[data-theme="dark"] .dashboard-container[b-z1eljkvxty]::before {
    opacity: 0.2;
}

[data-theme="dark"] .dashboard-header[b-z1eljkvxty] {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-quaternary) 100%);
}

[data-theme="dark"] .header-title h1[b-z1eljkvxty] {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

[data-theme="dark"] .header-subtitle[b-z1eljkvxty] {
    color: var(--text-secondary);
}

[data-theme="dark"] .service-desk-card[b-z1eljkvxty] {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .organization-card[b-z1eljkvxty] {
    background: rgba(125, 211, 192, 0.1);
}

[data-theme="dark"] .customer-item[b-z1eljkvxty] {
    background: var(--bg-quaternary);
}

[data-theme="dark"] .request-type-card[b-z1eljkvxty] {
    background: rgba(255, 232, 225, 0.1);
}

[data-theme="dark"] .queue-item[b-z1eljkvxty] {
    background: rgba(227, 240, 255, 0.1);
}

[data-theme="dark"] .kb-article-card[b-z1eljkvxty] {
    background: rgba(245, 232, 255, 0.1);
}

[data-theme="dark"] .asset-workspace-card[b-z1eljkvxty] {
    background: rgba(255, 245, 225, 0.1);
}

[data-theme="dark"] .search-section[b-z1eljkvxty],
[data-theme="dark"] .sync-metadata-section[b-z1eljkvxty],
[data-theme="dark"] .custom-fields-section[b-z1eljkvxty],
[data-theme="dark"] .knowledge-base-section[b-z1eljkvxty],
[data-theme="dark"] .import-activity-section[b-z1eljkvxty] {
    background: var(--bg-secondary);
}

[data-theme="dark"] .sync-audit-section[b-z1eljkvxty],
[data-theme="dark"] .service-desks-section[b-z1eljkvxty],
[data-theme="dark"] .assets-section[b-z1eljkvxty] {
    background: var(--bg-tertiary);
}
/* Dashboard Header */
.dashboard-header[b-z1eljkvxty] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    padding: var(--spacing-8) 0;
    margin: calc(var(--spacing-8) * -1) calc(var(--spacing-8) * -1) var(--spacing-8);
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(76, 175, 80, 0.25);
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
}

    .dashboard-header[b-z1eljkvxty]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -10%;
        width: 150%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
        animation: rotateGlow-b-z1eljkvxty 20s linear infinite;
    }

    .dashboard-header[b-z1eljkvxty]::after {
        content: '';
        position: absolute;
        bottom: -50%;
        right: -10%;
        width: 120%;
        height: 150%;
        background: radial-gradient(circle, rgba(69, 160, 73, 0.2) 0%, transparent 60%);
        animation: rotateGlowReverse-b-z1eljkvxty 25s linear infinite;
    }

@keyframes rotateGlow-b-z1eljkvxty {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateGlowReverse-b-z1eljkvxty {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.header-content[b-z1eljkvxty] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.header-main[b-z1eljkvxty] {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
}

.header-icon[b-z1eljkvxty] {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #8abdc8;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), inset 0 2px 8px rgba(255, 255, 255, 0.5);
    animation: iconFloat-b-z1eljkvxty 3s ease-in-out infinite;
}

@keyframes iconFloat-b-z1eljkvxty {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

.header-info h1[b-z1eljkvxty] {
    margin: 0 0 var(--spacing-2) 0;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-on-primary);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.02em;
}

.lead[b-z1eljkvxty] {
    margin: 0;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Header Stats */
.header-stats[b-z1eljkvxty] {
    display: flex;
    gap: var(--spacing-4);
}

.stat-badge[b-z1eljkvxty] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-5);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: var(--transition-base);
}

    .stat-badge:hover[b-z1eljkvxty] {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .stat-badge.success[b-z1eljkvxty] {
        border-color: rgba(102, 187, 106, 0.5);
    }

    .stat-badge.warning[b-z1eljkvxty] {
        border-color: #8abdc8;
    }

    .stat-badge.info[b-z1eljkvxty] {
        border-color: rgba(3, 169, 244, 0.5);
    }

    .stat-badge i[b-z1eljkvxty] {
        font-size: 1.5rem;
        color: var(--text-on-primary);
    }

.stat-content[b-z1eljkvxty] {
    text-align: left;
}

.stat-value[b-z1eljkvxty] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-on-primary);
    line-height: 1;
}

.stat-label[b-z1eljkvxty] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Header Actions Bar */
.header-actions-bar[b-z1eljkvxty] {
    background: white;
    padding: var(--spacing-4) 0;
    margin-bottom: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 10;
}

.actions-content[b-z1eljkvxty] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-8);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    justify-content: flex-end;
}

.btn-action[b-z1eljkvxty] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

    .btn-action.primary[b-z1eljkvxty] {
        background: var(--gradient-primary);
        color: white;
        box-shadow: var(--shadow-md);
    }

        .btn-action.primary:hover:not(:disabled)[b-z1eljkvxty] {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg), var(--glow-primary);
        }

    .btn-action:not(.primary)[b-z1eljkvxty] {
        background: white;
        color: var(--text-secondary);
        border-color: var(--border-secondary);
    }

        .btn-action:not(.primary):hover:not(:disabled)[b-z1eljkvxty] {
            background: var(--bg-tertiary);
            border-color: var(--primary-300);
            color: var(--primary-600);
            transform: translateY(-2px);
        }

    .btn-action:disabled[b-z1eljkvxty] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-action i[b-z1eljkvxty] {
        font-size: 1.125rem;
    }
/* _content/PKFAPI/Components/Pages/Import.razor.rz.scp.css */
/* Import Container */
.import-container[b-c9xsvfbzgz] {
    min-height: 100vh;
    position: relative;
    background: var(--bg-primary);
    overflow-x: visible;
}

/* Background Shapes Animation */
.background-shapes[b-c9xsvfbzgz] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.shape[b-c9xsvfbzgz] {
    position: absolute;
    border-radius: 50%;
    background: var(--gradient-soft);
    opacity: 0.1;
    animation: floatShape-b-c9xsvfbzgz 30s ease-in-out infinite;
}

.shape-1[b-c9xsvfbzgz] {
    width: 600px;
    height: 600px;
    top: -300px;
    right: -200px;
    background: var(--gradient-primary);
    animation-duration: 35s;
}

.shape-2[b-c9xsvfbzgz] {
    width: 400px;
    height: 400px;
    bottom: -200px;
    left: -100px;
    background: var(--gradient-secondary);
    animation-duration: 40s;
    animation-delay: 5s;
}

.shape-3[b-c9xsvfbzgz] {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--gradient-tertiary);
    animation-duration: 45s;
    animation-delay: 10s;
}

@keyframes floatShape-b-c9xsvfbzgz {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    25% {
        transform: translate(50px, -30px) rotate(90deg) scale(1.1);
    }

    50% {
        transform: translate(-30px, 50px) rotate(180deg) scale(0.9);
    }

    75% {
        transform: translate(-50px, -20px) rotate(270deg) scale(1.05);
    }
}

/* Import Header - Enhanced with gradient and animations */
.import-header[b-c9xsvfbzgz] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    padding: var(--spacing-8) 0;
    margin: calc(var(--spacing-8) * -1) calc(var(--spacing-8) * -1) var(--spacing-8);
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.25);
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
}

    .import-header[b-c9xsvfbzgz]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -10%;
        width: 150%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
        animation: rotateGlow-b-c9xsvfbzgz 20s linear infinite;
    }

    .import-header[b-c9xsvfbzgz]::after {
        content: '';
        position: absolute;
        bottom: -50%;
        right: -10%;
        width: 120%;
        height: 150%;
        background: radial-gradient(circle, rgba(240, 147, 251, 0.2) 0%, transparent 60%);
        animation: rotateGlowReverse-b-c9xsvfbzgz 25s linear infinite;
    }

@keyframes rotateGlow-b-c9xsvfbzgz {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateGlowReverse-b-c9xsvfbzgz {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.header-content[b-c9xsvfbzgz] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-8);
    position: relative;
    z-index: 1;
}

.header-main[b-c9xsvfbzgz] {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.header-icon[b-c9xsvfbzgz] {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--primary-600);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), inset 0 2px 8px rgba(255, 255, 255, 0.5);
    animation: iconFloat-b-c9xsvfbzgz 3s ease-in-out infinite;
}

@keyframes iconFloat-b-c9xsvfbzgz {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

.header-info h1[b-c9xsvfbzgz] {
    margin: 0 0 var(--spacing-2) 0;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-on-primary);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.02em;
}

.lead[b-c9xsvfbzgz] {
    margin: 0;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Header Stats */
.header-stats[b-c9xsvfbzgz] {
    display: flex;
    gap: var(--spacing-4);
}

.stat-badge[b-c9xsvfbzgz] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-5);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: var(--transition-base);
}

    .stat-badge:hover[b-c9xsvfbzgz] {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .stat-badge i[b-c9xsvfbzgz] {
        font-size: 1.5rem;
        color: var(--text-on-primary);
    }

.stat-content[b-c9xsvfbzgz] {
    text-align: left;
}

.stat-value[b-c9xsvfbzgz] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-on-primary);
    line-height: 1;
}

.stat-label[b-c9xsvfbzgz] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Notifications */
.notification-container[b-c9xsvfbzgz] {
    position: fixed;
    top: var(--spacing-6);
    right: var(--spacing-6);
    z-index: var(--z-notification);
    max-width: 400px;
}

.notification[b-c9xsvfbzgz] {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-3);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    box-shadow: var(--shadow-2xl);
    position: relative;
    border-left: 4px solid;
    animation: slideIn-b-c9xsvfbzgz 0.3s ease-out;
}

@keyframes slideIn-b-c9xsvfbzgz {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.notification.success[b-c9xsvfbzgz] {
    border-left-color: var(--success-500);
}

.notification.error[b-c9xsvfbzgz] {
    border-left-color: var(--danger-500);
}

.notification.warning[b-c9xsvfbzgz] {
    border-left-color: var(--warning-500);
}

.notification.info[b-c9xsvfbzgz] {
    border-left-color: var(--info-500);
}

.notification-icon[b-c9xsvfbzgz] {
    font-size: 1.5rem;
}

.notification.success .notification-icon[b-c9xsvfbzgz] {
    color: var(--success-500);
}

.notification.error .notification-icon[b-c9xsvfbzgz] {
    color: var(--danger-500);
}

.notification.warning .notification-icon[b-c9xsvfbzgz] {
    color: var(--warning-500);
}

.notification.info .notification-icon[b-c9xsvfbzgz] {
    color: var(--info-500);
}

.notification-content[b-c9xsvfbzgz] {
    flex: 1;
}

    .notification-content h5[b-c9xsvfbzgz] {
        margin: 0 0 var(--spacing-1) 0;
        font-weight: 600;
        color: var(--text-primary);
    }

    .notification-content p[b-c9xsvfbzgz] {
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.875rem;
    }

.notification-details[b-c9xsvfbzgz] {
    margin-top: var(--spacing-2);
    padding: var(--spacing-2);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-family: 'Courier New', monospace;
}

.notification-close[b-c9xsvfbzgz] {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: var(--transition-fast);
}

    .notification-close:hover[b-c9xsvfbzgz] {
        color: var(--text-primary);
    }

/* Step Progress */
.step-progress-container[b-c9xsvfbzgz] {
    max-width: 800px;
    margin: 0 auto var(--spacing-8);
    position: relative;
    z-index: 10;
}

.step-progress[b-c9xsvfbzgz] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.step-item[b-c9xsvfbzgz] {
    text-align: center;
    position: relative;
    z-index: 1;
}

.step-number[b-c9xsvfbzgz] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 3px solid var(--border-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0 auto var(--spacing-2);
    transition: var(--transition-base);
    box-shadow: var(--shadow-md);
    color: var(--text-tertiary);
}

.step-item.active .step-number[b-c9xsvfbzgz] {
    background: var(--gradient-primary);
    border-color: transparent;
    color: var(--text-on-primary);
    box-shadow: var(--shadow-lg), var(--glow-primary);
    animation: pulse-b-c9xsvfbzgz 2s ease-in-out infinite;
}

.step-item.completed .step-number[b-c9xsvfbzgz] {
    background: var(--gradient-success);
    border-color: transparent;
    color: var(--text-on-primary);
}

@keyframes pulse-b-c9xsvfbzgz {
    0%, 100% {
        transform: scale(1);
        box-shadow: var(--shadow-lg), 0 0 0 0 rgba(155, 143, 255, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: var(--shadow-lg), 0 0 0 10px rgba(155, 143, 255, 0);
    }
}

.step-label[b-c9xsvfbzgz] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.step-item.active .step-label[b-c9xsvfbzgz],
.step-item.completed .step-label[b-c9xsvfbzgz] {
    color: var(--text-primary);
}

.step-line[b-c9xsvfbzgz] {
    width: 120px;
    height: 3px;
    background: var(--border-secondary);
    margin: 0 var(--spacing-3);
    margin-top: -30px;
    transition: var(--transition-base);
    position: relative;
}

    .step-line.active[b-c9xsvfbzgz] {
        background: var(--gradient-primary);
    }

        .step-line.active[b-c9xsvfbzgz]::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
            animation: shimmer-b-c9xsvfbzgz 2s ease-in-out infinite;
        }

@keyframes shimmer-b-c9xsvfbzgz {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

/* Step Container */
.step-container[b-c9xsvfbzgz] {
    max-width: 1200px;
    margin: 0 auto;
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--spacing-8);
    box-shadow: var(--shadow-xl);
    position: relative;
    z-index: 10;
}

/* Animations */
.animate-in[b-c9xsvfbzgz] {
    animation: fadeInUp-b-c9xsvfbzgz 0.5s ease-out;
}

@keyframes fadeInUp-b-c9xsvfbzgz {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in[b-c9xsvfbzgz] {
    animation: fadeIn-b-c9xsvfbzgz 0.3s ease-out;
}

@keyframes fadeIn-b-c9xsvfbzgz {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Section Headers */
.section-header[b-c9xsvfbzgz] {
    text-align: center;
    margin-bottom: var(--spacing-8);
}

    .section-header h2[b-c9xsvfbzgz] {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0 0 var(--spacing-2) 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-3);
    }

        .section-header h2 i[b-c9xsvfbzgz] {
            color: var(--primary-500);
        }

    .section-header p[b-c9xsvfbzgz] {
        margin: 0;
        color: var(--text-secondary);
        font-size: 1.125rem;
    }

/* Template Selection */
.template-tabs-container[b-c9xsvfbzgz] {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-6);
}

.template-tabs[b-c9xsvfbzgz] {
    display: flex;
    gap: var(--spacing-2);
    background: var(--bg-tertiary);
    padding: var(--spacing-2);
    border-radius: var(--radius-xl);
}

.tab-button[b-c9xsvfbzgz] {
    padding: var(--spacing-3) var(--spacing-6);
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

    .tab-button:hover[b-c9xsvfbzgz] {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }

    .tab-button.active[b-c9xsvfbzgz] {
        background: var(--gradient-primary);
        color: var(--text-on-primary);
        box-shadow: var(--shadow-md);
    }

    .tab-button i[b-c9xsvfbzgz] {
        font-size: 1.125rem;
    }

/* Sync Status Card */
.sync-status-card[b-c9xsvfbzgz] {
    background: var(--bg-tertiary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    margin-bottom: var(--spacing-6);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    border: 2px solid var(--border-secondary);
    transition: var(--transition-base);
}

    .sync-status-card.syncing[b-c9xsvfbzgz] {
        border-color: var(--info-300);
        background: var(--info-50);
    }

    .sync-status-card.error[b-c9xsvfbzgz] {
        border-color: var(--danger-300);
        background: var(--danger-50);
    }

    .sync-status-card.synced[b-c9xsvfbzgz] {
        border-color: var(--success-300);
        background: var(--success-50);
    }

.sync-icon[b-c9xsvfbzgz] {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.sync-status-card.syncing .sync-icon[b-c9xsvfbzgz] {
    background: var(--info-100);
    color: var(--info-600);
}

.sync-status-card.error .sync-icon[b-c9xsvfbzgz] {
    background: var(--danger-100);
    color: var(--danger-600);
}

.sync-status-card.synced .sync-icon[b-c9xsvfbzgz] {
    background: var(--success-100);
    color: var(--success-600);
}

.sync-content[b-c9xsvfbzgz] {
    flex: 1;
}

    .sync-content h4[b-c9xsvfbzgz] {
        margin: 0 0 var(--spacing-1) 0;
        font-size: 1.125rem;
        font-weight: 600;
    }

.sync-status-card.syncing .sync-content h4[b-c9xsvfbzgz] {
    color: var(--info-700);
}

.sync-status-card.error .sync-content h4[b-c9xsvfbzgz] {
    color: var(--danger-700);
}

.sync-status-card.synced .sync-content h4[b-c9xsvfbzgz] {
    color: var(--success-700);
}

.sync-content p[b-c9xsvfbzgz] {
    margin: 0;
    font-size: 0.875rem;
}

.sync-status-card.syncing .sync-content p[b-c9xsvfbzgz] {
    color: var(--info-600);
}

.sync-status-card.error .sync-content p[b-c9xsvfbzgz] {
    color: var(--danger-600);
}

.sync-status-card.synced .sync-content p[b-c9xsvfbzgz] {
    color: var(--success-600);
}

.sync-actions[b-c9xsvfbzgz] {
    display: flex;
    gap: var(--spacing-2);
}

.btn-sync[b-c9xsvfbzgz] {
    padding: var(--spacing-2) var(--spacing-4);
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

    .btn-sync:hover[b-c9xsvfbzgz] {
        border-color: var(--primary-400);
        color: var(--primary-600);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

/* Info Cards */
.info-card[b-c9xsvfbzgz] {
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    margin-bottom: var(--spacing-6);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    color: var(--text-on-primary);
    position: relative;
    overflow: hidden;
}

    .info-card[b-c9xsvfbzgz]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
        animation: float 20s ease-in-out infinite;
    }

    .info-card.gradient-primary[b-c9xsvfbzgz] {
        background: var(--gradient-primary);
    }

    .info-card.gradient-secondary[b-c9xsvfbzgz] {
        background: var(--gradient-secondary);
    }

.info-icon[b-c9xsvfbzgz] {
    font-size: 1.75rem;
    opacity: 0.9;
}

.info-content h5[b-c9xsvfbzgz] {
    margin: 0 0 var(--spacing-2) 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--secondary-50);
}

.info-content p[b-c9xsvfbzgz] {
    margin: 0;
    font-size: 0.9375rem;
    opacity: 0.95;
    line-height: 1.6;
    color: var(--secondary-50);
}

.info-content strong[b-c9xsvfbzgz] {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.5);
    text-underline-offset: 2px;
}

/* Field Showcase */
.field-showcase[b-c9xsvfbzgz] {
    margin-bottom: var(--spacing-6);
}

.field-category[b-c9xsvfbzgz] {
    margin-bottom: var(--spacing-5);
}

.category-header[b-c9xsvfbzgz] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

    .category-header i[b-c9xsvfbzgz] {
        font-size: 1.25rem;
        color: var(--primary-500);
    }

    .category-header h4[b-c9xsvfbzgz] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.field-grid[b-c9xsvfbzgz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.field-chip[b-c9xsvfbzgz] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    border: 2px solid transparent;
    transition: var(--transition-fast);
    position: relative;
}

    .field-chip:hover[b-c9xsvfbzgz] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    .field-chip.jira-core[b-c9xsvfbzgz] {
        background: var(--pastel-sky-light);
        color: var(--accent-blue);
        border-color: var(--pastel-sky);
    }

    .field-chip.jira-property[b-c9xsvfbzgz] {
        background: var(--pastel-mint-light);
        color: var(--accent-mint);
        border-color: var(--pastel-mint);
    }

    .field-chip.local[b-c9xsvfbzgz] {
        background: var(--pastel-lavender-light);
        color: var(--primary-600);
        border-color: var(--pastel-lavender);
    }

    .field-chip.required[b-c9xsvfbzgz] {
        font-weight: 600;
    }

    .field-chip i[b-c9xsvfbzgz] {
        font-size: 0.875rem;
    }

.required-indicator[b-c9xsvfbzgz] {
    color: var(--danger-500);
    font-weight: 700;
}

/* Template Cards */
.template-card[b-c9xsvfbzgz] {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    position: relative;
    overflow: hidden;
    transition: var(--transition-base);
    border: 2px solid var(--border-secondary);
}

    .template-card:hover[b-c9xsvfbzgz] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-2xl);
    }

    .template-card.customer[b-c9xsvfbzgz] {
        border-color: var(--pastel-pink);
    }

        .template-card.customer:hover[b-c9xsvfbzgz] {
            border-color: var(--pastel-pink-dark);
        }

    .template-card.organization[b-c9xsvfbzgz] {
        border-color: var(--pastel-mint);
    }

        .template-card.organization:hover[b-c9xsvfbzgz] {
            border-color: var(--pastel-mint-dark);
        }

.template-icon[b-c9xsvfbzgz] {
    width: 80px;
    height: 80px;
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--text-on-primary);
    margin-bottom: var(--spacing-4);
    box-shadow: var(--shadow-lg);
    animation: iconFloat-b-c9xsvfbzgz 3s ease-in-out infinite;
}

.template-content h3[b-c9xsvfbzgz] {
    margin: 0 0 var(--spacing-3) 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.template-content p[b-c9xsvfbzgz] {
    margin: 0 0 var(--spacing-5) 0;
}

.btn-download[b-c9xsvfbzgz] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    background: var(--gradient-secondary);
    color: var(--text-on-primary);
    border: none;
    border-radius: var(--radius-xl);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--shadow-md);
}

    .btn-download:hover:not(:disabled)[b-c9xsvfbzgz] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg), var(--glow-secondary);
    }

    .btn-download:disabled[b-c9xsvfbzgz] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.template-decoration[b-c9xsvfbzgz] {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: var(--gradient-soft);
    border-radius: 50%;
    opacity: 0.1;
    animation: rotateGlow-b-c9xsvfbzgz 30s linear infinite;
}

/* Action Section */
.action-section[b-c9xsvfbzgz] {
    display: flex;
    justify-content: center;
    gap: var(--spacing-4);
    margin-top: var(--spacing-6);
    flex-wrap: wrap;
}

.btn-next[b-c9xsvfbzgz],
.btn-secondary[b-c9xsvfbzgz],
.btn-warning[b-c9xsvfbzgz] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    border-radius: var(--radius-xl);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    border: none;
}

.btn-next[b-c9xsvfbzgz] {
    background: var(--gradient-primary);
    color: var(--text-on-primary);
    box-shadow: var(--shadow-md);
}

    .btn-next:hover:not(:disabled)[b-c9xsvfbzgz] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg), var(--glow-primary);
    }

.btn-secondary[b-c9xsvfbzgz] {
    background: white;
    color: var(--text-primary);
    border: 2px solid var(--border-secondary);
}

    .btn-secondary:hover[b-c9xsvfbzgz] {
        background: var(--bg-tertiary);
        border-color: var(--border-tertiary);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.btn-warning[b-c9xsvfbzgz] {
    background: var(--gradient-warning);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}

    .btn-warning:hover[b-c9xsvfbzgz] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg), var(--glow-warning);
    }

/* Upload Section */
.upload-section[b-c9xsvfbzgz] {
    margin-bottom: var(--spacing-6);
}

.upload-zone[b-c9xsvfbzgz] {
    border: 3px dashed var(--border-secondary);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-8);
    text-align: center;
    background: var(--bg-tertiary);
    transition: var(--transition-base);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .upload-zone:hover[b-c9xsvfbzgz],
    .upload-zone.drag-over[b-c9xsvfbzgz] {
        border-color: var(--primary-400);
        background: var(--pastel-lavender-light);
        transform: scale(1.01);
    }

    .upload-zone.has-file[b-c9xsvfbzgz] {
        padding: var(--spacing-6);
        cursor: default;
        background: var(--bg-secondary);
    }

.upload-placeholder[b-c9xsvfbzgz] {
    animation: fadeIn-b-c9xsvfbzgz 0.5s ease-out;
}

.upload-icon-wrapper[b-c9xsvfbzgz] {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--spacing-4);
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--text-on-primary);
    box-shadow: var(--shadow-xl);
    animation: uploadFloat-b-c9xsvfbzgz 3s ease-in-out infinite;
}

@keyframes uploadFloat-b-c9xsvfbzgz {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

.upload-placeholder h3[b-c9xsvfbzgz] {
    margin: 0 0 var(--spacing-2) 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.upload-placeholder p[b-c9xsvfbzgz] {
    margin: 0 0 var(--spacing-4) 0;
    color: var(--text-secondary);
}

.btn-browse[b-c9xsvfbzgz] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    background: white;
    border: 2px solid var(--primary-400);
    border-radius: var(--radius-xl);
    color: var(--primary-600);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
}

    .btn-browse:hover[b-c9xsvfbzgz] {
        background: var(--primary-50);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.upload-hints[b-c9xsvfbzgz] {
    margin-top: var(--spacing-4);
    display: flex;
    justify-content: center;
    gap: var(--spacing-6);
}

    .upload-hints span[b-c9xsvfbzgz] {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        color: var(--text-tertiary);
        font-size: 0.875rem;
    }

    .upload-hints i[b-c9xsvfbzgz] {
        color: var(--success-500);
    }

/* File Uploaded State */
.file-uploaded[b-c9xsvfbzgz] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    animation: fadeIn-b-c9xsvfbzgz 0.3s ease-out;
}

.file-icon[b-c9xsvfbzgz] {
    width: 80px;
    height: 80px;
    background: var(--gradient-success);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--text-on-primary);
    box-shadow: var(--shadow-lg);
}

.file-details[b-c9xsvfbzgz] {
    flex: 1;
}

    .file-details h4[b-c9xsvfbzgz] {
        margin: 0 0 var(--spacing-2) 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.file-meta[b-c9xsvfbzgz] {
    display: flex;
    gap: var(--spacing-4);
}

    .file-meta span[b-c9xsvfbzgz] {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
        color: var(--text-secondary);
        font-size: 0.875rem;
    }

    .file-meta i[b-c9xsvfbzgz] {
        font-size: 0.875rem;
        color: var(--text-tertiary);
    }

.btn-remove[b-c9xsvfbzgz] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    background: white;
    border: 2px solid var(--danger-200);
    border-radius: var(--radius-xl);
    color: var(--danger-600);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
}

    .btn-remove:hover[b-c9xsvfbzgz] {
        background: var(--danger-50);
        border-color: var(--danger-300);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

/* Configuration Panel */
.configuration-panel[b-c9xsvfbzgz] {
    margin-top: var(--spacing-6);
    padding: var(--spacing-6);
    background: var(--bg-tertiary);
    border-radius: var(--radius-xl);
    border: 2px solid var(--border-secondary);
}

    .configuration-panel h3[b-c9xsvfbzgz] {
        margin: 0 0 var(--spacing-5) 0;
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
    }

        .configuration-panel h3 i[b-c9xsvfbzgz] {
            color: var(--primary-500);
        }

/* Config Grid */
.config-grid[b-c9xsvfbzgz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.config-card[b-c9xsvfbzgz] {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    border: 2px solid var(--border-secondary);
    transition: var(--transition-base);
}

    .config-card:hover[b-c9xsvfbzgz] {
        border-color: var(--primary-300);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .config-card.full-width[b-c9xsvfbzgz] {
        grid-column: 1 / -1;
    }

.config-icon[b-c9xsvfbzgz] {
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--text-on-primary);
    flex-shrink: 0;
}

.config-content[b-c9xsvfbzgz] {
    flex: 1;
}

    .config-content label[b-c9xsvfbzgz] {
        display: block;
        margin-bottom: var(--spacing-2);
        font-weight: 600;
        color: var(--text-primary);
    }

.form-select[b-c9xsvfbzgz] {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-base);
}

    .form-select:focus[b-c9xsvfbzgz] {
        outline: none;
        border-color: var(--primary-400);
        box-shadow: 0 0 0 3px var(--pastel-lavender);
    }

.config-hint[b-c9xsvfbzgz] {
    margin-top: var(--spacing-2);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--text-tertiary);
    font-size: 0.8125rem;
}

.loading-inline[b-c9xsvfbzgz] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--text-secondary);
    font-size: 0.875rem;
    padding: var(--spacing-3) 0;
}

/* Advanced Options */
.advanced-options[b-c9xsvfbzgz] {
    margin-top: var(--spacing-6);
}

    .advanced-options h4[b-c9xsvfbzgz] {
        margin: 0 0 var(--spacing-4) 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.option-list[b-c9xsvfbzgz] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.option-item[b-c9xsvfbzgz] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    cursor: pointer;
    transition: var(--transition-fast);
}

    .option-item:hover .option-checkbox[b-c9xsvfbzgz] {
        border-color: var(--primary-400);
    }

    .option-item input[type="checkbox"][b-c9xsvfbzgz] {
        position: absolute;
        opacity: 0;
    }

.option-checkbox[b-c9xsvfbzgz] {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-tertiary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition-fast);
    background: white;
}

.option-item input[type="checkbox"]:checked ~ .option-checkbox[b-c9xsvfbzgz] {
    background: var(--gradient-primary);
    border-color: transparent;
}

    .option-item input[type="checkbox"]:checked ~ .option-checkbox[b-c9xsvfbzgz]::after {
        content: '\f00c';
        font-family: 'Font Awesome 6 Pro';
        font-weight: 300;
        color: white;
        font-size: 0.875rem;
    }

.option-label[b-c9xsvfbzgz] {
    flex: 1;
}

.option-title[b-c9xsvfbzgz] {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-1);
}

.option-description[b-c9xsvfbzgz] {
    display: block;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Field Mapping Section */
.field-mapping-section[b-c9xsvfbzgz] {
    margin-top: var(--spacing-6);
    padding: var(--spacing-5);
    background: white;
    border-radius: var(--radius-xl);
    border: 2px solid var(--border-secondary);
}

    .field-mapping-section h4[b-c9xsvfbzgz] {
        margin: 0 0 var(--spacing-2) 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
    }

        .field-mapping-section h4 i[b-c9xsvfbzgz] {
            color: var(--primary-500);
        }

.section-subtitle[b-c9xsvfbzgz] {
    margin: 0 0 var(--spacing-5) 0;
    color: var(--text-secondary);
}

.analyzing-state[b-c9xsvfbzgz] {
    text-align: center;
    padding: var(--spacing-6);
}

.analyzing-icon[b-c9xsvfbzgz] {
    font-size: 3rem;
    color: var(--primary-500);
    margin-bottom: var(--spacing-3);
}

.analyzing-state p[b-c9xsvfbzgz] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1rem;
}

/* Mapping Grid */
.mapping-grid[b-c9xsvfbzgz] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.mapping-row[b-c9xsvfbzgz] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--spacing-4);
    align-items: center;
    padding: var(--spacing-3);
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    transition: var(--transition-fast);
}

    .mapping-row:hover[b-c9xsvfbzgz] {
        background: var(--pastel-lavender-light);
    }

    .mapping-row.high-confidence[b-c9xsvfbzgz] {
        background: var(--success-50);
        border: 2px solid var(--success-200);
    }

.mapping-source[b-c9xsvfbzgz] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.column-info strong[b-c9xsvfbzgz] {
    display: block;
    color: var(--text-primary);
    font-size: 0.9375rem;
    margin-bottom: var(--spacing-1);
}

.column-type[b-c9xsvfbzgz] {
    display: block;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    text-transform: capitalize;
}

.mapping-arrow[b-c9xsvfbzgz] {
    color: var(--text-tertiary);
    font-size: 1.25rem;
}

.mapping-target[b-c9xsvfbzgz] {
    position: relative;
}

.mapping-confidence[b-c9xsvfbzgz] {
    position: absolute;
    top: 50%;
    right: -120px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

    .mapping-confidence.high[b-c9xsvfbzgz] {
        color: var(--success-600);
    }

    .mapping-confidence.medium[b-c9xsvfbzgz] {
        color: var(--warning-600);
    }

    .mapping-confidence.low[b-c9xsvfbzgz] {
        color: var(--text-tertiary);
    }

/* Preview Section */
.validation-summary[b-c9xsvfbzgz] {
    background: var(--bg-tertiary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
    border: 3px solid var(--border-secondary);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

    .validation-summary[b-c9xsvfbzgz]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        opacity: 0.1;
    }

    .validation-summary.has-errors[b-c9xsvfbzgz] {
        border-color: var(--warning-300);
        background: var(--warning-50);
    }

        .validation-summary.has-errors[b-c9xsvfbzgz]::before {
            background: var(--gradient-warning);
        }

    .validation-summary.all-valid[b-c9xsvfbzgz] {
        border-color: var(--success-300);
        background: var(--success-50);
    }

        .validation-summary.all-valid[b-c9xsvfbzgz]::before {
            background: var(--gradient-success);
        }

.summary-icon[b-c9xsvfbzgz] {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-4);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}

.validation-summary.has-errors .summary-icon[b-c9xsvfbzgz] {
    background: var(--warning-100);
    color: var(--warning-600);
}

.validation-summary.all-valid .summary-icon[b-c9xsvfbzgz] {
    background: var(--success-100);
    color: var(--success-600);
}

.summary-content[b-c9xsvfbzgz] {
    text-align: center;
}

    .summary-content h3[b-c9xsvfbzgz] {
        margin: 0 0 var(--spacing-3) 0;
        font-size: 1.5rem;
        font-weight: 600;
    }

.validation-summary.has-errors .summary-content h3[b-c9xsvfbzgz] {
    color: var(--warning-700);
}

.validation-summary.all-valid .summary-content h3[b-c9xsvfbzgz] {
    color: var(--success-700);
}

.summary-stats[b-c9xsvfbzgz] {
    display: flex;
    justify-content: center;
    gap: var(--spacing-6);
}

    .summary-stats .stat[b-c9xsvfbzgz] {
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

        .summary-stats .stat i[b-c9xsvfbzgz] {
            font-size: 1.25rem;
        }

        .summary-stats .stat.valid[b-c9xsvfbzgz] {
            color: var(--success-600);
        }

        .summary-stats .stat.invalid[b-c9xsvfbzgz] {
            color: var(--danger-600);
        }

    .summary-stats .value[b-c9xsvfbzgz] {
        font-size: 1.5rem;
        font-weight: 700;
    }

    .summary-stats .label[b-c9xsvfbzgz] {
        font-size: 0.875rem;
    }

/* Validation Issues */
.validation-issues[b-c9xsvfbzgz] {
    margin-top: var(--spacing-5);
    padding: var(--spacing-4);
    background: white;
    border-radius: var(--radius-lg);
    text-align: left;
}

    .validation-issues h4[b-c9xsvfbzgz] {
        margin: 0 0 var(--spacing-3) 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.issue-list[b-c9xsvfbzgz] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.issue-item[b-c9xsvfbzgz] {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

.issue-row[b-c9xsvfbzgz] {
    font-weight: 600;
    color: var(--danger-600);
    white-space: nowrap;
}

.issue-message[b-c9xsvfbzgz] {
    color: var(--text-secondary);
}

.issue-more[b-c9xsvfbzgz] {
    text-align: center;
    color: var(--text-tertiary);
    font-style: italic;
    margin-top: var(--spacing-3);
}

/* Service Desk Info */
.service-desk-info[b-c9xsvfbzgz] {
    margin-top: var(--spacing-4);
    padding: var(--spacing-3);
    background: white;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

    .service-desk-info i[b-c9xsvfbzgz] {
        color: var(--info-600);
    }

    .service-desk-info p[b-c9xsvfbzgz] {
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.875rem;
    }

/* Data Preview Section */
.data-preview-section[b-c9xsvfbzgz] {
    margin-top: var(--spacing-6);
}

    .data-preview-section h3[b-c9xsvfbzgz] {
        margin: 0 0 var(--spacing-2) 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.preview-subtitle[b-c9xsvfbzgz] {
    margin: 0 0 var(--spacing-4) 0;
    color: var(--text-secondary);
}

.preview-table-wrapper[b-c9xsvfbzgz] {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    background: white;
}

.preview-table[b-c9xsvfbzgz] {
    width: 100%;
    border-collapse: collapse;
}

    .preview-table th[b-c9xsvfbzgz] {
        background: var(--bg-tertiary);
        padding: var(--spacing-3) var(--spacing-4);
        text-align: left;
        font-weight: 600;
        font-size: 0.875rem;
        color: var(--text-primary);
        border-bottom: 2px solid var(--border-secondary);
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .preview-table th.row-number[b-c9xsvfbzgz],
        .preview-table td.row-number[b-c9xsvfbzgz] {
            width: 80px;
            text-align: center;
            background: var(--bg-quaternary);
            font-weight: 600;
            color: var(--text-tertiary);
        }

        .preview-table th.status-column[b-c9xsvfbzgz],
        .preview-table td.status-column[b-c9xsvfbzgz] {
            width: 120px;
            text-align: center;
        }

.header-content[b-c9xsvfbzgz] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.mapping-indicator[b-c9xsvfbzgz] {
    display: block;
    font-size: 0.75rem;
    color: var(--primary-600);
    font-weight: 500;
}

    .mapping-indicator i[b-c9xsvfbzgz] {
        font-size: 0.625rem;
    }

.preview-table td[b-c9xsvfbzgz] {
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--border-secondary);
    font-size: 0.875rem;
}

.preview-table tr[b-c9xsvfbzgz] {
    transition: var(--transition-fast);
}

    .preview-table tr:hover[b-c9xsvfbzgz] {
        background: var(--bg-tertiary);
    }

    .preview-table tr.has-error[b-c9xsvfbzgz] {
        background: var(--danger-50);
    }

        .preview-table tr.has-error:hover[b-c9xsvfbzgz] {
            background: var(--danger-100);
        }

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

    .status-indicator.valid[b-c9xsvfbzgz] {
        background: var(--success-100);
        color: var(--success-700);
    }

    .status-indicator.error[b-c9xsvfbzgz] {
        background: var(--danger-100);
        color: var(--danger-700);
    }

    .status-indicator.partial[b-c9xsvfbzgz] {
        background: var(--warning-100);
        color: var(--warning-700);
    }

.preview-info[b-c9xsvfbzgz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.875rem;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Processing Dashboard */
.processing-dashboard[b-c9xsvfbzgz] {
    text-align: center;
}

.progress-card[b-c9xsvfbzgz] {
    background: var(--gradient-soft);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
    position: relative;
    overflow: hidden;
}

.progress-header[b-c9xsvfbzgz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

    .progress-header h3[b-c9xsvfbzgz] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.progress-percentage[b-c9xsvfbzgz] {
    font-size: 3rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.progress-track[b-c9xsvfbzgz] {
    height: 40px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.progress-fill[b-c9xsvfbzgz] {
    height: 100%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.5s ease;
    position: relative;
}

.progress-glow[b-c9xsvfbzgz] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: progressShimmer-b-c9xsvfbzgz 2s ease-in-out infinite;
}

@keyframes progressShimmer-b-c9xsvfbzgz {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

.progress-stats[b-c9xsvfbzgz] {
    margin-top: var(--spacing-3);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Live Stats Grid */
.live-stats-grid[b-c9xsvfbzgz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.live-stat-card[b-c9xsvfbzgz] {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    position: relative;
    overflow: hidden;
    border: 2px solid var(--border-secondary);
    transition: var(--transition-base);
}

    .live-stat-card:hover[b-c9xsvfbzgz] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

    .live-stat-card.success[b-c9xsvfbzgz] {
        border-color: var(--success-200);
    }

    .live-stat-card.danger[b-c9xsvfbzgz] {
        border-color: var(--danger-200);
    }

    .live-stat-card.warning[b-c9xsvfbzgz] {
        border-color: var(--warning-200);
    }

.stat-icon[b-c9xsvfbzgz] {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.live-stat-card.success .stat-icon[b-c9xsvfbzgz] {
    background: var(--success-100);
    color: var(--success-600);
}

.live-stat-card.danger .stat-icon[b-c9xsvfbzgz] {
    background: var(--danger-100);
    color: var(--danger-600);
}

.live-stat-card.warning .stat-icon[b-c9xsvfbzgz] {
    background: var(--warning-100);
    color: var(--warning-600);
}

.stat-content[b-c9xsvfbzgz] {
    flex: 1;
}



.stat-animation[b-c9xsvfbzgz] {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    opacity: 0.05;
}

.live-stat-card.success .stat-animation[b-c9xsvfbzgz] {
    background: var(--gradient-success);
    animation: rotateGlow-b-c9xsvfbzgz 20s linear infinite;
}

.live-stat-card.danger .stat-animation[b-c9xsvfbzgz] {
    background: var(--gradient-danger);
    animation: rotateGlowReverse-b-c9xsvfbzgz 25s linear infinite;
}

.live-stat-card.warning .stat-animation[b-c9xsvfbzgz] {
    background: var(--gradient-warning);
    animation: rotateGlow-b-c9xsvfbzgz 30s linear infinite;
}

/* Live Errors Card */
.live-errors-card[b-c9xsvfbzgz] {
    background: var(--warning-50);
    border: 2px solid var(--warning-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    text-align: left;
}

    .live-errors-card h4[b-c9xsvfbzgz] {
        margin: 0 0 var(--spacing-4) 0;
        color: var(--warning-700);
        font-size: 1.125rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

.error-feed[b-c9xsvfbzgz] {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.error-entry[b-c9xsvfbzgz] {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--spacing-3);
    display: flex;
    gap: var(--spacing-3);
    border: 1px solid var(--warning-100);
}

.error-time[b-c9xsvfbzgz] {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.error-details[b-c9xsvfbzgz] {
    flex: 1;
}

.error-record[b-c9xsvfbzgz] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-1);
    font-size: 0.875rem;
}

.error-message[b-c9xsvfbzgz] {
    color: var(--danger-600);
    font-size: 0.8125rem;
}

/* Completion Report */
.completion-header[b-c9xsvfbzgz] {
    text-align: center;
    padding: var(--spacing-8);
    border-radius: var(--radius-2xl);
    margin-bottom: var(--spacing-6);
    color: white;
    position: relative;
    overflow: hidden;
}

    .completion-header[b-c9xsvfbzgz]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -10%;
        width: 150%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
        animation: rotateGlow-b-c9xsvfbzgz 20s linear infinite;
    }

    .completion-header.success[b-c9xsvfbzgz] {
        background: var(--gradient-success);
    }

    .completion-header.failed[b-c9xsvfbzgz] {
        background: var(--gradient-danger);
    }

    .completion-header.partial[b-c9xsvfbzgz] {
        background: var(--gradient-warning);
    }

.completion-icon[b-c9xsvfbzgz] {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--spacing-4);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}

.completion-header h2[b-c9xsvfbzgz] {
    margin: 0 0 var(--spacing-3) 0;
    font-size: 2.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.completion-header p[b-c9xsvfbzgz] {
    margin: 0;
    font-size: 1.125rem;
    opacity: 0.95;
}

/* Final Stats Grid */
.final-stats-grid[b-c9xsvfbzgz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.final-stat-card[b-c9xsvfbzgz] {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    border: 2px solid var(--border-secondary);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

    .final-stat-card[b-c9xsvfbzgz]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        opacity: 0.05;
        transition: opacity 0.3s ease;
    }

    .final-stat-card:hover[b-c9xsvfbzgz]::before {
        opacity: 0.1;
    }

    .final-stat-card:hover[b-c9xsvfbzgz] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-xl);
    }

    .final-stat-card.success[b-c9xsvfbzgz] {
        border-color: var(--success-200);
    }

        .final-stat-card.success[b-c9xsvfbzgz]::before {
            background: var(--gradient-success);
        }

    .final-stat-card.danger[b-c9xsvfbzgz] {
        border-color: var(--danger-200);
    }

        .final-stat-card.danger[b-c9xsvfbzgz]::before {
            background: var(--gradient-danger);
        }

    .final-stat-card.info[b-c9xsvfbzgz] {
        border-color: var(--info-200);
    }

        .final-stat-card.info[b-c9xsvfbzgz]::before {
            background: var(--gradient-info);
        }

    .final-stat-card .stat-icon[b-c9xsvfbzgz] {
        width: 80px;
        height: 80px;
        border-radius: var(--radius-xl);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
    }

    .final-stat-card.success .stat-icon[b-c9xsvfbzgz] {
        background: var(--success-100);
        color: var(--success-600);
    }

    .final-stat-card.danger .stat-icon[b-c9xsvfbzgz] {
        background: var(--danger-100);
        color: var(--danger-600);
    }

    .final-stat-card.info .stat-icon[b-c9xsvfbzgz] {
        background: var(--info-100);
        color: var(--info-600);
    }

    .final-stat-card h3[b-c9xsvfbzgz] {
        margin: 0 0 var(--spacing-2) 0;
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    .final-stat-card p[b-c9xsvfbzgz] {
        margin: 0;
        color: var(--text-secondary);
        font-size: 1rem;
    }

/* Error Report Card */
.error-report-card[b-c9xsvfbzgz] {
    background: var(--bg-tertiary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

    .error-report-card h3[b-c9xsvfbzgz] {
        margin: 0 0 var(--spacing-4) 0;
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--danger-600);
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
    }

.error-table-wrapper[b-c9xsvfbzgz] {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.error-table[b-c9xsvfbzgz] {
    width: 100%;
    border-collapse: collapse;
}

    .error-table th[b-c9xsvfbzgz] {
        background: var(--bg-quaternary);
        padding: var(--spacing-3) var(--spacing-4);
        text-align: left;
        font-weight: 600;
        font-size: 0.875rem;
        color: var(--text-primary);
        border-bottom: 2px solid var(--border-secondary);
    }

    .error-table td[b-c9xsvfbzgz] {
        padding: var(--spacing-3) var(--spacing-4);
        border-bottom: 1px solid var(--border-secondary);
        font-size: 0.875rem;
    }

    .error-table tr:hover[b-c9xsvfbzgz] {
        background: var(--bg-tertiary);
    }

.error-text[b-c9xsvfbzgz] {
    color: var(--danger-600);
    font-weight: 500;
}

.api-error[b-c9xsvfbzgz] {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin-top: var(--spacing-1);
}

.error-footer[b-c9xsvfbzgz] {
    padding: var(--spacing-3);
    background: var(--bg-tertiary);
    text-align: center;
    color: var(--text-tertiary);
    font-style: italic;
    font-size: 0.875rem;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .step-container[b-c9xsvfbzgz] {
        max-width: 100%;
        margin: 0 var(--spacing-4);
    }

    .config-grid[b-c9xsvfbzgz] {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 768px) {
    .import-header[b-c9xsvfbzgz] {
        padding: var(--spacing-6) 0;
    }

    .header-main[b-c9xsvfbzgz] {
        flex-direction: column;
        text-align: center;
    }

    .header-icon[b-c9xsvfbzgz] {
        width: 80px;
        height: 80px;
        font-size: 2.5rem;
    }

    .header-info h1[b-c9xsvfbzgz] {
        font-size: 2rem;
    }

    .header-stats[b-c9xsvfbzgz] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .notification-container[b-c9xsvfbzgz] {
        left: var(--spacing-4);
        right: var(--spacing-4);
        max-width: none;
    }

    .step-progress[b-c9xsvfbzgz] {
        flex-direction: column;
        gap: var(--spacing-3);
    }

    .step-line[b-c9xsvfbzgz] {
        width: 3px;
        height: 50px;
        margin: var(--spacing-2) auto;
    }

    .step-container[b-c9xsvfbzgz] {
        padding: var(--spacing-5);
        margin: 0 var(--spacing-3);
    }

    .template-tabs[b-c9xsvfbzgz] {
        flex-direction: column;
        width: 100%;
    }

    .tab-button[b-c9xsvfbzgz] {
        width: 100%;
        justify-content: center;
    }

    .field-grid[b-c9xsvfbzgz] {
        gap: var(--spacing-1);
    }

    .field-chip[b-c9xsvfbzgz] {
        font-size: 0.75rem;
        padding: var(--spacing-1) var(--spacing-2);
    }

    .upload-icon-wrapper[b-c9xsvfbzgz] {
        width: 80px;
        height: 80px;
        font-size: 3rem;
    }

    .file-uploaded[b-c9xsvfbzgz] {
        flex-direction: column;
        text-align: center;
    }

    .mapping-row[b-c9xsvfbzgz] {
        grid-template-columns: 1fr;
        gap: var(--spacing-2);
    }

    .mapping-arrow[b-c9xsvfbzgz] {
        display: none;
    }

    .mapping-confidence[b-c9xsvfbzgz] {
        position: static;
        margin-top: var(--spacing-2);
    }

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

    .action-section[b-c9xsvfbzgz] {
        flex-direction: column;
    }

        .action-section button[b-c9xsvfbzgz] {
            width: 100%;
        }

    .preview-table[b-c9xsvfbzgz] {
        font-size: 0.75rem;
    }

        .preview-table th[b-c9xsvfbzgz],
        .preview-table td[b-c9xsvfbzgz] {
            padding: var(--spacing-2);
        }

    .completion-header[b-c9xsvfbzgz] {
        padding: var(--spacing-6);
    }

    .completion-icon[b-c9xsvfbzgz] {
        width: 80px;
        height: 80px;
        font-size: 3rem;
    }

    .completion-header h2[b-c9xsvfbzgz] {
        font-size: 1.75rem;
    }
}

/* Dark Mode Adjustments */
[data-theme="dark"] .step-container[b-c9xsvfbzgz] {
    background: var(--bg-secondary);
}

[data-theme="dark"] .sync-status-card[b-c9xsvfbzgz] {
    background: var(--bg-quaternary);
}

[data-theme="dark"] .template-card[b-c9xsvfbzgz] {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .upload-zone[b-c9xsvfbzgz] {
    background: var(--bg-quaternary);
}

    [data-theme="dark"] .upload-zone.has-file[b-c9xsvfbzgz] {
        background: var(--bg-tertiary);
    }

[data-theme="dark"] .configuration-panel[b-c9xsvfbzgz] {
    background: var(--bg-quaternary);
}

[data-theme="dark"] .config-card[b-c9xsvfbzgz] {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .field-mapping-section[b-c9xsvfbzgz] {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .mapping-row[b-c9xsvfbzgz] {
    background: var(--bg-quaternary);
}

    [data-theme="dark"] .mapping-row:hover[b-c9xsvfbzgz] {
        background: rgba(232, 227, 245, 0.1);
    }

[data-theme="dark"] .validation-summary[b-c9xsvfbzgz] {
    background: var(--bg-quaternary);
}

[data-theme="dark"] .preview-table-wrapper[b-c9xsvfbzgz] {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .preview-table th[b-c9xsvfbzgz] {
    background: var(--bg-quaternary);
}

[data-theme="dark"] .live-stat-card[b-c9xsvfbzgz] {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .final-stat-card[b-c9xsvfbzgz] {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .error-report-card[b-c9xsvfbzgz] {
    background: var(--bg-quaternary);
}

[data-theme="dark"] .error-table-wrapper[b-c9xsvfbzgz] {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .error-table th[b-c9xsvfbzgz] {
    background: var(--bg-quaternary);
}

/* Print Styles */
@media print {
    .background-shapes[b-c9xsvfbzgz],
    .notification-container[b-c9xsvfbzgz],
    .action-section[b-c9xsvfbzgz] {
        display: none !important;
    }

    .import-header[b-c9xsvfbzgz] {
        background: none;
        color: black;
    }

    .step-container[b-c9xsvfbzgz] {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}
/* _content/PKFAPI/Components/Pages/OrganizationDetail.razor.rz.scp.css */
/* Organization Detail Container */
.organization-detail-container[b-vwltdgdue3] {
    min-height: 100vh;
    animation: fadeIn-b-vwltdgdue3 0.5s ease-out;
    position: relative;
    background: var(--bg-primary);
}

@keyframes fadeIn-b-vwltdgdue3 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.action-btn[b-vwltdgdue3] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .action-btn:hover[b-vwltdgdue3] {
        background: var(--pastel-mint);
        color: var(--accent-mint-dark);
        transform: scale(1.1);
    }
/* Detail Header */
.detail-header[b-vwltdgdue3] {
    background: var(--gradient-vibrant);
    padding: var(--spacing-6) 0;
    margin: calc(var(--spacing-8) * -1) calc(var(--spacing-8) * -1) var(--spacing-8);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(125, 211, 192, 0.1);
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
}

    .detail-header[b-vwltdgdue3]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 120%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
        animation: float-b-vwltdgdue3 25s ease-in-out infinite;
    }

@keyframes float-b-vwltdgdue3 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(-30px, 30px) rotate(120deg);
    }

    66% {
        transform: translate(20px, -20px) rotate(240deg);
    }
}

.header-content[b-vwltdgdue3] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-8);
    position: relative;
    z-index: 1;
}

/* Breadcrumb */
.breadcrumb[b-vwltdgdue3] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
    font-size: 0.875rem;
}

    .breadcrumb a[b-vwltdgdue3] {
        color: var(--text-on-primary);
        text-decoration: none;
        font-weight: 500;
        transition: var(--transition-fast);
        opacity: 0.9;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

        .breadcrumb a:hover[b-vwltdgdue3] {
            opacity: 1;
            text-decoration: underline;
            transform: translateX(2px);
        }

    .breadcrumb i[b-vwltdgdue3] {
        font-size: 0.75rem;
        color: var(--text-on-primary);
        opacity: 0.7;
    }

    .breadcrumb span[b-vwltdgdue3] {
        color: var(--text-on-primary);
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

/* Header Main */
.header-main[b-vwltdgdue3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-info[b-vwltdgdue3] {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
}

.org-icon-large[b-vwltdgdue3] {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--text-on-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    animation: iconFloat-b-vwltdgdue3 3s ease-in-out infinite;
}

@keyframes iconFloat-b-vwltdgdue3 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.org-details h1[b-vwltdgdue3] {
    margin: 0 0 var(--spacing-2) 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-on-primary);

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.org-meta[b-vwltdgdue3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-4);
}

.meta-item[b-vwltdgdue3] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--text-on-primary);
    font-size: 0.875rem;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

    .meta-item i[b-vwltdgdue3] {
        font-size: 1rem;
        opacity: 0.8;
    }

.badge[b-vwltdgdue3] {
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: var(--transition-fast);
}

    .badge.scim[b-vwltdgdue3] {
        background: rgba(255, 255, 255, 0.2);
        color: var(--text-on-primary);
        border: 1px solid rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(10px);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

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

.btn-action[b-vwltdgdue3] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    background: white;
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--shadow-md);
}

    .btn-action:hover:not(:disabled)[b-vwltdgdue3] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .btn-action:disabled[b-vwltdgdue3] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-action.primary[b-vwltdgdue3] {
        background: var(--gradient-primary);
        color: var(--text-on-primary);
    }

    .btn-action.danger[b-vwltdgdue3] {
        color: var(--danger-600);
        background: white;
        border-color: var(--danger-200);
    }

        .btn-action.danger:hover:not(:disabled)[b-vwltdgdue3] {
            background: var(--danger-50);
            border-color: var(--danger-300);
            color: var(--danger-700);
        }

/* Statistics Grid */
.stats-grid[b-vwltdgdue3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
    position: relative;
    z-index: 10;
}

.stat-card[b-vwltdgdue3] {
    position: relative;
    padding: var(--spacing-5);
    border-radius: var(--radius-xl);
    color: var(--text-on-primary);
    overflow: hidden;
    transition: var(--transition-base);
    animation: slideUp-b-vwltdgdue3 0.5s ease-out backwards;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

    .stat-card:nth-child(1)[b-vwltdgdue3] {
        animation-delay: 0.1s;
    }

    .stat-card:nth-child(2)[b-vwltdgdue3] {
        animation-delay: 0.2s;
    }

    .stat-card:nth-child(3)[b-vwltdgdue3] {
        animation-delay: 0.3s;
    }

    .stat-card:nth-child(4)[b-vwltdgdue3] {
        animation-delay: 0.4s;
    }

@keyframes slideUp-b-vwltdgdue3 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-card:hover[b-vwltdgdue3] {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.stat-card.gradient-primary[b-vwltdgdue3] {
    background: var(--gradient-primary);
}

.stat-card.gradient-secondary[b-vwltdgdue3] {
    background: var(--gradient-secondary);
}

.stat-card.gradient-tertiary[b-vwltdgdue3] {
    background: var(--gradient-tertiary);
}

.stat-card.gradient-info[b-vwltdgdue3] {
    background: var(--gradient-info);
}

.stat-icon[b-vwltdgdue3] {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.stat-content[b-vwltdgdue3] {
    flex: 1;
}

.stat-value[b-vwltdgdue3] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--spacing-1);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-label[b-vwltdgdue3] {
    font-size: 0.875rem;
    opacity: 0.9;
    font-weight: 500;
}

/* Content Tabs */
.content-tabs[b-vwltdgdue3] {
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
    z-index: 10;
}

.tabs-header[b-vwltdgdue3] {
    display: flex;
    align-items: center;
    background: var(--bg-tertiary);
    border-bottom: 2px solid var(--border-secondary);
    padding: 0 var(--spacing-6);
}

.tab-btn[b-vwltdgdue3] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4) var(--spacing-5);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
}

    .tab-btn:hover[b-vwltdgdue3] {
        color: var(--text-primary);
        background: var(--bg-secondary);
    }

    .tab-btn.active[b-vwltdgdue3] {
        color: var(--accent-mint);
        border-bottom-color: var(--accent-mint);
        background: white;
    }

    .tab-btn i[b-vwltdgdue3] {
        font-size: 1.125rem;
    }

.tab-badge[b-vwltdgdue3] {
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--bg-quaternary);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}

.tab-btn.active .tab-badge[b-vwltdgdue3] {
    background: var(--accent-mint);
    color: var(--text-on-accent);
}

.tab-content[b-vwltdgdue3] {
    padding: var(--spacing-6);
}

/* Tab Toolbar */
.tab-toolbar[b-vwltdgdue3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
}

    .tab-toolbar h3[b-vwltdgdue3] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.search-box[b-vwltdgdue3] {
    position: relative;
    width: 300px;
}

    .search-box i[b-vwltdgdue3] {
        position: absolute;
        left: var(--spacing-4);
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-tertiary);
        pointer-events: none;
    }

    .search-box input[b-vwltdgdue3] {
        width: 100%;
        padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-10);
        background: var(--bg-secondary);
        border: 2px solid var(--border-secondary);
        border-radius: var(--radius-lg);
        font-size: 0.875rem;
        transition: var(--transition-base);
        color: var(--text-primary);
    }

        .search-box input:focus[b-vwltdgdue3] {
            outline: none;
            border-color: var(--accent-mint);
            box-shadow: 0 0 0 4px var(--pastel-mint-light);
        }

.btn-add[b-vwltdgdue3] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    background: var(--gradient-secondary);
    border: none;
    border-radius: var(--radius-xl);
    color: var(--text-on-primary);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--shadow-md);
}

    .btn-add:hover[b-vwltdgdue3] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg), var(--glow-secondary);
    }

/* Customers Table */
.customers-table[b-vwltdgdue3] {
    overflow-x: auto;
}

    .customers-table table[b-vwltdgdue3] {
        width: 100%;
        border-collapse: collapse;
    }

    .customers-table th[b-vwltdgdue3] {
        text-align: left;
        padding: var(--spacing-3) var(--spacing-4);
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 2px solid var(--border-secondary);
        background: var(--bg-tertiary);
    }

    .customers-table td[b-vwltdgdue3] {
        padding: var(--spacing-4);
        border-bottom: 1px solid var(--border-secondary);
        font-size: 0.875rem;
    }

    .customers-table tr:hover[b-vwltdgdue3] {
        background: var(--pastel-mint-light);
    }

.customer-cell[b-vwltdgdue3] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.customer-avatar[b-vwltdgdue3] {
    width: 36px;
    height: 36px;
    background: var(--gradient-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-primary);
    font-size: 0.875rem;
    font-weight: 600;
}

.customer-name[b-vwltdgdue3] {
    font-weight: 600;
    color: var(--text-primary);
}

.badge.active[b-vwltdgdue3] {
    background: var(--success-100);
    color: var(--success-700);
    border: 1px solid var(--success-200);
}

.badge.inactive[b-vwltdgdue3] {
    background: var(--gray-100);
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
}

.request-count[b-vwltdgdue3] {
    font-weight: 600;
    color: var(--accent-mint);
}

.table-actions[b-vwltdgdue3] {
    display: flex;
    gap: var(--spacing-2);
}

.action-btn.small[b-vwltdgdue3] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .action-btn.small:hover[b-vwltdgdue3] {
        background: var(--pastel-mint);
        color: var(--accent-mint);
        transform: scale(1.1);
    }

    .action-btn.small.danger:hover[b-vwltdgdue3] {
        background: var(--danger-50);
        color: var(--danger-600);
    }

/* Properties Tab */
.properties-list[b-vwltdgdue3] {
    display: grid;
    gap: var(--spacing-4);
}

.property-item[b-vwltdgdue3] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    transition: var(--transition-base);
}

    .property-item:hover[b-vwltdgdue3] {
        border-color: var(--pastel-lavender);
        box-shadow: var(--shadow-sm);
    }

.property-header[b-vwltdgdue3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-3);
}

.property-key[b-vwltdgdue3] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9375rem;
}

.property-actions[b-vwltdgdue3] {
    display: flex;
    gap: var(--spacing-2);
}

.property-value[b-vwltdgdue3] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    word-break: break-word;
}

.json-value[b-vwltdgdue3] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
    font-family: 'Courier New', monospace;
    font-size: 0.8125rem;
    overflow-x: auto;
    white-space: pre;
}

.property-meta[b-vwltdgdue3] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

    .property-meta i[b-vwltdgdue3] {
        font-size: 0.875rem;
    }

/* Service Desks Tab */
.service-desks-grid[b-vwltdgdue3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-4);
}

.service-desk-card[b-vwltdgdue3] {
    background: var(--bg-secondary);
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
    transition: var(--transition-base);
}

    .service-desk-card:hover[b-vwltdgdue3] {
        border-color: var(--pastel-lavender);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.sd-header[b-vwltdgdue3] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.sd-icon[b-vwltdgdue3] {
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-primary);
    font-size: 1.25rem;
}

.sd-info[b-vwltdgdue3] {
    flex: 1;
}

    .sd-info h4[b-vwltdgdue3] {
        margin: 0 0 var(--spacing-1) 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.sd-key[b-vwltdgdue3] {
    font-size: 0.875rem;
    color: var(--text-tertiary);
}

/* Unlink Button */
.btn-unlink[b-vwltdgdue3] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-danger-bg);
    border: 1px solid var(--btn-danger-border);
    border-radius: var(--radius-md);
    color: var(--btn-danger-text);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .btn-unlink:hover[b-vwltdgdue3] {
        background: var(--btn-danger-hover-bg);
        border-color: var(--btn-danger-hover-border);
        color: var(--btn-danger-hover-text);
        transform: scale(1.1);
        box-shadow: var(--shadow-sm);
    }

    .btn-unlink:active[b-vwltdgdue3] {
        transform: scale(0.95);
    }

.sd-stats[b-vwltdgdue3] {
    display: flex;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-4) 0;
    border-top: 1px solid var(--border-secondary);
    border-bottom: 1px solid var(--border-secondary);
}

.sd-stat[b-vwltdgdue3] {
    text-align: center;
}

    .sd-stat .stat-value[b-vwltdgdue3] {
        display: block;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-600);
        margin-bottom: var(--spacing-1);
    }

    .sd-stat .stat-label[b-vwltdgdue3] {
        font-size: 0.75rem;
        color: var(--text-tertiary);
        text-transform: uppercase;
    }

.sd-actions[b-vwltdgdue3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-link[b-vwltdgdue3] {
    background: none;
    border: none;
    color: var(--primary-500);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: var(--transition-fast);
    padding: var(--spacing-2) 0;
}

    .btn-link:hover[b-vwltdgdue3] {
        color: var(--primary-600);
        transform: translateX(2px);
    }

/* Activity Tab */
.activity-filter[b-vwltdgdue3] {
    padding: var(--spacing-3) var(--spacing-4);
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-base);
}

    .activity-filter:focus[b-vwltdgdue3] {
        outline: none;
        border-color: var(--accent-mint);
        box-shadow: 0 0 0 3px var(--pastel-mint-light);
    }

.activity-chart[b-vwltdgdue3] {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-8);
    margin-bottom: var(--spacing-6);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-placeholder[b-vwltdgdue3] {
    text-align: center;
    color: var(--text-tertiary);
}

    .chart-placeholder i[b-vwltdgdue3] {
        font-size: 3rem;
        margin-bottom: var(--spacing-3);
        display: block;
    }

.recent-requests[b-vwltdgdue3] {
    margin-top: var(--spacing-6);
}

    .recent-requests h4[b-vwltdgdue3] {
        margin: 0 0 var(--spacing-4) 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.requests-list[b-vwltdgdue3] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.request-item[b-vwltdgdue3] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    transition: var(--transition-fast);
}

    .request-item:hover[b-vwltdgdue3] {
        border-color: var(--pastel-mint);
        transform: translateX(2px);
        box-shadow: var(--shadow-sm);
    }

.request-icon[b-vwltdgdue3] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

    .request-icon.status-open[b-vwltdgdue3] {
        background: var(--info-100);
        color: var(--info-600);
    }

    .request-icon.status-waiting[b-vwltdgdue3] {
        background: var(--warning-100);
        color: var(--warning-600);
    }

    .request-icon.status-closed[b-vwltdgdue3] {
        background: var(--success-100);
        color: var(--success-600);
    }

    .request-icon.status-default[b-vwltdgdue3] {
        background: var(--gray-100);
        color: var(--gray-600);
    }

.request-info[b-vwltdgdue3] {
    flex: 1;
}

.request-header[b-vwltdgdue3] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-1);
}

.request-key[b-vwltdgdue3] {
    font-weight: 600;
    color: var(--primary-600);
    font-size: 0.875rem;
}

.request-status[b-vwltdgdue3] {
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

    .request-status.status-open[b-vwltdgdue3] {
        background: var(--info-100);
        color: var(--info-700);
    }

    .request-status.status-waiting[b-vwltdgdue3] {
        background: var(--warning-100);
        color: var(--warning-700);
    }

    .request-status.status-closed[b-vwltdgdue3] {
        background: var(--success-100);
        color: var(--success-700);
    }

    .request-status.status-default[b-vwltdgdue3] {
        background: var(--gray-100);
        color: var(--gray-700);
    }

.request-summary[b-vwltdgdue3] {
    color: var(--text-primary);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-2);
}

.request-meta[b-vwltdgdue3] {
    display: flex;
    gap: var(--spacing-4);
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

    .request-meta span[b-vwltdgdue3] {
        display: flex;
        align-items: center;
        gap: var(--spacing-1);
    }

    .request-meta i[b-vwltdgdue3] {
        font-size: 0.875rem;
    }

.btn-show-more[b-vwltdgdue3] {
    margin-top: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4);
    background: white;
    border: 2px solid var(--primary-300);
    border-radius: var(--radius-md);
    color: var(--primary-600);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    transition: var(--transition-fast);
}

    .btn-show-more:hover[b-vwltdgdue3] {
        background: var(--primary-500);
        border-color: var(--primary-500);
        color: var(--text-on-primary);
        transform: translateX(4px);
    }

/* Empty States */
.empty-tab[b-vwltdgdue3] {
    padding: var(--spacing-12);
    text-align: center;
    color: var(--text-tertiary);
}

    .empty-tab > i[b-vwltdgdue3] {
        font-size: 3rem;
        margin-bottom: var(--spacing-4);
        display: block;
        color: var(--pastel-mint);
    }

    .empty-tab h4[b-vwltdgdue3] {
        margin: 0 0 var(--spacing-2) 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .empty-tab p[b-vwltdgdue3] {
        margin: 0 0 var(--spacing-6) 0;
        color: var(--text-secondary);
    }

/* Loading States */
.loading-container[b-vwltdgdue3] {
    padding: var(--spacing-12);
    text-align: center;
}

.loading-spinner[b-vwltdgdue3] {
    font-size: 3rem;
    color: var(--accent-mint);
    margin-bottom: var(--spacing-4);
    animation: spin-b-vwltdgdue3 1s linear infinite;
}

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

/* Not Found */
.not-found[b-vwltdgdue3] {
    padding: var(--spacing-12);
    text-align: center;
    animation: fadeIn-b-vwltdgdue3 0.5s ease-out;
}

.not-found-icon[b-vwltdgdue3] {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--spacing-6);
    background: var(--pastel-mint-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--accent-mint);
}

.not-found h3[b-vwltdgdue3] {
    margin: 0 0 var(--spacing-3) 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.not-found p[b-vwltdgdue3] {
    margin: 0 0 var(--spacing-6) 0;
    color: var(--text-secondary);
}

/* Button Styles */
.btn-primary[b-vwltdgdue3] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    background: var(--gradient-primary);
    color: var(--text-on-primary);
    border: none;
    border-radius: var(--radius-xl);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--shadow-md);
}

    .btn-primary:hover[b-vwltdgdue3] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg), var(--glow-primary);
    }

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

    .service-desks-grid[b-vwltdgdue3] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .detail-header[b-vwltdgdue3] {
        padding: var(--spacing-5) 0;
    }

    .header-main[b-vwltdgdue3] {
        flex-direction: column;
        gap: var(--spacing-4);
    }

    .header-info[b-vwltdgdue3] {
        flex-direction: column;
        text-align: center;
    }

    .org-details h1[b-vwltdgdue3] {
        font-size: 1.5rem;
    }

    .header-actions[b-vwltdgdue3] {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .stats-grid[b-vwltdgdue3] {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

    .tabs-header[b-vwltdgdue3] {
        overflow-x: auto;
        padding: 0;
    }

    .tab-btn[b-vwltdgdue3] {
        white-space: nowrap;
        padding: var(--spacing-3) var(--spacing-4);
    }

        .tab-btn span[b-vwltdgdue3] {
            display: none;
        }

        .tab-btn i[b-vwltdgdue3] {
            font-size: 1.25rem;
        }

    .tab-toolbar[b-vwltdgdue3] {
        flex-direction: column;
        gap: var(--spacing-3);
    }

    .search-box[b-vwltdgdue3] {
        width: 100%;
    }

    .customers-table[b-vwltdgdue3] {
        font-size: 0.8125rem;
    }

        .customers-table th[b-vwltdgdue3],
        .customers-table td[b-vwltdgdue3] {
            padding: var(--spacing-3) var(--spacing-2);
        }

    .property-header[b-vwltdgdue3] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-2);
    }

    .service-desks-grid[b-vwltdgdue3] {
        grid-template-columns: 1fr;
    }
}

/* Dark Mode Adjustments */
[data-theme="dark"] .detail-header[b-vwltdgdue3] {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-quaternary) 100%);
}

[data-theme="dark"] .content-tabs[b-vwltdgdue3] {
    background: var(--bg-secondary);
}

[data-theme="dark"] .tabs-header[b-vwltdgdue3] {
    background: var(--bg-quaternary);
}

[data-theme="dark"] .tab-btn.active[b-vwltdgdue3] {
    background: var(--bg-secondary);
}

[data-theme="dark"] .customers-table tr:hover[b-vwltdgdue3] {
    background: rgba(227, 245, 241, 0.1);
}

[data-theme="dark"] .property-item[b-vwltdgdue3] {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .service-desk-card[b-vwltdgdue3] {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .request-item[b-vwltdgdue3] {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .activity-chart[b-vwltdgdue3] {
    background: var(--bg-quaternary);
}

[data-theme="dark"] .btn-unlink[b-vwltdgdue3] {
    background: rgba(244, 67, 54, 0.1);
    border-color: rgba(244, 67, 54, 0.2);
    color: var(--danger-400);
}

    [data-theme="dark"] .btn-unlink:hover[b-vwltdgdue3] {
        background: rgba(244, 67, 54, 0.2);
        border-color: rgba(244, 67, 54, 0.3);
        color: var(--danger-300);
    }
/* _content/PKFAPI/Components/Pages/Organizations.razor.rz.scp.css */
/* Organizations Container */
.organizations-container[b-nttoyl6fro] {
    min-height: 100vh;
    animation: fadeIn-b-nttoyl6fro 0.5s ease-out;
    position: relative;
    background: var(--bg-primary);
}

    .organizations-container[b-nttoyl6fro]::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 20% 80%, var(--pastel-mint-light) 0%, transparent 40%), radial-gradient(circle at 80% 20%, var(--pastel-lavender-light) 0%, transparent 40%), radial-gradient(circle at 50% 50%, var(--pastel-peach-light) 0%, transparent 60%);
        opacity: 0.6;
        pointer-events: none;
        z-index: 0;
    }

@keyframes fadeIn-b-nttoyl6fro {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Organizations Header */
.organizations-header[b-nttoyl6fro] {
    background: var(--gradient-cool);
    padding: var(--spacing-8) 0;
    margin: calc(var(--spacing-8) * -1) calc(var(--spacing-8) * -1) var(--spacing-8);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(125, 211, 192, 0.1);
}

    .organizations-header[b-nttoyl6fro]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -10%;
        width: 120%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
        animation: float-b-nttoyl6fro 20s ease-in-out infinite;
    }

    .organizations-header[b-nttoyl6fro]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100px;
        background: linear-gradient(to top, var(--bg-primary), transparent);
        pointer-events: none;
    }

@keyframes float-b-nttoyl6fro {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(30px, -30px) rotate(120deg);
    }

    66% {
        transform: translate(-20px, 20px) rotate(240deg);
    }
}

.header-content[b-nttoyl6fro] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.header-title h1[b-nttoyl6fro] {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 800;
    background: var(--gradient-secondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.03em;
    line-height: 1.2;
    filter: drop-shadow(2px 2px 4px rgba(125, 211, 192, 0.2));
}

.header-subtitle[b-nttoyl6fro] {
    margin: var(--spacing-2) 0 0;
    color: var(--accent-mint-dark);
    font-size: 1rem;
    opacity: 0.85;
    font-weight: 500;
}

.header-actions[b-nttoyl6fro] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.btn-create[b-nttoyl6fro],
.btn-sync[b-nttoyl6fro],
.btn-refresh[b-nttoyl6fro] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    background: white;
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.btn-create[b-nttoyl6fro] {
    color: var(--accent-mint-dark);
}

    .btn-create:hover[b-nttoyl6fro] {
        border-color: var(--pastel-mint);
        background: var(--pastel-mint-light);
    }

.btn-sync[b-nttoyl6fro],
.btn-refresh[b-nttoyl6fro] {
    color: var(--primary-600);
}

    .btn-sync:hover:not(:disabled)[b-nttoyl6fro],
    .btn-refresh:hover:not(:disabled)[b-nttoyl6fro] {
        border-color: var(--pastel-lavender-dark);
        background: var(--pastel-lavender-light);
    }

    .btn-sync:disabled[b-nttoyl6fro],
    .btn-refresh:disabled[b-nttoyl6fro] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-sync.syncing[b-nttoyl6fro],
    .btn-refresh.refreshing[b-nttoyl6fro] {
        background: var(--gradient-primary);
        color: white;
    }

/* Search and Filter Section */
.search-filter-section[b-nttoyl6fro] {
    margin-bottom: var(--spacing-6);
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--spacing-5);
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    border: 1px solid var(--border-secondary);
}

.search-container[b-nttoyl6fro] {
    flex: 1;
    position: relative;
}

.search-box[b-nttoyl6fro] {
    position: relative;
}

    .search-box i[b-nttoyl6fro] {
        position: absolute;
        left: var(--spacing-4);
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-tertiary);
        pointer-events: none;
        transition: var(--transition-fast);
    }

    .search-box input[b-nttoyl6fro] {
        width: 100%;
        padding: var(--spacing-3) var(--spacing-10) var(--spacing-3) var(--spacing-10);
        background: var(--bg-secondary);
        border: 2px solid var(--border-secondary);
        border-radius: var(--radius-lg);
        font-size: 0.875rem;
        transition: var(--transition-base);
        color: var(--text-primary);
    }

        .search-box input[b-nttoyl6fro]::placeholder {
            color: var(--text-tertiary);
        }

        .search-box input:focus[b-nttoyl6fro] {
            outline: none;
            border-color: var(--accent-mint);
            background: white;
            box-shadow: 0 0 0 4px var(--pastel-mint-light);
        }

            .search-box input:focus ~ i[b-nttoyl6fro] {
                color: var(--accent-mint);
            }

.search-clear[b-nttoyl6fro] {
    position: absolute;
    right: var(--spacing-4);
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    background: var(--text-tertiary);
    color: white;
    border-radius: var(--radius-full);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: var(--transition-fast);
}

    .search-clear:hover[b-nttoyl6fro] {
        background: var(--text-secondary);
        transform: translateY(-50%) scale(1.1);
    }

.search-loading[b-nttoyl6fro] {
    position: absolute;
    right: var(--spacing-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent-mint);
    animation: spin-b-nttoyl6fro 1s linear infinite;
}

.filter-actions[b-nttoyl6fro] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.btn-filter[b-nttoyl6fro] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--pastel-lavender-light);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    color: var(--primary-600);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    position: relative;
}

    .btn-filter:hover[b-nttoyl6fro],
    .btn-filter.active[b-nttoyl6fro] {
        background: var(--pastel-lavender);
        border-color: var(--primary-300);
        transform: translateY(-1px);
    }

.filter-count[b-nttoyl6fro] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--primary-500);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: var(--spacing-1);
}

/* Filters Panel */
.filters-panel[b-nttoyl6fro] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-4);
    padding: var(--spacing-5);
    background: var(--bg-tertiary);
    border-radius: var(--radius-xl);
    margin-bottom: var(--spacing-6);
    animation: slideDown-b-nttoyl6fro 0.3s ease-out;
    border: 1px solid var(--border-secondary);
    position: relative;
    z-index: 10;
}

@keyframes slideDown-b-nttoyl6fro {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filter-group label[b-nttoyl6fro] {
    display: block;
    margin-bottom: var(--spacing-2);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.filter-group select[b-nttoyl6fro] {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-base);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23718096' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-3) center;
    padding-right: var(--spacing-10);
}

    .filter-group select:focus[b-nttoyl6fro] {
        outline: none;
        border-color: var(--accent-mint);
        box-shadow: 0 0 0 3px var(--pastel-mint-light);
    }

/* Summary Grid */
.summary-grid[b-nttoyl6fro] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-10);
    position: relative;
    z-index: 10;
}

.summary-card[b-nttoyl6fro] {
    position: relative;
    padding: var(--spacing-6);
    border-radius: var(--radius-2xl);
    color: white;
    overflow: hidden;
    transition: var(--transition-base);
    animation: slideUp-b-nttoyl6fro 0.5s ease-out backwards;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .summary-card:nth-child(1)[b-nttoyl6fro] {
        animation-delay: 0.1s;
    }

    .summary-card:nth-child(2)[b-nttoyl6fro] {
        animation-delay: 0.2s;
    }

    .summary-card:nth-child(3)[b-nttoyl6fro] {
        animation-delay: 0.3s;
    }

    .summary-card:nth-child(4)[b-nttoyl6fro] {
        animation-delay: 0.4s;
    }

    .summary-card:nth-child(5)[b-nttoyl6fro] {
        animation-delay: 0.5s;
    }

    .summary-card:nth-child(6)[b-nttoyl6fro] {
        animation-delay: 0.6s;
    }

@keyframes slideUp-b-nttoyl6fro {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.summary-card:hover[b-nttoyl6fro] {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.summary-card.gradient-primary[b-nttoyl6fro] {
    background: var(--gradient-primary);
}

.summary-card.gradient-secondary[b-nttoyl6fro] {
    background: var(--gradient-secondary);
}

.summary-card.gradient-tertiary[b-nttoyl6fro] {
    background: var(--gradient-tertiary);
}

.summary-card.gradient-warning[b-nttoyl6fro] {
    background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
}

.summary-card.gradient-info[b-nttoyl6fro] {
    background: linear-gradient(135deg, #03A9F4 0%, #29B6F6 100%);
}

.summary-card.gradient-success[b-nttoyl6fro] {
    background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
}

.card-icon[b-nttoyl6fro] {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: var(--spacing-4);
    animation: iconFloat-b-nttoyl6fro 3s ease-in-out infinite;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

@keyframes iconFloat-b-nttoyl6fro {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.card-content h3[b-nttoyl6fro] {
    margin: 0 0 var(--spacing-3) 0;
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-value[b-nttoyl6fro] {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--spacing-3);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.card-trend[b-nttoyl6fro] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.875rem;
    opacity: 0.9;
}

    .card-trend i[b-nttoyl6fro] {
        font-size: 1rem;
    }

    .card-trend.positive i[b-nttoyl6fro] {
        color: #A7F3D0;
    }

    .card-trend.warning i[b-nttoyl6fro] {
        color: #FFE0B2;
    }

/* Organizations Grid */
.organizations-grid[b-nttoyl6fro] {
    display: grid;
    gap: var(--spacing-6);
    position: relative;
    z-index: 10;
}

    .organizations-grid.grid[b-nttoyl6fro] {
        grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
    }

    .organizations-grid.list[b-nttoyl6fro] {
        grid-template-columns: 1fr;
    }

/* Organization Card */
.organization-card[b-nttoyl6fro] {
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    transition: var(--transition-base);
    overflow: hidden;
    position: relative;
}

    .organization-card[b-nttoyl6fro]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gradient-secondary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .organization-card:hover[b-nttoyl6fro] {
        border-color: var(--pastel-mint);
        box-shadow: var(--shadow-lg);
    }

        .organization-card:hover[b-nttoyl6fro]::before {
            transform: scaleX(1);
        }

    .organization-card.expanded[b-nttoyl6fro] {
        border-color: var(--accent-mint);
        box-shadow: 0 0 0 3px var(--pastel-mint-light), var(--shadow-xl);
    }

.org-header[b-nttoyl6fro] {
    padding: var(--spacing-6);
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: var(--transition-base);
}

    .org-header:hover[b-nttoyl6fro] {
        background: var(--pastel-mint-light);
    }

.org-info[b-nttoyl6fro] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    flex: 1;
}

.org-icon[b-nttoyl6fro] {
    width: 56px;
    height: 56px;
    background: var(--gradient-secondary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    transition: var(--transition-base);
    box-shadow: var(--shadow-md);
}

.organization-card:hover .org-icon[b-nttoyl6fro] {
    transform: rotate(-10deg) scale(1.1);
    box-shadow: var(--shadow-lg), var(--glow-secondary);
}

.org-details h3[b-nttoyl6fro] {
    margin: 0 0 var(--spacing-1) 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.org-id[b-nttoyl6fro] {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    font-weight: 500;
    display: block;
    margin-bottom: var(--spacing-2);
}

.badge[b-nttoyl6fro] {
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: var(--transition-fast);
}

    .badge.scim[b-nttoyl6fro] {
        background: var(--info-100);
        color: var(--info-700);
        border: 1px solid var(--info-200);
    }

    .badge.active[b-nttoyl6fro] {
        background: var(--success-100);
        color: var(--success-700);
        border: 1px solid var(--success-200);
    }

    .badge.inactive[b-nttoyl6fro] {
        background: var(--gray-100);
        color: var(--gray-600);
        border: 1px solid var(--gray-200);
    }

.org-stats[b-nttoyl6fro] {
    display: flex;
    gap: var(--spacing-6);
    margin-right: var(--spacing-4);
}

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

.stat-value[b-nttoyl6fro] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-mint-dark);
    margin-bottom: var(--spacing-1);
}

.stat-label[b-nttoyl6fro] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.org-actions[b-nttoyl6fro] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.action-btn[b-nttoyl6fro] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .action-btn:hover[b-nttoyl6fro] {
        background: var(--pastel-mint);
        color: var(--accent-mint-dark);
        transform: scale(1.1);
    }

.expand-toggle[b-nttoyl6fro] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pastel-mint-light);
    border: none;
    border-radius: var(--radius-lg);
    color: var(--accent-mint);
    font-size: 1.125rem;
    cursor: pointer;
    transition: var(--transition-base);
}

    .expand-toggle:hover[b-nttoyl6fro] {
        background: var(--pastel-mint);
        transform: scale(1.1);
    }

/* Organization Content */
.org-content[b-nttoyl6fro] {
    padding: 0 var(--spacing-6) var(--spacing-6);
    animation: expandContent-b-nttoyl6fro 0.3s ease-out;
}

@keyframes expandContent-b-nttoyl6fro {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Properties Section */
.properties-section[b-nttoyl6fro] {
    margin-bottom: var(--spacing-4);
}

.subsection-header[b-nttoyl6fro] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-3);
}

    .subsection-header h4[b-nttoyl6fro] {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

        .subsection-header h4 i[b-nttoyl6fro] {
            font-size: 0.875rem;
            color: var(--primary-400);
        }

.btn-link[b-nttoyl6fro] {
    background: none;
    border: none;
    color: var(--primary-500);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: var(--transition-fast);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
}

    .btn-link:hover[b-nttoyl6fro] {
        color: var(--primary-600);
        transform: translateX(2px);
        background: var(--pastel-lavender-light);
    }

.properties-grid[b-nttoyl6fro] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-3);
}

.property-card[b-nttoyl6fro] {
    background: var(--pastel-lilac-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
    border: 1px solid var(--pastel-lilac);
    transition: var(--transition-fast);
}

    .property-card:hover[b-nttoyl6fro] {
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

.prop-key[b-nttoyl6fro] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    display: block;
    margin-bottom: var(--spacing-1);
}

.prop-value[b-nttoyl6fro] {
    font-size: 0.875rem;
    color: var(--text-primary);
    word-break: break-word;
}

.properties-more[b-nttoyl6fro] {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.875rem;
    font-style: italic;
    padding: var(--spacing-3);
}

/* Customers Section */
.customers-section[b-nttoyl6fro] {
    margin-bottom: var(--spacing-4);
}

.customers-grid[b-nttoyl6fro] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-3);
}

.customer-card[b-nttoyl6fro] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--pastel-sky-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
    border: 1px solid var(--pastel-sky);
}

    .customer-card:hover[b-nttoyl6fro] {
        background: var(--pastel-sky);
        transform: translateX(4px);
        box-shadow: var(--shadow-sm);
    }

.customer-avatar[b-nttoyl6fro] {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.125rem;
    font-weight: 600;
    flex-shrink: 0;
}

.customer-info[b-nttoyl6fro] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.customer-name[b-nttoyl6fro] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.customer-email[b-nttoyl6fro] {
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.no-customers[b-nttoyl6fro] {
    padding: var(--spacing-6);
    text-align: center;
    color: var(--text-tertiary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
}

    .no-customers i[b-nttoyl6fro] {
        font-size: 2rem;
        color: var(--pastel-sky-dark);
    }

.btn-show-all[b-nttoyl6fro] {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: white;
    border: 2px solid var(--accent-blue);
    border-radius: var(--radius-md);
    color: var(--accent-blue);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    transition: var(--transition-fast);
}

    .btn-show-all:hover[b-nttoyl6fro] {
        background: var(--accent-blue);
        color: white;
        transform: translateX(4px);
    }

/* Service Desks Section */
.service-desks-section[b-nttoyl6fro] {
    margin-bottom: var(--spacing-4);
}

.service-desks-list[b-nttoyl6fro] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.service-desk-item[b-nttoyl6fro] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--pastel-lavender-light);
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
    cursor: pointer;
    border: 1px solid var(--pastel-lavender);
}

    .service-desk-item:hover[b-nttoyl6fro] {
        background: var(--pastel-lavender);
        transform: translateX(2px);
    }

.sd-icon[b-nttoyl6fro] {
    width: 36px;
    height: 36px;
    background: var(--primary-200);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
}

.sd-info[b-nttoyl6fro] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.sd-name[b-nttoyl6fro] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.sd-key[b-nttoyl6fro] {
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

/* Quick Actions */
.quick-actions[b-nttoyl6fro] {
    display: flex;
    gap: var(--spacing-3);
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--border-secondary);
}

.quick-action[b-nttoyl6fro] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--bg-secondary);
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
}

    .quick-action:hover[b-nttoyl6fro] {
        border-color: var(--pastel-mint);
        background: var(--pastel-mint-light);
        color: var(--accent-mint-dark);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    .quick-action i[b-nttoyl6fro] {
        font-size: 1rem;
    }

/* Pagination */
.pagination[b-nttoyl6fro] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
    margin-top: var(--spacing-8);
    padding: var(--spacing-4);
}

.page-btn[b-nttoyl6fro] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .page-btn:hover:not(:disabled)[b-nttoyl6fro] {
        border-color: var(--pastel-mint);
        background: var(--pastel-mint-light);
        color: var(--accent-mint);
    }

    .page-btn:disabled[b-nttoyl6fro] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.page-numbers[b-nttoyl6fro] {
    display: flex;
    gap: var(--spacing-2);
}

.page-number[b-nttoyl6fro] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .page-number:hover[b-nttoyl6fro] {
        border-color: var(--pastel-mint);
        background: var(--pastel-mint-light);
    }

    .page-number.active[b-nttoyl6fro] {
        background: var(--gradient-secondary);
        border-color: transparent;
        color: white;
    }

/* Loading States */
.loading-container[b-nttoyl6fro] {
    padding: var(--spacing-12);
    text-align: center;
}

.loading-spinner[b-nttoyl6fro] {
    font-size: 3rem;
    color: var(--accent-mint);
    margin-bottom: var(--spacing-4);
    animation: spin-b-nttoyl6fro 1s linear infinite;
}

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

/* Empty State */
.empty-state[b-nttoyl6fro] {
    padding: var(--spacing-12);
    text-align: center;
    animation: fadeIn-b-nttoyl6fro 0.5s ease-out;
}

.empty-icon[b-nttoyl6fro] {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--spacing-6);
    background: var(--pastel-mint-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--accent-mint);
    box-shadow: var(--shadow-lg);
}

.empty-state h3[b-nttoyl6fro] {
    margin: 0 0 var(--spacing-3) 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.empty-state p[b-nttoyl6fro] {
    margin: 0 0 var(--spacing-6) 0;
    color: var(--text-secondary);
}

.empty-actions[b-nttoyl6fro] {
    display: flex;
    gap: var(--spacing-3);
    justify-content: center;
}

/* Button Styles */
.btn-primary[b-nttoyl6fro],
.btn-secondary[b-nttoyl6fro] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    border: none;
    border-radius: var(--radius-xl);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--shadow-md);
}

.btn-primary[b-nttoyl6fro] {
    background: var(--gradient-primary);
    color: white;
}

    .btn-primary:hover[b-nttoyl6fro] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg), var(--glow-primary);
    }

.btn-secondary[b-nttoyl6fro] {
    background: white;
    color: var(--text-primary);
    border: 2px solid var(--border-secondary);
}

    .btn-secondary:hover[b-nttoyl6fro] {
        border-color: var(--pastel-lavender);
        background: var(--pastel-lavender-light);
    }

/* View Toggle */
.view-toggle[b-nttoyl6fro] {
    display: flex;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-1);
    gap: var(--spacing-1);
}

.view-btn[b-nttoyl6fro] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: var(--transition-fast);
}

    .view-btn:hover[b-nttoyl6fro] {
        color: var(--text-secondary);
    }

    .view-btn.active[b-nttoyl6fro] {
        background: white;
        color: var(--primary-600);
        box-shadow: var(--shadow-sm);
    }

/* Responsive Design */
@media (max-width: 1400px) {
    .organizations-grid.grid[b-nttoyl6fro] {
        grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    }
}

@media (max-width: 1200px) {
    .organizations-grid.grid[b-nttoyl6fro] {
        grid-template-columns: 1fr;
    }

    .filters-panel[b-nttoyl6fro] {
        grid-template-columns: repeat(2, 1fr);
    }

    .summary-grid[b-nttoyl6fro] {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media (max-width: 768px) {
    .organizations-header[b-nttoyl6fro] {
        padding: var(--spacing-6) 0;
    }

    .header-content[b-nttoyl6fro] {
        flex-direction: column;
        gap: var(--spacing-4);
        text-align: center;
    }

    .header-title h1[b-nttoyl6fro] {
        font-size: 2rem;
    }

    .header-actions[b-nttoyl6fro] {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .search-filter-section[b-nttoyl6fro] {
        flex-direction: column;
        gap: var(--spacing-3);
    }

    .search-container[b-nttoyl6fro] {
        width: 100%;
    }

    .filter-actions[b-nttoyl6fro] {
        width: 100%;
        justify-content: space-between;
    }

    .filters-panel[b-nttoyl6fro] {
        grid-template-columns: 1fr;
    }

    .summary-grid[b-nttoyl6fro] {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

    .org-header[b-nttoyl6fro] {
        flex-wrap: wrap;
        gap: var(--spacing-4);
    }

    .org-info[b-nttoyl6fro] {
        width: 100%;
    }

    .org-stats[b-nttoyl6fro] {
        width: 100%;
        justify-content: space-between;
    }

    .org-actions[b-nttoyl6fro] {
        width: 100%;
        justify-content: flex-end;
    }

    .customers-grid[b-nttoyl6fro] {
        grid-template-columns: 1fr;
    }

    .properties-grid[b-nttoyl6fro] {
        grid-template-columns: 1fr;
    }

    .quick-actions[b-nttoyl6fro] {
        flex-direction: column;
    }
}

/* Dark Mode Adjustments */
[data-theme="dark"] .organizations-container[b-nttoyl6fro]::before {
    opacity: 0.2;
}

[data-theme="dark"] .organizations-header[b-nttoyl6fro] {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-quaternary) 100%);
}

[data-theme="dark"] .header-title h1[b-nttoyl6fro] {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

[data-theme="dark"] .header-subtitle[b-nttoyl6fro] {
    color: var(--text-secondary);
}

[data-theme="dark"] .organization-card[b-nttoyl6fro] {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .customer-card[b-nttoyl6fro] {
    background: rgba(227, 240, 255, 0.1);
    border-color: transparent;
}

[data-theme="dark"] .property-card[b-nttoyl6fro] {
    background: rgba(245, 232, 255, 0.1);
    border-color: transparent;
}

[data-theme="dark"] .service-desk-item[b-nttoyl6fro] {
    background: rgba(232, 227, 245, 0.1);
    border-color: transparent;
}

[data-theme="dark"] .search-filter-section[b-nttoyl6fro] {
    background: var(--bg-secondary);
}

[data-theme="dark"] .filters-panel[b-nttoyl6fro] {
    background: var(--bg-quaternary);
}
/* Organizations Header */
.organizations-header[b-nttoyl6fro] {
    background: linear-gradient(135deg, #7DD3C0 0%, #66BB6A 50%, #81C784 100%);
    padding: var(--spacing-8) 0;
    margin: calc(var(--spacing-8) * -1) calc(var(--spacing-8) * -1) var(--spacing-8);
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(125, 211, 192, 0.25);
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
}

    .organizations-header[b-nttoyl6fro]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -10%;
        width: 150%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
        animation: rotateGlow-b-nttoyl6fro 20s linear infinite;
    }

    .organizations-header[b-nttoyl6fro]::after {
        content: '';
        position: absolute;
        bottom: -50%;
        right: -10%;
        width: 120%;
        height: 150%;
        background: radial-gradient(circle, rgba(102, 187, 106, 0.2) 0%, transparent 60%);
        animation: rotateGlowReverse-b-nttoyl6fro 25s linear infinite;
    }

@keyframes rotateGlow-b-nttoyl6fro {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateGlowReverse-b-nttoyl6fro {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.header-content[b-nttoyl6fro] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-8);
    position: relative;
    z-index: 1;
}

    .header-content .header-main[b-nttoyl6fro] {
        display: flex;
        align-items: center;
        gap: var(--spacing-6);
        margin-bottom: var(--spacing-6);
    }

    .header-content .header-icon[b-nttoyl6fro] {
        width: 100px;
        height: 100px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: var(--radius-2xl);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        color: var(--accent-mint);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), inset 0 2px 8px rgba(255, 255, 255, 0.5);
        animation: iconFloat-b-nttoyl6fro 3s ease-in-out infinite;
    }

@keyframes iconFloat-b-nttoyl6fro {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

.header-content .header-info h1[b-nttoyl6fro] {
    margin: 0 0 var(--spacing-2) 0;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-on-primary);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.02em;
}

.header-content .lead[b-nttoyl6fro] {
    margin: 0;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Header Stats */
.header-content .header-stats[b-nttoyl6fro] {
    display: flex;
    gap: var(--spacing-4);
}

.header-content .stat-badge[b-nttoyl6fro] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-5);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: var(--transition-base);
}

    .header-content .stat-badge:hover[b-nttoyl6fro] {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .header-content .stat-badge.success[b-nttoyl6fro] {
        border-color: rgba(102, 187, 106, 0.5);
    }

    .header-content .stat-badge.warning[b-nttoyl6fro] {
        border-color: rgba(255, 152, 0, 0.5);
    }

    .header-content .stat-badge.info[b-nttoyl6fro] {
        border-color: rgba(3, 169, 244, 0.5);
    }

    .header-content .stat-badge i[b-nttoyl6fro] {
        font-size: 1.5rem;
        color: var(--text-on-primary);
    }

.header-content .stat-content[b-nttoyl6fro] {
    text-align: left;
}

.header-content .stat-value[b-nttoyl6fro] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-on-primary);
    line-height: 1;
}

.header-content .stat-label[b-nttoyl6fro] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Header Actions Bar */
.header-actions-bar[b-nttoyl6fro] {
    background: white;
    padding: var(--spacing-4) 0;
    margin: 0 calc(var(--spacing-8) * -1) var(--spacing-6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 10;
}

.actions-container[b-nttoyl6fro] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-8);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}
/* _content/PKFAPI/Components/Pages/Requests.razor.rz.scp.css */
/* Requests Page Container */
.requests-container[b-t0ux5h3zof] {
    min-height: 100vh;
    animation: fadeIn-b-t0ux5h3zof 0.5s ease-out;
    position: relative;
    padding-bottom: var(--spacing-8);
}

    .requests-container[b-t0ux5h3zof]::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 20% 60%, var(--pastel-pink-light) 0%, transparent 40%), radial-gradient(circle at 80% 20%, var(--pastel-lavender-light) 0%, transparent 40%), radial-gradient(circle at 50% 90%, var(--pastel-sky-light) 0%, transparent 50%);
        opacity: 0.5;
        pointer-events: none;
        z-index: -1;
    }

@keyframes fadeIn-b-t0ux5h3zof {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Page Header */
.page-header[b-t0ux5h3zof] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-8);
    flex-wrap: wrap;
    gap: var(--spacing-4);
    animation: slideDown-b-t0ux5h3zof 0.6s ease-out;
}

@keyframes slideDown-b-t0ux5h3zof {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-header h1[b-t0ux5h3zof] {
    font-size: 2.5rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.03em;
    line-height: 1.2;
    filter: drop-shadow(2px 2px 4px rgba(155, 143, 255, 0.2));
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

    .page-header h1 i[b-t0ux5h3zof] {
        font-size: 2rem;
        background: linear-gradient(135deg, #FF6B87 0%, #FF8FA3 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: ticketFloat-b-t0ux5h3zof 3s ease-in-out infinite;
    }

@keyframes ticketFloat-b-t0ux5h3zof {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

.header-actions[b-t0ux5h3zof] {
    display: flex;
    gap: var(--spacing-3);
    animation: fadeInRight-b-t0ux5h3zof 0.7s ease-out;
}

@keyframes fadeInRight-b-t0ux5h3zof {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Card Styling */
.card[b-t0ux5h3zof] {
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-secondary);
    transition: var(--transition-base);
    overflow: hidden;
}

    .card:hover[b-t0ux5h3zof] {
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
    }

.card-body[b-t0ux5h3zof] {
    padding: var(--spacing-6);
}

.card-header[b-t0ux5h3zof] {
    padding: var(--spacing-5) var(--spacing-6);
    background: var(--pastel-lavender-light);
    border-bottom: 1px solid var(--pastel-lavender);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .card-header h5[b-t0ux5h3zof] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
    }

/* Filters Section */
.filters-card[b-t0ux5h3zof] {
    animation: slideUp-b-t0ux5h3zof 0.7s ease-out;
    margin-bottom: var(--spacing-6);
}

@keyframes slideUp-b-t0ux5h3zof {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Controls */
.form-label[b-t0ux5h3zof] {
    display: block;
    margin-bottom: var(--spacing-2);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.form-control[b-t0ux5h3zof],
.form-select[b-t0ux5h3zof] {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--bg-secondary);
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    color: var(--text-primary);
    transition: var(--transition-base);
}

    .form-control:focus[b-t0ux5h3zof],
    .form-select:focus[b-t0ux5h3zof] {
        outline: none;
        background: white;
        border-color: var(--primary-400);
        box-shadow: 0 0 0 4px var(--pastel-lavender-light);
    }

    .form-control[b-t0ux5h3zof]::placeholder {
        color: var(--text-tertiary);
    }

.form-select[b-t0ux5h3zof] {
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B8FFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--spacing-3) center;
    background-size: 20px;
    padding-right: var(--spacing-10);
}

/* Button Styles */
.btn[b-t0ux5h3zof] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    border: none;
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

    .btn[b-t0ux5h3zof]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .btn:hover[b-t0ux5h3zof]::before {
        width: 300%;
        height: 300%;
    }

    .btn:hover:not(:disabled)[b-t0ux5h3zof] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .btn:disabled[b-t0ux5h3zof] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
    }

    .btn i[b-t0ux5h3zof] {
        font-size: 1.125rem;
        position: relative;
        z-index: 1;
    }

.btn-primary[b-t0ux5h3zof] {
    background: linear-gradient(135deg, #FF6B87 0%, #FF8FA3 100%);
    color: white;
    box-shadow: var(--shadow-md);
}

    .btn-primary[b-t0ux5h3zof]::before {
        background: rgba(255, 255, 255, 0.2);
    }

    .btn-primary:hover:not(:disabled)[b-t0ux5h3zof] {
        box-shadow: var(--shadow-lg), 0 0 20px rgba(255, 107, 135, 0.4);
    }

.btn-secondary[b-t0ux5h3zof] {
    background: linear-gradient(135deg, #8AB4F8 0%, #81C784 100%);
    color: white;
    box-shadow: var(--shadow-md);
}

    .btn-secondary[b-t0ux5h3zof]::before {
        background: rgba(255, 255, 255, 0.2);
    }

    .btn-secondary:hover:not(:disabled)[b-t0ux5h3zof] {
        box-shadow: var(--shadow-lg), 0 0 20px rgba(138, 180, 248, 0.4);
    }

.btn-outline-primary[b-t0ux5h3zof] {
    background: white;
    color: var(--primary-600);
    border: 2px solid var(--pastel-lavender);
    box-shadow: var(--shadow-sm);
}

    .btn-outline-primary[b-t0ux5h3zof]::before {
        background: var(--pastel-lavender);
    }

    .btn-outline-primary:hover:not(:disabled)[b-t0ux5h3zof] {
        color: white;
        border-color: var(--primary-500);
    }

.btn-outline-secondary[b-t0ux5h3zof] {
    background: white;
    color: var(--text-secondary);
    border: 2px solid var(--border-secondary);
}

    .btn-outline-secondary[b-t0ux5h3zof]::before {
        background: var(--pastel-mint-light);
    }

    .btn-outline-secondary:hover:not(:disabled)[b-t0ux5h3zof] {
        color: var(--text-primary);
        border-color: var(--pastel-mint);
    }

.btn-success[b-t0ux5h3zof] {
    background: linear-gradient(135deg, #66BB6A 0%, #81C784 100%);
    color: white;
}

.btn-danger[b-t0ux5h3zof] {
    background: linear-gradient(135deg, #F44336 0%, #FF6B7A 100%);
    color: white;
}

.btn-sm[b-t0ux5h3zof] {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: 0.875rem;
}

    .btn-sm i[b-t0ux5h3zof] {
        font-size: 0.875rem;
    }

.btn-close[b-t0ux5h3zof] {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0.8;
    transition: var(--transition-fast);
}

    .btn-close:hover[b-t0ux5h3zof] {
        opacity: 1;
        transform: rotate(90deg);
    }

.btn-close-white[b-t0ux5h3zof] {
    color: white;
}

/* Table Styles */
.table-responsive[b-t0ux5h3zof] {
    overflow-x: auto;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    background: white;
    border: 1px solid var(--border-secondary);
    animation: tableSlideIn-b-t0ux5h3zof 0.8s ease-out;
}

@keyframes tableSlideIn-b-t0ux5h3zof {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.table[b-t0ux5h3zof] {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

    .table thead[b-t0ux5h3zof] {
        background: var(--pastel-lavender-light);
        position: sticky;
        top: 0;
        z-index: 10;
    }

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

    .table tbody td[b-t0ux5h3zof] {
        padding: var(--spacing-4);
        font-size: 0.9375rem;
        color: var(--text-primary);
        border-bottom: 1px solid var(--border-primary);
        vertical-align: middle;
    }

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

        .table tbody tr:hover[b-t0ux5h3zof] {
            background: var(--pastel-lavender-light);
            transform: translateX(4px);
        }

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

/* Grouped View Styles */
.grouped-requests[b-t0ux5h3zof] {
    margin-bottom: var(--spacing-8);
}

.service-desk-group[b-t0ux5h3zof] {
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--spacing-5);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    animation: groupFadeIn-b-t0ux5h3zof 0.5s ease-out;
}

@keyframes groupFadeIn-b-t0ux5h3zof {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.service-desk-group:hover[b-t0ux5h3zof] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.group-header[b-t0ux5h3zof] {
    background: linear-gradient(135deg, var(--pastel-lavender-light) 0%, var(--pastel-pink-light) 100%);
    padding: var(--spacing-5);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition-base);
    border-bottom: 2px solid var(--pastel-lavender);
}

    .group-header:hover[b-t0ux5h3zof] {
        background: linear-gradient(135deg, var(--pastel-lavender) 0%, var(--pastel-pink) 100%);
    }

    .group-header h3[b-t0ux5h3zof] {
        margin: 0;
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
    }

        .group-header h3 i[b-t0ux5h3zof] {
            color: var(--primary-600);
            font-size: 1.5rem;
        }

    .group-header > i[b-t0ux5h3zof] {
        font-size: 1.25rem;
        color: var(--text-secondary);
        transition: var(--transition-fast);
    }

.service-desk-content[b-t0ux5h3zof] {
    padding: var(--spacing-5);
    background: var(--bg-tertiary);
    animation: expandContent-b-t0ux5h3zof 0.3s ease-out;
}

@keyframes expandContent-b-t0ux5h3zof {
    from {
        opacity: 0;
        max-height: 0;
    }

    to {
        opacity: 1;
        max-height: 2000px;
    }
}

.organization-group[b-t0ux5h3zof] {
    background: white;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-4);
    transition: var(--transition-base);
}

    .organization-group:hover[b-t0ux5h3zof] {
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

.org-header[b-t0ux5h3zof] {
    background: var(--pastel-sky-light);
    padding: var(--spacing-4);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition-base);
}

    .org-header:hover[b-t0ux5h3zof] {
        background: var(--pastel-sky);
    }

    .org-header h4[b-t0ux5h3zof] {
        margin: 0;
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
    }

        .org-header h4 i[b-t0ux5h3zof] {
            color: var(--accent-blue);
            font-size: 1.25rem;
        }

.org-requests[b-t0ux5h3zof] {
    padding: var(--spacing-3);
}

/* Badge Styles */
.badge[b-t0ux5h3zof] {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

    .badge.bg-secondary[b-t0ux5h3zof] {
        background: var(--gray-100);
        color: var(--gray-700);
        border: 1px solid var(--gray-300);
    }

    .badge.bg-info[b-t0ux5h3zof] {
        background: var(--info-100) !important;
        color: var(--info-700);
        border: 1px solid var(--info-300);
    }

    .badge.bg-success[b-t0ux5h3zof] {
        background: linear-gradient(135deg, var(--success-100) 0%, var(--success-200) 100%);
        color: var(--success-700);
        border: 1px solid var(--success-300);
        box-shadow: 0 2px 4px rgba(102, 187, 106, 0.2);
    }

    .badge.bg-warning[b-t0ux5h3zof] {
        background: linear-gradient(135deg, var(--warning-100) 0%, var(--warning-200) 100%);
        color: var(--warning-700);
        border: 1px solid var(--warning-300);
        box-shadow: 0 2px 4px rgba(255, 183, 77, 0.2);
    }

    .badge.bg-danger[b-t0ux5h3zof] {
        background: linear-gradient(135deg, var(--danger-100) 0%, var(--danger-200) 100%);
        color: var(--danger-700);
        border: 1px solid var(--danger-300);
        box-shadow: 0 2px 4px rgba(244, 67, 54, 0.2);
    }

/* Loading States */
.text-center[b-t0ux5h3zof] {
    text-align: center;
}

.py-5[b-t0ux5h3zof] {
    padding-top: var(--spacing-10) !important;
    padding-bottom: var(--spacing-10) !important;
}

.spinner-border[b-t0ux5h3zof] {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-t0ux5h3zof 0.75s linear infinite;
}

.spinner-border-sm[b-t0ux5h3zof] {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

.text-primary[b-t0ux5h3zof] {
    color: var(--primary-600) !important;
}

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

/* Empty State */
.empty-state[b-t0ux5h3zof] {
    text-align: center;
    padding: var(--spacing-10);
}

    .empty-state i[b-t0ux5h3zof] {
        font-size: 4rem;
        color: var(--text-quaternary);
        margin-bottom: var(--spacing-4);
        animation: emptyBounce-b-t0ux5h3zof 2s ease-in-out infinite;
    }

@keyframes emptyBounce-b-t0ux5h3zof {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Pagination */
.pagination[b-t0ux5h3zof] {
    display: flex;
    list-style: none;
    padding: 0;
    margin: var(--spacing-6) 0 0 0;
    gap: var(--spacing-2);
}

.page-item[b-t0ux5h3zof] {
    margin: 0;
}

.page-link[b-t0ux5h3zof] {
    display: flex;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition-base);
    cursor: pointer;
}

    .page-link:hover[b-t0ux5h3zof] {
        background: var(--pastel-lavender-light);
        border-color: var(--pastel-lavender);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

.page-item.active .page-link[b-t0ux5h3zof] {
    background: var(--gradient-primary);
    color: white;
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

.page-item.disabled .page-link[b-t0ux5h3zof] {
    opacity: 0.5;
    cursor: not-allowed;
}

    .page-item.disabled .page-link:hover[b-t0ux5h3zof] {
        transform: none;
        box-shadow: none;
        background: white;
        border-color: var(--border-secondary);
    }

/* Breadcrumb */
.breadcrumb[b-t0ux5h3zof] {
    display: flex;
    flex-wrap: wrap;
    padding: var(--spacing-3) 0;
    margin-bottom: var(--spacing-5);
    list-style: none;
    background: transparent;
}

.breadcrumb-item[b-t0ux5h3zof] {
    display: flex;
    align-items: center;
}

    .breadcrumb-item + .breadcrumb-item[b-t0ux5h3zof]::before {
        content: "\f054";
        font-family: "Font Awesome 6 Pro";
        font-weight: 300;
        padding: 0 var(--spacing-3);
        color: var(--text-tertiary);
        font-size: 0.75rem;
    }

    .breadcrumb-item a[b-t0ux5h3zof] {
        color: var(--primary-600);
        text-decoration: none;
        font-weight: 500;
        transition: var(--transition-fast);
    }

        .breadcrumb-item a:hover[b-t0ux5h3zof] {
            color: var(--primary-700);
            text-decoration: underline;
        }

    .breadcrumb-item.active[b-t0ux5h3zof] {
        color: var(--text-secondary);
    }

/* Request Detail View */
.request-detail[b-t0ux5h3zof] {
    animation: detailFadeIn-b-t0ux5h3zof 0.5s ease-out;
}

@keyframes detailFadeIn-b-t0ux5h3zof {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.request-header[b-t0ux5h3zof] {
    background: linear-gradient(135deg, var(--pastel-lavender-light) 0%, var(--pastel-pink-light) 100%);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-5);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--pastel-lavender);
}

    .request-header h2[b-t0ux5h3zof] {
        margin: 0 0 var(--spacing-3) 0;
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--text-primary);
    }

.text-muted[b-t0ux5h3zof] {
    color: var(--text-tertiary) !important;
}

.fs-6[b-t0ux5h3zof] {
    font-size: 1rem !important;
}

/* Request Fields */
.form-label[b-t0ux5h3zof] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
}

/* Comments Section */
.comment-item[b-t0ux5h3zof] {
    padding: var(--spacing-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-3);
    transition: var(--transition-base);
    animation: commentSlideIn-b-t0ux5h3zof 0.3s ease-out;
}

@keyframes commentSlideIn-b-t0ux5h3zof {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.bg-light[b-t0ux5h3zof] {
    background: var(--pastel-sky-light) !important;
    border: 1px solid var(--pastel-sky);
}

.bg-warning-subtle[b-t0ux5h3zof] {
    background: var(--warning-50) !important;
    border: 1px solid var(--warning-200);
}

/* Attachments */
.list-group[b-t0ux5h3zof] {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
}

.list-group-item[b-t0ux5h3zof] {
    position: relative;
    display: flex;
    padding: var(--spacing-4);
    background: white;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-2);
    transition: var(--transition-base);
}

    .list-group-item:hover[b-t0ux5h3zof] {
        background: var(--pastel-lavender-light);
        transform: translateX(4px);
    }

/* Actions Card */
.d-grid[b-t0ux5h3zof] {
    display: grid !important;
}

.gap-2[b-t0ux5h3zof] {
    gap: var(--spacing-2) !important;
}

hr[b-t0ux5h3zof] {
    margin: var(--spacing-4) 0;
    border: 0;
    border-top: 1px solid var(--border-secondary);
}

/* SLA Progress */
.progress[b-t0ux5h3zof] {
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.progress-bar[b-t0ux5h3zof] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    text-align: center;
    white-space: nowrap;
    transition: width 0.6s ease;
    font-weight: 600;
    font-size: 0.875rem;
}

    .progress-bar.bg-success[b-t0ux5h3zof] {
        background: linear-gradient(135deg, #66BB6A 0%, #81C784 100%);
    }

    .progress-bar.bg-danger[b-t0ux5h3zof] {
        background: linear-gradient(135deg, #F44336 0%, #FF6B7A 100%);
    }

/* Modal Styles */
.modal[b-t0ux5h3zof] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-modal);
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

    .modal.show[b-t0ux5h3zof] {
        display: block;
    }

.modal-dialog[b-t0ux5h3zof] {
    position: relative;
    width: auto;
    margin: var(--spacing-10) auto;
    max-width: 500px;
    animation: modalSlideIn-b-t0ux5h3zof 0.3s ease-out;
}

@keyframes modalSlideIn-b-t0ux5h3zof {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-content[b-t0ux5h3zof] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: white;
    border: none;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    outline: 0;
}

.modal-header[b-t0ux5h3zof] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-5) var(--spacing-6);
    background: var(--pastel-lavender-light);
    border-bottom: 1px solid var(--pastel-lavender);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.modal-title[b-t0ux5h3zof] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-body[b-t0ux5h3zof] {
    position: relative;
    flex: 1 1 auto;
    padding: var(--spacing-6);
}

.modal-footer[b-t0ux5h3zof] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding: var(--spacing-5) var(--spacing-6);
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-secondary);
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}

/* Textarea */
textarea.form-control[b-t0ux5h3zof] {
    resize: vertical;
    min-height: 100px;
}

/* Checkbox */
.form-check[b-t0ux5h3zof] {
    display: flex;
    align-items: center;
    padding-left: 0;
}

.form-check-input[b-t0ux5h3zof] {
    width: 20px;
    height: 20px;
    margin-right: var(--spacing-3);
    cursor: pointer;
    accent-color: var(--primary-500);
    transition: var(--transition-fast);
}

    .form-check-input:checked[b-t0ux5h3zof] {
        transform: scale(1.1);
    }

.form-check-label[b-t0ux5h3zof] {
    cursor: pointer;
    user-select: none;
}

/* Toast Notifications */
.toast[b-t0ux5h3zof] {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
    animation: toastSlideIn-b-t0ux5h3zof 0.3s ease-out;
    min-width: 300px;
}

@keyframes toastSlideIn-b-t0ux5h3zof {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast-header[b-t0ux5h3zof] {
    padding: var(--spacing-3) var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-weight: 600;
}

    .toast-header.bg-success[b-t0ux5h3zof] {
        background: linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%);
    }

    .toast-header.bg-danger[b-t0ux5h3zof] {
        background: linear-gradient(135deg, var(--danger-500) 0%, var(--danger-600) 100%);
    }

.toast-body[b-t0ux5h3zof] {
    padding: var(--spacing-4);
    font-size: 0.9375rem;
    color: var(--text-primary);
}

/* Utility Classes */
.d-flex[b-t0ux5h3zof] {
    display: flex !important;
}

.justify-content-between[b-t0ux5h3zof] {
    justify-content: space-between !important;
}

.justify-content-center[b-t0ux5h3zof] {
    justify-content: center !important;
}

.align-items-start[b-t0ux5h3zof] {
    align-items: flex-start !important;
}

.align-items-center[b-t0ux5h3zof] {
    align-items: center !important;
}

.align-items-end[b-t0ux5h3zof] {
    align-items: flex-end !important;
}

.flex-wrap[b-t0ux5h3zof] {
    flex-wrap: wrap !important;
}

.row[b-t0ux5h3zof] {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(var(--spacing-3) * -1);
    margin-left: calc(var(--spacing-3) * -1);
}

.col-md-2[b-t0ux5h3zof],
.col-md-4[b-t0ux5h3zof],
.col-md-8[b-t0ux5h3zof] {
    position: relative;
    width: 100%;
    padding-right: var(--spacing-3);
    padding-left: var(--spacing-3);
}

.g-3[b-t0ux5h3zof] {
    gap: var(--spacing-3) !important;
}

.w-100[b-t0ux5h3zof] {
    width: 100% !important;
}

.mb-0[b-t0ux5h3zof] {
    margin-bottom: 0 !important;
}

.mb-2[b-t0ux5h3zof] {
    margin-bottom: var(--spacing-2) !important;
}

.mb-3[b-t0ux5h3zof] {
    margin-bottom: var(--spacing-3) !important;
}

.mb-4[b-t0ux5h3zof] {
    margin-bottom: var(--spacing-4) !important;
}

.ms-2[b-t0ux5h3zof] {
    margin-left: var(--spacing-2) !important;
}

.ms-3[b-t0ux5h3zof] {
    margin-left: var(--spacing-3) !important;
}

.me-2[b-t0ux5h3zof] {
    margin-right: var(--spacing-2) !important;
}

.me-3[b-t0ux5h3zof] {
    margin-right: var(--spacing-3) !important;
}

.mt-2[b-t0ux5h3zof] {
    margin-top: var(--spacing-2) !important;
}

.mt-3[b-t0ux5h3zof] {
    margin-top: var(--spacing-3) !important;
}

.p-3[b-t0ux5h3zof] {
    padding: var(--spacing-3) !important;
}

.text-decoration-none[b-t0ux5h3zof] {
    text-decoration: none !important;
}

.rounded[b-t0ux5h3zof] {
    border-radius: var(--radius-lg) !important;
}

.position-fixed[b-t0ux5h3zof] {
    position: fixed !important;
}

.bottom-0[b-t0ux5h3zof] {
    bottom: 0 !important;
}

.end-0[b-t0ux5h3zof] {
    right: 0 !important;
}

.visually-hidden[b-t0ux5h3zof] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.list-unstyled[b-t0ux5h3zof] {
    padding-left: 0;
    list-style: none;
}

.fa-spin[b-t0ux5h3zof] {
    animation: spin-b-t0ux5h3zof 1s linear infinite;
}

/* Link Styles */
a[b-t0ux5h3zof] {
    color: var(--primary-600);
    text-decoration: none;
    transition: var(--transition-fast);
}

    a:hover[b-t0ux5h3zof] {
        color: var(--primary-700);
        text-decoration: underline;
    }

    a strong[b-t0ux5h3zof] {
        font-weight: 700;
    }

/* Small Text */
small[b-t0ux5h3zof] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Responsive Design */
@media (min-width: 768px) {
    .col-md-2[b-t0ux5h3zof] {
        flex: 0 0 auto;
        width: 16.666667%;
    }

    .col-md-4[b-t0ux5h3zof] {
        flex: 0 0 auto;
        width: 33.333333%;
    }

    .col-md-8[b-t0ux5h3zof] {
        flex: 0 0 auto;
        width: 66.666667%;
    }
}

@media (max-width: 768px) {
    .page-header[b-t0ux5h3zof] {
        flex-direction: column;
        align-items: stretch;
    }

        .page-header h1[b-t0ux5h3zof] {
            font-size: 2rem;
            text-align: center;
        }

    .header-actions[b-t0ux5h3zof] {
        justify-content: center;
    }

        .header-actions .btn[b-t0ux5h3zof] {
            flex: 1;
        }

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

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

    .card-body[b-t0ux5h3zof] {
        padding: var(--spacing-4);
    }

    .modal-dialog[b-t0ux5h3zof] {
        margin: var(--spacing-3);
    }

    .row[b-t0ux5h3zof] {
        margin-right: calc(var(--spacing-2) * -1);
        margin-left: calc(var(--spacing-2) * -1);
    }

    .col-md-2[b-t0ux5h3zof],
    .col-md-4[b-t0ux5h3zof],
    .col-md-8[b-t0ux5h3zof] {
        padding-right: var(--spacing-2);
        padding-left: var(--spacing-2);
    }
}

/* Dark Mode Support */
[data-theme="dark"] .requests-container[b-t0ux5h3zof]::before {
    opacity: 0.2;
}

[data-theme="dark"] .card[b-t0ux5h3zof] {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .card-header[b-t0ux5h3zof] {
    background: rgba(232, 227, 245, 0.1);
    border-color: var(--border-primary);
}

[data-theme="dark"] .form-control[b-t0ux5h3zof],
[data-theme="dark"] .form-select[b-t0ux5h3zof] {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

    [data-theme="dark"] .form-control:focus[b-t0ux5h3zof],
    [data-theme="dark"] .form-select:focus[b-t0ux5h3zof] {
        background: var(--bg-quaternary);
        border-color: var(--primary-400);
        box-shadow: 0 0 0 4px rgba(155, 143, 255, 0.1);
    }

[data-theme="dark"] .table-responsive[b-t0ux5h3zof] {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .table thead[b-t0ux5h3zof] {
    background: rgba(232, 227, 245, 0.1);
}

    [data-theme="dark"] .table thead th[b-t0ux5h3zof] {
        color: var(--text-secondary);
        border-bottom-color: var(--border-primary);
    }

[data-theme="dark"] .table tbody td[b-t0ux5h3zof] {
    color: var(--text-primary);
    border-bottom-color: var(--border-primary);
}

[data-theme="dark"] .table tbody tr:hover[b-t0ux5h3zof] {
    background: rgba(232, 227, 245, 0.05);
}

[data-theme="dark"] .service-desk-group[b-t0ux5h3zof] {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .group-header[b-t0ux5h3zof] {
    background: linear-gradient(135deg, rgba(232, 227, 245, 0.1) 0%, rgba(255, 232, 236, 0.1) 100%);
    border-bottom-color: var(--border-primary);
}

[data-theme="dark"] .service-desk-content[b-t0ux5h3zof] {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .organization-group[b-t0ux5h3zof] {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .org-header[b-t0ux5h3zof] {
    background: rgba(227, 240, 255, 0.1);
}

[data-theme="dark"] .modal-content[b-t0ux5h3zof] {
    background: var(--bg-secondary);
}

[data-theme="dark"] .modal-header[b-t0ux5h3zof] {
    background: rgba(232, 227, 245, 0.1);
    border-color: var(--border-primary);
}

[data-theme="dark"] .modal-footer[b-t0ux5h3zof] {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .toast[b-t0ux5h3zof] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
}

[data-theme="dark"] .bg-light[b-t0ux5h3zof] {
    background: rgba(227, 240, 255, 0.1) !important;
    border-color: rgba(227, 240, 255, 0.2);
}

[data-theme="dark"] .list-group-item[b-t0ux5h3zof] {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
}

    [data-theme="dark"] .list-group-item:hover[b-t0ux5h3zof] {
        background: rgba(232, 227, 245, 0.1);
    }

[data-theme="dark"] .page-link[b-t0ux5h3zof] {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

    [data-theme="dark"] .page-link:hover[b-t0ux5h3zof] {
        background: rgba(232, 227, 245, 0.1);
        border-color: var(--pastel-lavender);
    }

/* Dark Mode Badge Fixes */
[data-theme="dark"] .badge.bg-secondary[b-t0ux5h3zof] {
    background: var(--bg-quaternary);
    color: var(--text-secondary);
    border-color: var(--border-secondary);
}

[data-theme="dark"] .badge.bg-info[b-t0ux5h3zof] {
    background: rgba(41, 182, 246, 0.2) !important;
    color: #81D4FA;
    border: 1px solid rgba(41, 182, 246, 0.3);
}

[data-theme="dark"] .badge.bg-success[b-t0ux5h3zof] {
    background: linear-gradient(135deg, rgba(102, 187, 106, 0.2) 0%, rgba(129, 199, 132, 0.2) 100%);
    color: #81C784;
    border: 1px solid rgba(102, 187, 106, 0.3);
    box-shadow: none;
}

[data-theme="dark"] .badge.bg-warning[b-t0ux5h3zof] {
    background: linear-gradient(135deg, rgba(255, 183, 77, 0.2) 0%, rgba(255, 202, 40, 0.2) 100%);
    color: #FFD54F;
    border: 1px solid rgba(255, 183, 77, 0.3);
    box-shadow: none;
}

[data-theme="dark"] .badge.bg-danger[b-t0ux5h3zof] {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.2) 0%, rgba(255, 107, 122, 0.2) 100%);
    color: #FF8A95;
    border: 1px solid rgba(244, 67, 54, 0.3);
    box-shadow: none;
}

/* Dark Mode Button Styles */
[data-theme="dark"] .btn-outline-primary[b-t0ux5h3zof] {
    background: var(--bg-tertiary);
    color: var(--primary-400);
    border-color: var(--primary-400);
}

    [data-theme="dark"] .btn-outline-primary:hover[b-t0ux5h3zof] {
        background: var(--primary-400);
        color: white;
    }

[data-theme="dark"] .btn-outline-secondary[b-t0ux5h3zof] {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-secondary);
}

    [data-theme="dark"] .btn-outline-secondary:hover[b-t0ux5h3zof] {
        background: var(--bg-quaternary);
        color: var(--text-primary);
    }

/* Dark Mode Link Styles */
[data-theme="dark"] a[b-t0ux5h3zof] {
    color: var(--primary-400);
}

    [data-theme="dark"] a:hover[b-t0ux5h3zof] {
        color: var(--primary-300);
    }

/* Dark Mode Request Header */
[data-theme="dark"] .request-header[b-t0ux5h3zof] {
    background: linear-gradient(135deg, rgba(232, 227, 245, 0.1) 0%, rgba(255, 232, 236, 0.1) 100%);
    border-color: var(--border-primary);
}

/* Dark Mode Hover States */
[data-theme="dark"] .group-header:hover[b-t0ux5h3zof] {
    background: linear-gradient(135deg, rgba(232, 227, 245, 0.15) 0%, rgba(255, 232, 236, 0.15) 100%);
}

[data-theme="dark"] .org-header:hover[b-t0ux5h3zof] {
    background: rgba(227, 240, 255, 0.15);
}

/* Print Styles */
@media print {
    .requests-container[b-t0ux5h3zof]::before {
        display: none;
    }

    .header-actions[b-t0ux5h3zof],
    .btn[b-t0ux5h3zof],
    .modal[b-t0ux5h3zof] {
        display: none !important;
    }

    .card[b-t0ux5h3zof] {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .table[b-t0ux5h3zof] {
        page-break-inside: avoid;
    }
}
[data-theme="dark"] .btn-toggle[b-t0ux5h3zof] {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
}

    [data-theme="dark"] .btn-toggle:hover[b-t0ux5h3zof] {
        background: var(--bg-quaternary);
        border-color: var(--pastel-lavender);
    }
/* Requests Page Container */
.requests-container[b-t0ux5h3zof] {
    min-height: 100vh;
    animation: fadeIn-b-t0ux5h3zof 0.5s ease-out;
    position: relative;
    background: var(--bg-primary);
}

    .requests-container[b-t0ux5h3zof]::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 20% 60%, var(--pastel-pink-light) 0%, transparent 40%), radial-gradient(circle at 80% 20%, var(--pastel-lavender-light) 0%, transparent 40%), radial-gradient(circle at 50% 90%, var(--pastel-sky-light) 0%, transparent 50%);
        opacity: 0.5;
        pointer-events: none;
        z-index: -1;
    }

@keyframes fadeIn-b-t0ux5h3zof {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Requests Header */
.requests-header[b-t0ux5h3zof] {
    background: linear-gradient(135deg, #FF6B87 0%, #FF8FA3 50%, #FDB462 100%);
    padding: var(--spacing-8) 0;
    margin: calc(var(--spacing-8) * -1) calc(var(--spacing-8) * -1) var(--spacing-8);
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(255, 107, 135, 0.25);
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
}

    .requests-header[b-t0ux5h3zof]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -10%;
        width: 150%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
        animation: rotateGlow-b-t0ux5h3zof 20s linear infinite;
    }

    .requests-header[b-t0ux5h3zof]::after {
        content: '';
        position: absolute;
        bottom: -50%;
        right: -10%;
        width: 120%;
        height: 150%;
        background: radial-gradient(circle, rgba(253, 180, 98, 0.2) 0%, transparent 60%);
        animation: rotateGlowReverse-b-t0ux5h3zof 25s linear infinite;
    }

@keyframes rotateGlow-b-t0ux5h3zof {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateGlowReverse-b-t0ux5h3zof {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.header-content[b-t0ux5h3zof] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-8);
    position: relative;
    z-index: 1;
}

.header-main[b-t0ux5h3zof] {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.header-icon[b-t0ux5h3zof] {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--secondary-600);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), inset 0 2px 8px rgba(255, 255, 255, 0.5);
    animation: iconFloat-b-t0ux5h3zof 3s ease-in-out infinite;
}

@keyframes iconFloat-b-t0ux5h3zof {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

.header-info h1[b-t0ux5h3zof] {
    margin: 0 0 var(--spacing-2) 0;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-on-primary);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.02em;
}

.lead[b-t0ux5h3zof] {
    margin: 0;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Header Stats */
.header-stats[b-t0ux5h3zof] {
    display: flex;
    gap: var(--spacing-4);
}

.stat-badge[b-t0ux5h3zof] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-5);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: var(--transition-base);
}

    .stat-badge:hover[b-t0ux5h3zof] {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .stat-badge.success[b-t0ux5h3zof] {
        border-color: rgba(102, 187, 106, 0.5);
    }

    .stat-badge.warning[b-t0ux5h3zof] {
        border-color: rgba(255, 152, 0, 0.5);
    }

    .stat-badge.info[b-t0ux5h3zof] {
        border-color: rgba(3, 169, 244, 0.5);
    }

    .stat-badge i[b-t0ux5h3zof] {
        font-size: 1.5rem;
        color: var(--text-on-primary);
    }

.stat-content[b-t0ux5h3zof] {
    text-align: left;
}

.stat-value[b-t0ux5h3zof] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-on-primary);
    line-height: 1;
}

.stat-label[b-t0ux5h3zof] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Header Actions Bar */
.header-actions-bar[b-t0ux5h3zof] {
    background: white;
    padding: var(--spacing-4) 0;
    margin: 0 calc(var(--spacing-8) * -1) var(--spacing-6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 10;
}

.actions-container[b-t0ux5h3zof] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-8);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

/* Action Buttons */
.btn-toggle[b-t0ux5h3zof],
.btn-sync[b-t0ux5h3zof] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn-toggle[b-t0ux5h3zof] {
    background: white;
    color: var(--text-primary);
    border: 2px solid var(--border-secondary);
}

    .btn-toggle:hover[b-t0ux5h3zof] {
        background: var(--pastel-lavender-light);
        border-color: var(--pastel-lavender);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.btn-sync[b-t0ux5h3zof] {
    background: var(--gradient-primary);
    color: white;
    border: none;
    box-shadow: var(--shadow-md);
}

    .btn-sync:hover:not(:disabled)[b-t0ux5h3zof] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg), var(--glow-primary);
    }

    .btn-sync:disabled[b-t0ux5h3zof] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-sync.syncing[b-t0ux5h3zof] {
        background: var(--gradient-info);
    }
/* _content/PKFAPI/Components/Pages/ServiceDeskDetail.razor.rz.scp.css */
/* Service Desk Detail Container */
.servicedeskdetail-container[b-6kcfx3hf0n] {
    min-height: 100vh;
    animation: fadeIn-b-6kcfx3hf0n 0.5s ease-out;
    position: relative;
    background: var(--bg-primary);
}

@keyframes fadeIn-b-6kcfx3hf0n {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading Overlay */
.loading-overlay[b-6kcfx3hf0n] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-overlay-light);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
}

.loading-content[b-6kcfx3hf0n] {
    text-align: center;
    animation: pulseScale-b-6kcfx3hf0n 1.5s ease-in-out infinite;
}

@keyframes pulseScale-b-6kcfx3hf0n {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.loading-spinner[b-6kcfx3hf0n] {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--spacing-4);
    border: 4px solid var(--pastel-lavender);
    border-top-color: var(--primary-500);
    border-radius: 50%;
    animation: spin-b-6kcfx3hf0n 1s linear infinite;
}

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

.loading-content p[b-6kcfx3hf0n] {
    font-size: 1.125rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Error State */
.error-state[b-6kcfx3hf0n] {
    padding: var(--spacing-12);
    text-align: center;
    animation: fadeIn-b-6kcfx3hf0n 0.5s ease-out;
}

.error-icon[b-6kcfx3hf0n] {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--spacing-6);
    background: var(--gradient-danger);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: white;
    box-shadow: var(--shadow-lg), 0 0 40px rgba(244, 67, 54, 0.3);
    animation: errorPulse-b-6kcfx3hf0n 2s ease-in-out infinite;
}

@keyframes errorPulse-b-6kcfx3hf0n {
    0%, 100% {
        transform: scale(1);
        box-shadow: var(--shadow-lg), 0 0 40px rgba(244, 67, 54, 0.3);
    }

    50% {
        transform: scale(1.05);
        box-shadow: var(--shadow-xl), 0 0 60px rgba(244, 67, 54, 0.4);
    }
}

.error-state h2[b-6kcfx3hf0n] {
    margin: 0 0 var(--spacing-3) 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.error-state p[b-6kcfx3hf0n] {
    margin: 0 0 var(--spacing-6) 0;
    color: var(--text-secondary);
    font-size: 1.125rem;
}

/* Detail Header - Enhanced with stunning animations */
.detail-header[b-6kcfx3hf0n] {
    position: relative;
    margin: calc(var(--spacing-8) * -1) calc(var(--spacing-8) * -1) var(--spacing-8);
    overflow: hidden;
}

.header-background[b-6kcfx3hf0n] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #8AB4F8 0%, #81C784 25%, #9B8FFF 50%, #FF8FA3 75%, #FDB462 100%);
    animation: gradientShift-b-6kcfx3hf0n 15s ease infinite;
}

@keyframes gradientShift-b-6kcfx3hf0n {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.header-pattern[b-6kcfx3hf0n] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    background-image: radial-gradient(circle at 20% 50%, white 1px, transparent 1px), radial-gradient(circle at 80% 50%, white 1px, transparent 1px), radial-gradient(circle at 50% 20%, white 1px, transparent 1px), radial-gradient(circle at 50% 80%, white 1px, transparent 1px);
    background-size: 100px 100px;
    animation: patternMove-b-6kcfx3hf0n 20s linear infinite;
}

@keyframes patternMove-b-6kcfx3hf0n {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(100px, 100px);
    }
}

.header-content[b-6kcfx3hf0n] {
    position: relative;
    z-index: 1;
    padding: var(--spacing-6) var(--spacing-8);
    max-width: 1600px;
    margin: 0 auto;
}

/* Back Button */
.back-button[b-6kcfx3hf0n] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition-base);
    margin-bottom: var(--spacing-4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

    .back-button:hover[b-6kcfx3hf0n] {
        background: rgba(255, 255, 255, 0.3);
        transform: translateX(-4px);
        box-shadow: var(--shadow-md);
    }

/* Header Main */
.header-main[b-6kcfx3hf0n] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-6);
}

.header-left[b-6kcfx3hf0n] {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
}

/* Desk Avatar */
.desk-avatar[b-6kcfx3hf0n] {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--primary-600);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), inset 0 2px 4px rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
    animation: deskFloat-b-6kcfx3hf0n 3s ease-in-out infinite;
}

@keyframes deskFloat-b-6kcfx3hf0n {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-5px) scale(1.02);
    }
}

.desk-avatar[b-6kcfx3hf0n]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: rotate(45deg);
    animation: shimmer-b-6kcfx3hf0n 3s ease-in-out infinite;
}

@keyframes shimmer-b-6kcfx3hf0n {
    0% {
        transform: translateX(-200%) translateY(-200%) rotate(45deg);
    }

    100% {
        transform: translateX(200%) translateY(200%) rotate(45deg);
    }
}

/* Portal Indicator */
.portal-indicator[b-6kcfx3hf0n] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 28px;
    height: 28px;
    background: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: indicatorPulse-b-6kcfx3hf0n 2s ease-in-out infinite;
}

@keyframes indicatorPulse-b-6kcfx3hf0n {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
}

.portal-indicator.public[b-6kcfx3hf0n] {
    color: var(--success-600);
    background: var(--success-100);
}

.portal-indicator.private[b-6kcfx3hf0n] {
    color: var(--warning-600);
    background: var(--warning-100);
}

/* Desk Info */
.desk-info h1[b-6kcfx3hf0n] {
    margin: 0 0 var(--spacing-2) 0;
    font-size: 2rem;
    font-weight: 700;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.02em;
}

.desk-meta[b-6kcfx3hf0n] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.meta-badge[b-6kcfx3hf0n] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-3);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

    .meta-badge i[b-6kcfx3hf0n] {
        font-size: 0.875rem;
        opacity: 0.9;
    }

/* Header Actions */
.header-actions[b-6kcfx3hf0n] {
    display: flex;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}

.action-button[b-6kcfx3hf0n] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    border: none;
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

    .action-button[b-6kcfx3hf0n]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.5s ease;
    }

    .action-button:hover[b-6kcfx3hf0n]::before {
        width: 300px;
        height: 300px;
    }

    .action-button:hover:not(:disabled)[b-6kcfx3hf0n] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .action-button:disabled[b-6kcfx3hf0n] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .action-button.secondary[b-6kcfx3hf0n] {
        background: white;
        color: var(--text-primary);
    }

        .action-button.secondary[b-6kcfx3hf0n]::before {
            background: rgba(139, 92, 246, 0.1);
        }

    .action-button.primary[b-6kcfx3hf0n] {
        background: var(--gradient-primary);
        color: white;
    }

        .action-button.primary[b-6kcfx3hf0n]::before {
            background: rgba(255, 255, 255, 0.2);
        }

    .action-button.accent[b-6kcfx3hf0n] {
        background: var(--gradient-info);
        color: white;
    }

        .action-button.accent[b-6kcfx3hf0n]::before {
            background: rgba(255, 255, 255, 0.2);
        }

/* Stats Overview */
.stats-overview[b-6kcfx3hf0n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-5);
    margin-bottom: var(--spacing-8);
    position: relative;
    z-index: 10;
}

.stat-box[b-6kcfx3hf0n] {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-base);
    border: 2px solid transparent;
    animation: statSlideUp-b-6kcfx3hf0n 0.5s ease-out backwards;
}

    .stat-box:nth-child(1)[b-6kcfx3hf0n] {
        animation-delay: 0.1s;
    }

    .stat-box:nth-child(2)[b-6kcfx3hf0n] {
        animation-delay: 0.2s;
    }

    .stat-box:nth-child(3)[b-6kcfx3hf0n] {
        animation-delay: 0.3s;
    }

    .stat-box:nth-child(4)[b-6kcfx3hf0n] {
        animation-delay: 0.4s;
    }

    .stat-box:nth-child(5)[b-6kcfx3hf0n] {
        animation-delay: 0.5s;
    }

    .stat-box:nth-child(6)[b-6kcfx3hf0n] {
        animation-delay: 0.6s;
    }

@keyframes statSlideUp-b-6kcfx3hf0n {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.stat-box[b-6kcfx3hf0n]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.5));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-box:hover[b-6kcfx3hf0n] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

    .stat-box:hover[b-6kcfx3hf0n]::before {
        opacity: 1;
    }

/* Stat Icons with unique gradients */
.stat-icon[b-6kcfx3hf0n] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    position: relative;
    animation: iconFloat-b-6kcfx3hf0n 3s ease-in-out infinite;
}

    .stat-icon.organizations[b-6kcfx3hf0n] {
        background: var(--gradient-primary);
        box-shadow: 0 4px 12px rgba(155, 143, 255, 0.3);
    }

.stat-box:hover .stat-icon.organizations[b-6kcfx3hf0n] {
    box-shadow: 0 6px 20px rgba(155, 143, 255, 0.4);
}

.stat-icon.customers[b-6kcfx3hf0n] {
    background: var(--gradient-secondary);
    box-shadow: 0 4px 12px rgba(138, 180, 248, 0.3);
    animation-delay: 0.5s;
}

.stat-box:hover .stat-icon.customers[b-6kcfx3hf0n] {
    box-shadow: 0 6px 20px rgba(138, 180, 248, 0.4);
}

.stat-icon.request-types[b-6kcfx3hf0n] {
    background: var(--gradient-tertiary);
    box-shadow: 0 4px 12px rgba(253, 180, 98, 0.3);
    animation-delay: 1s;
}

.stat-box:hover .stat-icon.request-types[b-6kcfx3hf0n] {
    box-shadow: 0 6px 20px rgba(253, 180, 98, 0.4);
}

.stat-icon.queues[b-6kcfx3hf0n] {
    background: var(--gradient-success);
    box-shadow: 0 4px 12px rgba(102, 187, 106, 0.3);
    animation-delay: 1.5s;
}

.stat-box:hover .stat-icon.queues[b-6kcfx3hf0n] {
    box-shadow: 0 6px 20px rgba(102, 187, 106, 0.4);
}

.stat-icon.portal[b-6kcfx3hf0n] {
    background: var(--gradient-info);
    box-shadow: 0 4px 12px rgba(41, 182, 246, 0.3);
    animation-delay: 2s;
}

.stat-box:hover .stat-icon.portal[b-6kcfx3hf0n] {
    box-shadow: 0 6px 20px rgba(41, 182, 246, 0.4);
}

.stat-icon.kb-articles[b-6kcfx3hf0n] {
    background: var(--gradient-warning);
    box-shadow: 0 4px 12px rgba(255, 202, 40, 0.3);
    animation-delay: 2.5s;
}

.stat-box:hover .stat-icon.kb-articles[b-6kcfx3hf0n] {
    box-shadow: 0 6px 20px rgba(255, 202, 40, 0.4);
}

@keyframes iconFloat-b-6kcfx3hf0n {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

.stat-details[b-6kcfx3hf0n] {
    flex: 1;
}

.stat-value[b-6kcfx3hf0n] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: var(--spacing-1);
    animation: countUp-b-6kcfx3hf0n 1s ease-out;
}

@keyframes countUp-b-6kcfx3hf0n {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-label[b-6kcfx3hf0n] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.stat-action[b-6kcfx3hf0n] {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.stat-box:hover .stat-action[b-6kcfx3hf0n] {
    background: var(--primary-100);
    color: var(--primary-600);
    transform: translateX(2px);
}

/* Tabs Container */
.tabs-container[b-6kcfx3hf0n] {
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
    z-index: 10;
}

/* Tabs Header */
.tabs-header[b-6kcfx3hf0n] {
    display: flex;
    align-items: center;
    background: var(--bg-tertiary);
    border-bottom: 2px solid var(--border-secondary);
    padding: 0 var(--spacing-6);
    overflow-x: auto;
    scrollbar-width: none;
    position: relative;
}

    .tabs-header[b-6kcfx3hf0n]::-webkit-scrollbar {
        display: none;
    }

.tab-button[b-6kcfx3hf0n] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4) var(--spacing-5);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
    white-space: nowrap;
}

    .tab-button[b-6kcfx3hf0n]::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 50%;
        width: 0;
        height: 3px;
        background: var(--gradient-primary);
        transition: var(--transition-base);
        transform: translateX(-50%);
    }

    .tab-button:hover[b-6kcfx3hf0n] {
        color: var(--text-primary);
        background: var(--bg-secondary);
    }

    .tab-button.active[b-6kcfx3hf0n] {
        color: var(--primary-600);
        background: white;
    }

        .tab-button.active[b-6kcfx3hf0n]::after {
            width: 100%;
        }

    .tab-button i[b-6kcfx3hf0n] {
        font-size: 1.125rem;
        transition: var(--transition-fast);
    }

    .tab-button:hover i[b-6kcfx3hf0n] {
        transform: scale(1.1);
    }

.tab-badge[b-6kcfx3hf0n] {
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--bg-quaternary);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
    transition: var(--transition-fast);
}

.tab-button.active .tab-badge[b-6kcfx3hf0n] {
    background: var(--gradient-primary);
    color: white;
    animation: badgePop-b-6kcfx3hf0n 0.3s ease-out;
}

@keyframes badgePop-b-6kcfx3hf0n {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* Tab Content */
.tab-content[b-6kcfx3hf0n] {
    padding: var(--spacing-6);
    animation: tabFadeIn-b-6kcfx3hf0n 0.3s ease-out;
}

@keyframes tabFadeIn-b-6kcfx3hf0n {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tab Header Actions */
.tab-header-actions[b-6kcfx3hf0n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

/* Search Box */
.search-box[b-6kcfx3hf0n] {
    position: relative;
    flex: 1;
    max-width: 400px;
}

    .search-box i[b-6kcfx3hf0n] {
        position: absolute;
        left: var(--spacing-4);
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-tertiary);
        font-size: 1rem;
        pointer-events: none;
    }

    .search-box input[b-6kcfx3hf0n] {
        width: 100%;
        padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-10);
        background: var(--bg-tertiary);
        border: 2px solid transparent;
        border-radius: var(--radius-xl);
        font-size: 0.875rem;
        color: var(--text-primary);
        transition: var(--transition-base);
    }

        .search-box input:focus[b-6kcfx3hf0n] {
            outline: none;
            background: white;
            border-color: var(--primary-400);
            box-shadow: 0 0 0 4px var(--pastel-lavender-light);
        }

/* Add Button */
.btn-add[b-6kcfx3hf0n] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    background: var(--gradient-secondary);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

    .btn-add[b-6kcfx3hf0n]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: all 0.5s ease;
        opacity: 0;
    }

    .btn-add:hover[b-6kcfx3hf0n]::before {
        opacity: 1;
        animation: rotateGlow-b-6kcfx3hf0n 1s linear;
    }

@keyframes rotateGlow-b-6kcfx3hf0n {
    from {
        transform: rotate(45deg);
    }

    to {
        transform: rotate(405deg);
    }
}

.btn-add:hover[b-6kcfx3hf0n] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 0 20px rgba(138, 180, 248, 0.4);
}

/* Filter Chips */
.filter-chips[b-6kcfx3hf0n] {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.filter-chip[b-6kcfx3hf0n] {
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}

    .filter-chip:hover[b-6kcfx3hf0n] {
        background: var(--pastel-lavender-light);
        border-color: var(--pastel-lavender);
        color: var(--primary-600);
    }

    .filter-chip.active[b-6kcfx3hf0n] {
        background: var(--gradient-primary);
        color: white;
        border-color: transparent;
    }

/* Overview Tab */
.overview-tab[b-6kcfx3hf0n] {
    display: grid;
    gap: var(--spacing-6);
}

.chart-card[b-6kcfx3hf0n] {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-secondary);
}

    .chart-card h3[b-6kcfx3hf0n] {
        margin: 0 0 var(--spacing-4) 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

.chart-placeholder[b-6kcfx3hf0n] {
    height: 300px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
}

    .chart-placeholder i[b-6kcfx3hf0n] {
        font-size: 3rem;
        margin-bottom: var(--spacing-3);
        opacity: 0.5;
    }

/* Quick Stats Grid */
.quick-stats-grid[b-6kcfx3hf0n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-4);
}

.quick-stat-card[b-6kcfx3hf0n] {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-secondary);
    transition: var(--transition-base);
}

    .quick-stat-card:hover[b-6kcfx3hf0n] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        border-color: var(--pastel-lavender);
    }

    .quick-stat-card h4[b-6kcfx3hf0n] {
        margin: 0 0 var(--spacing-3) 0;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

.metric-value[b-6kcfx3hf0n] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.metric-trend[b-6kcfx3hf0n] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.875rem;
}

    .metric-trend i[b-6kcfx3hf0n] {
        font-size: 0.875rem;
    }

    .metric-trend.positive[b-6kcfx3hf0n] {
        color: var(--success-600);
    }

    .metric-trend.warning[b-6kcfx3hf0n] {
        color: var(--warning-600);
    }

    .metric-trend.neutral[b-6kcfx3hf0n] {
        color: var(--text-tertiary);
    }

/* Top Items Card */
.top-items-card[b-6kcfx3hf0n] {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-secondary);
}

    .top-items-card h3[b-6kcfx3hf0n] {
        margin: 0 0 var(--spacing-4) 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

.top-items-list[b-6kcfx3hf0n] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.top-item[b-6kcfx3hf0n] {
    position: relative;
}

.item-info[b-6kcfx3hf0n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-2);
}

.item-name[b-6kcfx3hf0n] {
    font-weight: 600;
    color: var(--text-primary);
}

.item-count[b-6kcfx3hf0n] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.item-bar[b-6kcfx3hf0n] {
    height: 8px;
    background: var(--bg-quaternary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.bar-fill[b-6kcfx3hf0n] {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

/* Organizations Tab */
.organizations-grid[b-6kcfx3hf0n] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: var(--spacing-4);
}

.organization-card[b-6kcfx3hf0n] {
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: var(--transition-base);
    position: relative;
}

    .organization-card[b-6kcfx3hf0n]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gradient-primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .organization-card:hover[b-6kcfx3hf0n]::before {
        transform: scaleX(1);
    }

    .organization-card:hover[b-6kcfx3hf0n] {
        border-color: var(--primary-400);
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

.org-header[b-6kcfx3hf0n] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-5);
}

.org-icon[b-6kcfx3hf0n] {
    width: 56px;
    height: 56px;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: var(--shadow-sm);
    animation: float 3s ease-in-out infinite;
}

.org-main-info[b-6kcfx3hf0n] {
    flex: 1;
}

    .org-main-info h4[b-6kcfx3hf0n] {
        margin: 0 0 var(--spacing-2) 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.org-badges[b-6kcfx3hf0n] {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.org-badge[b-6kcfx3hf0n] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

    .org-badge i[b-6kcfx3hf0n] {
        font-size: 0.75rem;
        opacity: 0.7;
    }

.org-actions[b-6kcfx3hf0n] {
    display: flex;
    gap: var(--spacing-2);
}

.icon-button[b-6kcfx3hf0n] {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .icon-button:hover[b-6kcfx3hf0n] {
        background: var(--primary-100);
        color: var(--primary-600);
        transform: scale(1.1);
    }

.org-properties[b-6kcfx3hf0n] {
    padding: 0 var(--spacing-5) var(--spacing-4);
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.property-tag[b-6kcfx3hf0n] {
    padding: var(--spacing-1) var(--spacing-3);
    background: var(--pastel-lavender-light);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.prop-key[b-6kcfx3hf0n] {
    font-weight: 600;
    color: var(--primary-700);
}

.prop-value[b-6kcfx3hf0n] {
    color: var(--text-secondary);
}

.property-tag.more[b-6kcfx3hf0n] {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    font-style: italic;
}

.org-footer[b-6kcfx3hf0n] {
    padding: var(--spacing-4) var(--spacing-5);
    background: var(--bg-tertiary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.link-button[b-6kcfx3hf0n] {
    background: none;
    border: none;
    color: var(--primary-500);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 0;
    transition: var(--transition-fast);
}

    .link-button:hover[b-6kcfx3hf0n] {
        color: var(--primary-600);
        transform: translateX(2px);
    }

.org-date[b-6kcfx3hf0n] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* Customers Tab */
.customers-list[b-6kcfx3hf0n] {
    display: grid;
    gap: var(--spacing-3);
}

.customer-item[b-6kcfx3hf0n] {
    background: white;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    transition: var(--transition-base);
}

    .customer-item:hover[b-6kcfx3hf0n] {
        border-color: var(--primary-300);
        box-shadow: var(--shadow-md);
        transform: translateX(4px);
    }

.customer-avatar[b-6kcfx3hf0n] {
    width: 48px;
    height: 48px;
    background: var(--gradient-secondary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.customer-info[b-6kcfx3hf0n] {
    flex: 1;
}

    .customer-info h5[b-6kcfx3hf0n] {
        margin: 0 0 var(--spacing-1) 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.customer-details[b-6kcfx3hf0n] {
    display: flex;
    gap: var(--spacing-4);
    align-items: center;
    flex-wrap: wrap;
}

    .customer-details span[b-6kcfx3hf0n] {
        display: flex;
        align-items: center;
        gap: var(--spacing-1);
        font-size: 0.875rem;
        color: var(--text-secondary);
    }

    .customer-details i[b-6kcfx3hf0n] {
        font-size: 0.875rem;
        opacity: 0.7;
    }

.status-badge[b-6kcfx3hf0n] {
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

    .status-badge.active[b-6kcfx3hf0n] {
        background: var(--success-100);
        color: var(--success-700);
    }

    .status-badge.inactive[b-6kcfx3hf0n] {
        background: var(--gray-100);
        color: var(--gray-600);
    }

.view-button[b-6kcfx3hf0n] {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--primary-100);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .view-button:hover[b-6kcfx3hf0n] {
        background: var(--primary-200);
        transform: translateX(2px);
    }

/* Request Types Tab */
.request-types-grid[b-6kcfx3hf0n] {
    display: grid;
    gap: var(--spacing-4);
}

.request-type-card[b-6kcfx3hf0n] {
    background: white;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: var(--transition-base);
}

    .request-type-card:hover[b-6kcfx3hf0n] {
        border-color: var(--primary-300);
        box-shadow: var(--shadow-md);
    }

    .request-type-card.expanded[b-6kcfx3hf0n] {
        border-color: var(--primary-400);
        box-shadow: var(--shadow-lg);
    }

.rt-header[b-6kcfx3hf0n] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-5);
    cursor: pointer;
    transition: var(--transition-fast);
}

    .rt-header:hover[b-6kcfx3hf0n] {
        background: var(--bg-tertiary);
    }

.rt-icon[b-6kcfx3hf0n] {
    width: 48px;
    height: 48px;
    background: var(--gradient-tertiary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.rt-info[b-6kcfx3hf0n] {
    flex: 1;
}

    .rt-info h4[b-6kcfx3hf0n] {
        margin: 0 0 var(--spacing-1) 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .rt-info p[b-6kcfx3hf0n] {
        margin: 0 0 var(--spacing-2) 0;
        font-size: 0.875rem;
        color: var(--text-secondary);
    }

.rt-meta[b-6kcfx3hf0n] {
    display: flex;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}

    .rt-meta span[b-6kcfx3hf0n] {
        display: flex;
        align-items: center;
        gap: var(--spacing-1);
        font-size: 0.75rem;
        color: var(--text-tertiary);
    }

    .rt-meta i[b-6kcfx3hf0n] {
        font-size: 0.875rem;
    }

.expand-button[b-6kcfx3hf0n] {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .expand-button:hover[b-6kcfx3hf0n] {
        background: var(--primary-100);
        color: var(--primary-600);
    }

    .expand-button i[b-6kcfx3hf0n] {
        transition: transform 0.3s ease;
    }

.request-type-card.expanded .expand-button i[b-6kcfx3hf0n] {
    transform: rotate(180deg);
}

.rt-expanded[b-6kcfx3hf0n] {
    padding: 0 var(--spacing-5) var(--spacing-5);
    animation: expandDown-b-6kcfx3hf0n 0.3s ease-out;
}

@keyframes expandDown-b-6kcfx3hf0n {
    from {
        opacity: 0;
        max-height: 0;
    }

    to {
        opacity: 1;
        max-height: 500px;
    }
}

.help-text[b-6kcfx3hf0n] {
    background: var(--info-50);
    border-left: 4px solid var(--info-400);
    padding: var(--spacing-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
    font-size: 0.875rem;
    color: var(--info-800);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
}

    .help-text i[b-6kcfx3hf0n] {
        flex-shrink: 0;
        margin-top: 2px;
    }

.fields-section[b-6kcfx3hf0n] {
    margin-bottom: var(--spacing-4);
}

    .fields-section h5[b-6kcfx3hf0n] {
        margin: 0 0 var(--spacing-3) 0;
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.fields-grid[b-6kcfx3hf0n] {
    display: grid;
    gap: var(--spacing-2);
}

.field-item[b-6kcfx3hf0n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.field-name[b-6kcfx3hf0n] {
    font-weight: 500;
    color: var(--text-primary);
}

.field-badges[b-6kcfx3hf0n] {
    display: flex;
    gap: var(--spacing-2);
}

.field-type[b-6kcfx3hf0n] {
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--bg-quaternary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.field-required[b-6kcfx3hf0n] {
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--danger-100);
    color: var(--danger-600);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.rt-actions[b-6kcfx3hf0n] {
    display: flex;
    gap: var(--spacing-4);
    border-top: 1px solid var(--border-secondary);
    padding-top: var(--spacing-3);
}

.action-link[b-6kcfx3hf0n] {
    background: none;
    border: none;
    color: var(--primary-500);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 0;
    transition: var(--transition-fast);
}

    .action-link:hover[b-6kcfx3hf0n] {
        color: var(--primary-600);
        transform: translateX(2px);
    }

/* Queues Tab */
.queues-grid[b-6kcfx3hf0n] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-4);
}

.queue-card[b-6kcfx3hf0n] {
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

    .queue-card[b-6kcfx3hf0n]::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100px;
        background: var(--gradient-success);
        opacity: 0.1;
        border-radius: 50%;
        transform: translate(30px, -30px);
        transition: transform 0.3s ease;
    }

    .queue-card:hover[b-6kcfx3hf0n]::after {
        transform: translate(20px, -20px) scale(1.2);
    }

    .queue-card:hover[b-6kcfx3hf0n] {
        border-color: var(--success-400);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.queue-header[b-6kcfx3hf0n] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.queue-icon[b-6kcfx3hf0n] {
    width: 56px;
    height: 56px;
    background: var(--gradient-success);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.queue-info h4[b-6kcfx3hf0n] {
    margin: 0 0 var(--spacing-2) 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.queue-stats[b-6kcfx3hf0n] {
    display: flex;
    gap: var(--spacing-3);
}

.stat-chip[b-6kcfx3hf0n] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-3);
    background: var(--success-100);
    color: var(--success-700);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
}

    .stat-chip i[b-6kcfx3hf0n] {
        font-size: 0.875rem;
    }

.queue-jql[b-6kcfx3hf0n] {
    background: var(--bg-tertiary);
    padding: var(--spacing-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
}

.jql-label[b-6kcfx3hf0n] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: var(--spacing-1);
}

.queue-jql code[b-6kcfx3hf0n] {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 0.8125rem;
    color: var(--text-primary);
    word-break: break-all;
}

.queue-actions[b-6kcfx3hf0n] {
    display: flex;
    gap: var(--spacing-3);
}

.queue-action[b-6kcfx3hf0n] {
    flex: 1;
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    transition: var(--transition-fast);
}

    .queue-action:hover[b-6kcfx3hf0n] {
        background: var(--success-100);
        border-color: var(--success-300);
        color: var(--success-700);
        transform: translateY(-1px);
    }

/* Portal Tab */
.portal-settings-container[b-6kcfx3hf0n] {
    display: grid;
    gap: var(--spacing-6);
}

.settings-section[b-6kcfx3hf0n] {
    background: white;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    transition: var(--transition-base);
}

    .settings-section:hover[b-6kcfx3hf0n] {
        box-shadow: var(--shadow-md);
        border-color: var(--primary-300);
    }

    .settings-section h3[b-6kcfx3hf0n] {
        margin: 0 0 var(--spacing-4) 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

.settings-grid[b-6kcfx3hf0n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-4);
}

.setting-item[b-6kcfx3hf0n] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

    .setting-item.full-width[b-6kcfx3hf0n] {
        grid-column: 1 / -1;
    }

    .setting-item label[b-6kcfx3hf0n] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

.setting-value[b-6kcfx3hf0n] {
    font-size: 1rem;
    color: var(--text-primary);
}

.access-badge[b-6kcfx3hf0n] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.875rem;
}

    .access-badge.public[b-6kcfx3hf0n] {
        background: var(--success-100);
        color: var(--success-700);
    }

    .access-badge.private[b-6kcfx3hf0n] {
        background: var(--warning-100);
        color: var(--warning-700);
    }

.color-preview[b-6kcfx3hf0n] {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-md);
    display: inline-block;
    vertical-align: middle;
    margin-right: var(--spacing-2);
    border: 2px solid var(--border-secondary);
}

.announcement-preview[b-6kcfx3hf0n] {
    padding: var(--spacing-4);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
}

    .announcement-preview.info[b-6kcfx3hf0n] {
        background: var(--info-50);
        color: var(--info-800);
    }

    .announcement-preview.warning[b-6kcfx3hf0n] {
        background: var(--warning-50);
        color: var(--warning-800);
    }

    .announcement-preview.error[b-6kcfx3hf0n] {
        background: var(--danger-50);
        color: var(--danger-800);
    }

.announcement-content[b-6kcfx3hf0n] {
    flex: 1;
}

.announcement-level[b-6kcfx3hf0n] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: var(--spacing-1);
    display: block;
}

.announcement-content p[b-6kcfx3hf0n] {
    margin: 0;
    font-size: 0.875rem;
}

.languages-list[b-6kcfx3hf0n] {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.language-chip[b-6kcfx3hf0n] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--info-100);
    color: var(--info-700);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
}

.portal-actions[b-6kcfx3hf0n] {
    display: flex;
    gap: var(--spacing-4);
    margin-top: var(--spacing-6);
}

.btn-primary[b-6kcfx3hf0n],
.btn-secondary[b-6kcfx3hf0n] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    border: none;
    border-radius: var(--radius-xl);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--shadow-md);
}

.btn-primary[b-6kcfx3hf0n] {
    background: var(--gradient-primary);
    color: white;
}

    .btn-primary:hover[b-6kcfx3hf0n] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg), var(--glow-primary);
    }

.btn-secondary[b-6kcfx3hf0n] {
    background: white;
    color: var(--text-primary);
    border: 2px solid var(--border-secondary);
}

    .btn-secondary:hover[b-6kcfx3hf0n] {
        background: var(--bg-tertiary);
        border-color: var(--primary-300);
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

/* Knowledge Base Tab */
.kb-articles-grid[b-6kcfx3hf0n] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-4);
}

.kb-article-card[b-6kcfx3hf0n] {
    background: white;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

    .kb-article-card[b-6kcfx3hf0n]::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: var(--gradient-warning);
        border-radius: var(--radius-xl);
        opacity: 0;
        z-index: -1;
        transition: opacity 0.3s ease;
    }

    .kb-article-card:hover[b-6kcfx3hf0n]::before {
        opacity: 0.1;
    }

    .kb-article-card:hover[b-6kcfx3hf0n] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.article-header[b-6kcfx3hf0n] {
    margin-bottom: var(--spacing-3);
}

    .article-header h4[b-6kcfx3hf0n] {
        margin: 0 0 var(--spacing-2) 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
    }

.article-meta[b-6kcfx3hf0n] {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.meta-chip[b-6kcfx3hf0n] {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--warning-100);
    color: var(--warning-700);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
}

.article-excerpt[b-6kcfx3hf0n] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-3);
}

.article-actions[b-6kcfx3hf0n] {
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--border-secondary);
}

.article-link[b-6kcfx3hf0n] {
    background: none;
    border: none;
    color: var(--warning-600);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 0;
    transition: var(--transition-fast);
}

    .article-link:hover[b-6kcfx3hf0n] {
        color: var(--warning-700);
        transform: translateX(2px);
    }

/* Activity Tab */
.activity-timeline[b-6kcfx3hf0n] {
    position: relative;
    padding-left: var(--spacing-10);
}

    .activity-timeline[b-6kcfx3hf0n]::before {
        content: '';
        position: absolute;
        left: 20px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--border-secondary);
    }

.timeline-item[b-6kcfx3hf0n] {
    position: relative;
    margin-bottom: var(--spacing-6);
    animation: timelineSlide-b-6kcfx3hf0n 0.5s ease-out backwards;
}

    .timeline-item:nth-child(1)[b-6kcfx3hf0n] {
        animation-delay: 0.1s;
    }

    .timeline-item:nth-child(2)[b-6kcfx3hf0n] {
        animation-delay: 0.2s;
    }

    .timeline-item:nth-child(3)[b-6kcfx3hf0n] {
        animation-delay: 0.3s;
    }

    .timeline-item:nth-child(4)[b-6kcfx3hf0n] {
        animation-delay: 0.4s;
    }

@keyframes timelineSlide-b-6kcfx3hf0n {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.timeline-marker[b-6kcfx3hf0n] {
    position: absolute;
    left: -30px;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background: white;
    border: 3px solid var(--border-secondary);
    z-index: 1;
}

    .timeline-marker.sync[b-6kcfx3hf0n] {
        background: var(--primary-500);
        border-color: var(--primary-300);
    }

    .timeline-marker.organization[b-6kcfx3hf0n] {
        background: var(--success-500);
        border-color: var(--success-300);
    }

    .timeline-marker.request-type[b-6kcfx3hf0n] {
        background: var(--warning-500);
        border-color: var(--warning-300);
    }

    .timeline-marker.portal[b-6kcfx3hf0n] {
        background: var(--info-500);
        border-color: var(--info-300);
    }

.timeline-content[b-6kcfx3hf0n] {
    background: white;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    transition: var(--transition-fast);
}

    .timeline-content:hover[b-6kcfx3hf0n] {
        box-shadow: var(--shadow-md);
        border-color: var(--primary-300);
    }

.activity-header[b-6kcfx3hf0n] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-2);
}

    .activity-header i[b-6kcfx3hf0n] {
        color: var(--primary-500);
        font-size: 1.125rem;
    }

    .activity-header h5[b-6kcfx3hf0n] {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        flex: 1;
    }

.activity-time[b-6kcfx3hf0n] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.timeline-content p[b-6kcfx3hf0n] {
    margin: 0 0 var(--spacing-2) 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.activity-details[b-6kcfx3hf0n] {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.detail-chip[b-6kcfx3hf0n] {
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Empty Tab State */
.empty-tab-state[b-6kcfx3hf0n] {
    padding: var(--spacing-12);
    text-align: center;
    color: var(--text-tertiary);
    animation: emptyFade-b-6kcfx3hf0n 0.5s ease-out;
}

@keyframes emptyFade-b-6kcfx3hf0n {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.empty-tab-state > i[b-6kcfx3hf0n] {
    font-size: 4rem;
    margin-bottom: var(--spacing-4);
    display: block;
    color: var(--pastel-lavender-dark);
    animation: iconFloat-b-6kcfx3hf0n 3s ease-in-out infinite;
}

.empty-tab-state h4[b-6kcfx3hf0n] {
    margin: 0 0 var(--spacing-2) 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.empty-tab-state p[b-6kcfx3hf0n] {
    margin: 0;
    color: var(--text-secondary);
}

/* Dark Mode Adjustments */
[data-theme="dark"] .detail-header[b-6kcfx3hf0n] {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-quaternary) 50%, var(--bg-tertiary) 100%);
}

[data-theme="dark"] .header-background[b-6kcfx3hf0n] {
    opacity: 0.3;
}

[data-theme="dark"] .desk-avatar[b-6kcfx3hf0n] {
    background: rgba(155, 143, 255, 0.2);
    color: var(--primary-400);
}

[data-theme="dark"] .tabs-container[b-6kcfx3hf0n] {
    background: var(--bg-secondary);
}

[data-theme="dark"] .tabs-header[b-6kcfx3hf0n] {
    background: var(--bg-quaternary);
}

[data-theme="dark"] .tab-button.active[b-6kcfx3hf0n] {
    background: var(--bg-secondary);
}

[data-theme="dark"] .stat-box[b-6kcfx3hf0n] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
}

[data-theme="dark"] .organization-card[b-6kcfx3hf0n],
[data-theme="dark"] .customer-item[b-6kcfx3hf0n],
[data-theme="dark"] .request-type-card[b-6kcfx3hf0n],
[data-theme="dark"] .queue-card[b-6kcfx3hf0n],
[data-theme="dark"] .kb-article-card[b-6kcfx3hf0n],
[data-theme="dark"] .settings-section[b-6kcfx3hf0n],
[data-theme="dark"] .timeline-content[b-6kcfx3hf0n] {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .chart-card[b-6kcfx3hf0n],
[data-theme="dark"] .quick-stat-card[b-6kcfx3hf0n],
[data-theme="dark"] .top-items-card[b-6kcfx3hf0n] {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .search-box input[b-6kcfx3hf0n] {
    background: var(--bg-quaternary);
    color: var(--text-primary);
}

    [data-theme="dark"] .search-box input:focus[b-6kcfx3hf0n] {
        background: var(--bg-tertiary);
    }

[data-theme="dark"] .btn-secondary[b-6kcfx3hf0n] {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
}

    [data-theme="dark"] .btn-secondary:hover[b-6kcfx3hf0n] {
        background: var(--bg-quaternary);
    }

[data-theme="dark"] .icon-button[b-6kcfx3hf0n],
[data-theme="dark"] .expand-button[b-6kcfx3hf0n],
[data-theme="dark"] .stat-action[b-6kcfx3hf0n],
[data-theme="dark"] .queue-action[b-6kcfx3hf0n] {
    background: var(--bg-quaternary);
}

[data-theme="dark"] .help-text[b-6kcfx3hf0n] {
    background: rgba(3, 169, 244, 0.1);
    border-color: var(--info-400);
    color: var(--info-300);
}

[data-theme="dark"] .field-item[b-6kcfx3hf0n] {
    background: var(--bg-quaternary);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .stats-overview[b-6kcfx3hf0n] {
        grid-template-columns: repeat(3, 1fr);
    }

    .organizations-grid[b-6kcfx3hf0n] {
        grid-template-columns: 1fr;
    }

    .queues-grid[b-6kcfx3hf0n],
    .kb-articles-grid[b-6kcfx3hf0n] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .detail-header[b-6kcfx3hf0n] {
        margin: calc(var(--spacing-4) * -1) calc(var(--spacing-4) * -1) var(--spacing-4);
    }

    .header-content[b-6kcfx3hf0n] {
        padding: var(--spacing-4);
    }

    .header-main[b-6kcfx3hf0n] {
        flex-direction: column;
        gap: var(--spacing-4);
    }

    .header-left[b-6kcfx3hf0n] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .desk-info h1[b-6kcfx3hf0n] {
        font-size: 1.5rem;
    }

    .header-actions[b-6kcfx3hf0n] {
        width: 100%;
        justify-content: center;
    }

    .stats-overview[b-6kcfx3hf0n] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-3);
    }

    .stat-box[b-6kcfx3hf0n] {
        padding: var(--spacing-4);
    }

    .stat-icon[b-6kcfx3hf0n] {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .stat-value[b-6kcfx3hf0n] {
        font-size: 1.5rem;
    }

    .tabs-header[b-6kcfx3hf0n] {
        padding: 0;
        overflow-x: auto;
    }

    .tab-button[b-6kcfx3hf0n] {
        padding: var(--spacing-3) var(--spacing-4);
        font-size: 0.875rem;
    }

        .tab-button span:not(.tab-badge)[b-6kcfx3hf0n] {
            display: none;
        }

        .tab-button i[b-6kcfx3hf0n] {
            font-size: 1.25rem;
        }

    .tab-content[b-6kcfx3hf0n] {
        padding: var(--spacing-4);
    }

    .tab-header-actions[b-6kcfx3hf0n] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-6kcfx3hf0n] {
        max-width: none;
    }

    .quick-stats-grid[b-6kcfx3hf0n] {
        grid-template-columns: 1fr;
    }

    .settings-grid[b-6kcfx3hf0n] {
        grid-template-columns: 1fr;
    }

    .portal-actions[b-6kcfx3hf0n] {
        flex-direction: column;
    }

        .portal-actions button[b-6kcfx3hf0n] {
            width: 100%;
        }

    .activity-timeline[b-6kcfx3hf0n] {
        padding-left: var(--spacing-8);
    }

    .timeline-marker[b-6kcfx3hf0n] {
        left: -24px;
        width: 16px;
        height: 16px;
    }
}

/* Print Styles */
@media print {
    .detail-header[b-6kcfx3hf0n] {
        background: none;
        color: black;
        margin: 0;
    }

    .header-background[b-6kcfx3hf0n],
    .header-pattern[b-6kcfx3hf0n] {
        display: none;
    }

    .header-content[b-6kcfx3hf0n] {
        padding: 0;
    }

    .desk-info h1[b-6kcfx3hf0n],
    .meta-badge[b-6kcfx3hf0n] {
        color: black;
    }

    .back-button[b-6kcfx3hf0n],
    .header-actions[b-6kcfx3hf0n],
    .stat-action[b-6kcfx3hf0n],
    .tabs-header[b-6kcfx3hf0n],
    .btn-add[b-6kcfx3hf0n],
    .icon-button[b-6kcfx3hf0n],
    .expand-button[b-6kcfx3hf0n],
    .action-link[b-6kcfx3hf0n],
    .search-box[b-6kcfx3hf0n] {
        display: none !important;
    }

    .stat-box[b-6kcfx3hf0n] {
        background: white;
        border: 1px solid #ddd;
        page-break-inside: avoid;
    }

    .tabs-container[b-6kcfx3hf0n] {
        box-shadow: none;
    }

    .tab-content > div[b-6kcfx3hf0n] {
        display: block !important;
    }

    .organization-card[b-6kcfx3hf0n],
    .customer-item[b-6kcfx3hf0n],
    .request-type-card[b-6kcfx3hf0n],
    .queue-card[b-6kcfx3hf0n],
    .kb-article-card[b-6kcfx3hf0n] {
        page-break-inside: avoid;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }
}
/* _content/PKFAPI/Components/Pages/ServiceDesks.razor.rz.scp.css */
/* Service Desks Container */
.servicedesks-container[b-qe22mck2yu] {
    min-height: 100vh;
    animation: fadeIn-b-qe22mck2yu 0.5s ease-out;
    position: relative;
    background: var(--bg-primary);
}

    .servicedesks-container[b-qe22mck2yu]::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 30% 20%, var(--pastel-mint-light) 0%, transparent 35%), radial-gradient(circle at 70% 80%, var(--pastel-sky-light) 0%, transparent 35%), radial-gradient(circle at 50% 50%, var(--pastel-lavender-light) 0%, transparent 50%);
        opacity: 0.6;
        pointer-events: none;
        z-index: 0;
    }

/* Page Header */
.page-header[b-qe22mck2yu] {
    background: var(--gradient-soft);
    padding: var(--spacing-8) 0;
    margin: calc(var(--spacing-8) * -1) calc(var(--spacing-8) * -1) var(--spacing-8);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(155, 143, 255, 0.1);
}

    .page-header[b-qe22mck2yu]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 120%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
        animation: float-b-qe22mck2yu 25s ease-in-out infinite;
    }

.header-content[b-qe22mck2yu] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.header-left[b-qe22mck2yu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
}

.header-icon[b-qe22mck2yu] {
    width: 80px;
    height: 80px;
    background: var(--gradient-primary);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.5rem;
    box-shadow: var(--shadow-xl), var(--glow-primary);
    animation: iconPulse-b-qe22mck2yu 3s ease-in-out infinite;
}

@keyframes iconPulse-b-qe22mck2yu {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}



.header-description[b-qe22mck2yu] {
    margin: 0;
    color: var(--primary-600);
    font-size: 1rem;
    opacity: 0.85;
    font-weight: 500;
}

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

.btn-action[b-qe22mck2yu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

    .btn-action.primary[b-qe22mck2yu] {
        background: white;
        color: var(--primary-600);
        box-shadow: var(--shadow-md);
    }

        .btn-action.primary:hover:not(:disabled)[b-qe22mck2yu] {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
            border-color: var(--pastel-lavender-dark);
        }

    .btn-action.secondary[b-qe22mck2yu] {
        background: rgba(255, 255, 255, 0.8);
        color: var(--text-secondary);
        backdrop-filter: blur(10px);
    }

        .btn-action.secondary:hover:not(:disabled)[b-qe22mck2yu] {
            background: white;
            color: var(--primary-600);
            transform: translateY(-2px);
        }

    .btn-action:disabled[b-qe22mck2yu] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-action i[b-qe22mck2yu] {
        font-size: 1.125rem;
    }

/* Stats Grid */
.stats-grid[b-qe22mck2yu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
    position: relative;
    z-index: 10;
}

.stat-card[b-qe22mck2yu] {
    position: relative;
    padding: var(--spacing-6);
    border-radius: var(--radius-2xl);
    color: white;
    overflow: hidden;
    transition: var(--transition-base);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: slideUp-b-qe22mck2yu 0.5s ease-out backwards;
}

    .stat-card:nth-child(1)[b-qe22mck2yu] {
        animation-delay: 0.1s;
    }

    .stat-card:nth-child(2)[b-qe22mck2yu] {
        animation-delay: 0.15s;
    }

    .stat-card:nth-child(3)[b-qe22mck2yu] {
        animation-delay: 0.2s;
    }

    .stat-card:nth-child(4)[b-qe22mck2yu] {
        animation-delay: 0.25s;
    }

    .stat-card:nth-child(5)[b-qe22mck2yu] {
        animation-delay: 0.3s;
    }

    .stat-card:nth-child(6)[b-qe22mck2yu] {
        animation-delay: 0.35s;
    }

@keyframes slideUp-b-qe22mck2yu {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-card:hover[b-qe22mck2yu] {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.stat-card.gradient-primary[b-qe22mck2yu] {
    background: var(--gradient-primary);
}

.stat-card.gradient-secondary[b-qe22mck2yu] {
    background: var(--gradient-secondary);
}

.stat-card.gradient-tertiary[b-qe22mck2yu] {
    background: var(--gradient-tertiary);
}

.stat-card.gradient-info[b-qe22mck2yu] {
    background: linear-gradient(135deg, #03A9F4 0%, #29B6F6 100%);
}

.stat-card.gradient-warning[b-qe22mck2yu] {
    background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
}

.stat-card.gradient-success[b-qe22mck2yu] {
    background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
}

.stat-card[b-qe22mck2yu]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    transform: rotate(45deg);
    transition: var(--transition-slow);
}

.stat-card:hover[b-qe22mck2yu]::before {
    transform: rotate(45deg) scale(1.5);
}

.stat-icon[b-qe22mck2yu] {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: var(--spacing-4);
    animation: iconFloat-b-qe22mck2yu 3s ease-in-out infinite;
}

@keyframes iconFloat-b-qe22mck2yu {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.stat-content[b-qe22mck2yu] {
    position: relative;
    z-index: 1;
}

.stat-value[b-qe22mck2yu] {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--spacing-2);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-label[b-qe22mck2yu] {
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-3);
}

.stat-trend[b-qe22mck2yu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.875rem;
    opacity: 0.9;
}

    .stat-trend i[b-qe22mck2yu] {
        font-size: 1rem;
    }

    .stat-trend.positive i[b-qe22mck2yu] {
        color: #A7F3D0;
    }

    .stat-trend.warning i[b-qe22mck2yu] {
        color: #FFE0B2;
    }

/* Search and Filter Section */
.search-filter-section[b-qe22mck2yu] {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-6);
    position: relative;
    z-index: 10;
    display: flex;
    gap: var(--spacing-6);
    align-items: center;
}

.search-container[b-qe22mck2yu] {
    flex: 1;
    position: relative;
}

    .search-container i[b-qe22mck2yu] {
        position: absolute;
        left: var(--spacing-4);
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-tertiary);
        pointer-events: none;
        transition: var(--transition-fast);
    }

.search-input[b-qe22mck2yu] {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-10);
    background: var(--bg-secondary);
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    transition: var(--transition-base);
    color: var(--text-primary);
}

    .search-input:focus[b-qe22mck2yu] {
        outline: none;
        border-color: var(--primary-300);
        background: white;
        box-shadow: 0 0 0 4px var(--pastel-lavender-light);
        transform: translateY(-1px);
    }

        .search-input:focus ~ i[b-qe22mck2yu] {
            color: var(--primary-500);
            transform: translateY(-50%) scale(1.1);
        }

.search-clear[b-qe22mck2yu] {
    position: absolute;
    right: var(--spacing-3);
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: var(--text-tertiary);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 0.875rem;
}

    .search-clear:hover[b-qe22mck2yu] {
        background: var(--text-secondary);
        transform: translateY(-50%) scale(1.1);
    }

.filter-controls[b-qe22mck2yu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.filter-group[b-qe22mck2yu] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

    .filter-group label[b-qe22mck2yu] {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

.filter-select[b-qe22mck2yu] {
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--bg-secondary);
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-base);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23718096' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-3) center;
    padding-right: var(--spacing-10);
}

    .filter-select:focus[b-qe22mck2yu] {
        outline: none;
        border-color: var(--primary-300);
        box-shadow: 0 0 0 3px var(--pastel-lavender);
    }

.view-toggle[b-qe22mck2yu] {
    display: flex;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-1);
    gap: var(--spacing-1);
}

.view-btn[b-qe22mck2yu] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: var(--transition-fast);
}

    .view-btn:hover[b-qe22mck2yu] {
        color: var(--text-secondary);
    }

    .view-btn.active[b-qe22mck2yu] {
        background: white;
        color: var(--primary-600);
        box-shadow: var(--shadow-sm);
    }

/* Service Desks Grid */
.servicedesks-grid[b-qe22mck2yu] {
    display: grid;
    gap: var(--spacing-6);
    position: relative;
    z-index: 10;
}

    .servicedesks-grid.grid[b-qe22mck2yu] {
        grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
    }

    .servicedesks-grid.list[b-qe22mck2yu] {
        grid-template-columns: 1fr;
    }

/* Service Desk Card */
.servicedesk-card[b-qe22mck2yu] {
    background: white;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    position: relative;
    border: 2px solid var(--border-secondary);
}

    .servicedesk-card[b-qe22mck2yu]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gradient-primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .servicedesk-card:hover[b-qe22mck2yu] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        border-color: var(--pastel-lavender);
    }

        .servicedesk-card:hover[b-qe22mck2yu]::before {
            transform: scaleX(1);
        }

    .servicedesk-card.expanded[b-qe22mck2yu] {
        border-color: var(--primary-300);
        box-shadow: 0 0 0 3px var(--pastel-lavender), var(--shadow-xl);
    }

.card-header[b-qe22mck2yu] {
    padding: var(--spacing-6);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    cursor: pointer;
    background: var(--bg-secondary);
    transition: var(--transition-base);
}

    .card-header:hover[b-qe22mck2yu] {
        background: var(--pastel-lavender-light);
    }

.desk-icon-wrapper[b-qe22mck2yu] {
    position: relative;
}

.desk-icon[b-qe22mck2yu] {
    width: 64px;
    height: 64px;
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
}

.servicedesk-card:hover .desk-icon[b-qe22mck2yu] {
    transform: rotate(-5deg) scale(1.1);
    box-shadow: var(--shadow-lg), var(--glow-primary);
}

.portal-badge[b-qe22mck2yu] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border: 2px solid white;
    box-shadow: var(--shadow-sm);
}

    .portal-badge.public[b-qe22mck2yu] {
        background: var(--success-500);
        color: white;
    }

    .portal-badge.private[b-qe22mck2yu] {
        background: var(--warning-500);
        color: white;
    }

.desk-info[b-qe22mck2yu] {
    flex: 1;
}

    .desk-info h3[b-qe22mck2yu] {
        margin: 0 0 var(--spacing-2) 0;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
    }

.desk-meta[b-qe22mck2yu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

.meta-item[b-qe22mck2yu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.875rem;
    color: var(--text-tertiary);
}

    .meta-item i[b-qe22mck2yu] {
        font-size: 0.875rem;
        color: var(--primary-400);
    }

.expand-toggle[b-qe22mck2yu] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pastel-lavender-light);
    border: none;
    border-radius: var(--radius-lg);
    color: var(--primary-600);
    font-size: 1.125rem;
    cursor: pointer;
    transition: var(--transition-base);
}

    .expand-toggle:hover[b-qe22mck2yu] {
        background: var(--pastel-lavender);
        transform: scale(1.1);
    }

.card-stats[b-qe22mck2yu] {
    padding: var(--spacing-5) var(--spacing-6);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-4);
    background: white;
    border-bottom: 1px solid var(--border-secondary);
}

.servicedesks-grid.list .card-stats[b-qe22mck2yu] {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.stat-item[b-qe22mck2yu] {
    text-align: center;
    padding: var(--spacing-3);
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
    transition: var(--transition-fast);
    cursor: pointer;
}

    .stat-item:hover[b-qe22mck2yu] {
        background: var(--pastel-lavender-light);
        transform: translateY(-2px);
    }

.stat-number[b-qe22mck2yu] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-600);
    margin-bottom: var(--spacing-1);
}

.stat-label[b-qe22mck2yu] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Expanded Content */
.card-expanded-content[b-qe22mck2yu] {
    animation: expandContent-b-qe22mck2yu 0.3s ease-out;
    border-top: 1px solid var(--border-secondary);
}

@keyframes expandContent-b-qe22mck2yu {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.portal-info-section[b-qe22mck2yu],
.recent-activity-section[b-qe22mck2yu] {
    padding: var(--spacing-6);
}

    .portal-info-section h4[b-qe22mck2yu],
    .recent-activity-section h4[b-qe22mck2yu] {
        margin: 0 0 var(--spacing-4) 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

        .portal-info-section h4 i[b-qe22mck2yu],
        .recent-activity-section h4 i[b-qe22mck2yu] {
            color: var(--primary-400);
        }

.portal-details[b-qe22mck2yu] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.detail-item[b-qe22mck2yu] {
    display: flex;
    gap: var(--spacing-3);
    font-size: 0.875rem;
}

.detail-label[b-qe22mck2yu] {
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 120px;
}

.detail-value[b-qe22mck2yu] {
    color: var(--text-primary);
}

.announcement-banner[b-qe22mck2yu] {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

    .announcement-banner.info[b-qe22mck2yu] {
        background: var(--info-100);
        color: var(--info-800);
        border: 1px solid var(--info-200);
    }

    .announcement-banner.warning[b-qe22mck2yu] {
        background: var(--warning-100);
        color: var(--warning-800);
        border: 1px solid var(--warning-200);
    }

/* Activity Timeline */
.activity-timeline[b-qe22mck2yu] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.activity-item[b-qe22mck2yu] {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    transition: var(--transition-fast);
}

    .activity-item:hover[b-qe22mck2yu] {
        background: var(--pastel-lavender-light);
        transform: translateX(4px);
    }

.activity-icon[b-qe22mck2yu] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

    .activity-icon.organization[b-qe22mck2yu] {
        background: var(--pastel-mint-light);
        color: var(--accent-mint);
    }

    .activity-icon.customer[b-qe22mck2yu] {
        background: var(--pastel-pink-light);
        color: var(--secondary-500);
    }

    .activity-icon.request[b-qe22mck2yu] {
        background: var(--pastel-peach-light);
        color: var(--accent-yellow-dark);
    }

.activity-content p[b-qe22mck2yu] {
    margin: 0 0 var(--spacing-1) 0;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.activity-time[b-qe22mck2yu] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* Quick Actions */
.quick-actions-section[b-qe22mck2yu] {
    padding: var(--spacing-5) var(--spacing-6);
    background: var(--bg-tertiary);
    display: flex;
    gap: var(--spacing-3);
}

.quick-action[b-qe22mck2yu] {
    flex: 1;
    padding: var(--spacing-3);
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}

    .quick-action:hover[b-qe22mck2yu] {
        background: var(--pastel-lavender-light);
        border-color: var(--pastel-lavender);
        color: var(--primary-600);
        transform: translateY(-2px);
    }

/* Card Actions */
.card-actions[b-qe22mck2yu] {
    padding: var(--spacing-5) var(--spacing-6);
    background: var(--bg-tertiary);
    display: flex;
    justify-content: flex-end;
}

.action-btn[b-qe22mck2yu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-xl);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--shadow-md);
}

    .action-btn:hover[b-qe22mck2yu] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg), var(--glow-primary);
    }

/* Pagination */
.pagination-container[b-qe22mck2yu] {
    margin-top: var(--spacing-8);
    padding: var(--spacing-6);
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 10;
}

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

.pagination-controls[b-qe22mck2yu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.page-btn[b-qe22mck2yu] {
    min-width: 40px;
    height: 40px;
    padding: 0 var(--spacing-3);
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .page-btn:hover:not(:disabled)[b-qe22mck2yu] {
        background: var(--pastel-lavender-light);
        border-color: var(--pastel-lavender);
        transform: translateY(-2px);
    }

    .page-btn.active[b-qe22mck2yu] {
        background: var(--gradient-primary);
        color: white;
        border-color: transparent;
    }

    .page-btn:disabled[b-qe22mck2yu] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.page-ellipsis[b-qe22mck2yu] {
    padding: 0 var(--spacing-2);
    color: var(--text-tertiary);
}

/* Loading State */
.loading-container[b-qe22mck2yu] {
    padding: var(--spacing-12);
    text-align: center;
}

.loading-animation[b-qe22mck2yu] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
}

.loading-spinner[b-qe22mck2yu] {
    width: 64px;
    height: 64px;
    border: 4px solid var(--pastel-lavender);
    border-top-color: var(--primary-500);
    border-radius: 50%;
    animation: spin-b-qe22mck2yu 1s linear infinite;
}

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

.loading-animation p[b-qe22mck2yu] {
    margin: 0;
    font-size: 1rem;
    color: var(--text-secondary);
}

/* Empty State */
.empty-state[b-qe22mck2yu] {
    padding: var(--spacing-12);
    text-align: center;
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 10;
}

.empty-illustration[b-qe22mck2yu] {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--spacing-6);
    background: var(--pastel-lavender-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--primary-400);
    animation: emptyFloat-b-qe22mck2yu 3s ease-in-out infinite;
}

@keyframes emptyFloat-b-qe22mck2yu {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.empty-state h3[b-qe22mck2yu] {
    margin: 0 0 var(--spacing-3) 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.empty-state p[b-qe22mck2yu] {
    margin: 0 0 var(--spacing-6) 0;
    color: var(--text-secondary);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.btn-primary[b-qe22mck2yu] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-xl);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--shadow-md);
}

    .btn-primary:hover[b-qe22mck2yu] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg), var(--glow-primary);
    }

/* Responsive Design */
@media (max-width: 1400px) {
    .servicedesks-grid.grid[b-qe22mck2yu] {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }
}

@media (max-width: 1200px) {
    .stats-grid[b-qe22mck2yu] {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

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

@media (max-width: 768px) {
    .header-content[b-qe22mck2yu] {
        flex-direction: column;
        gap: var(--spacing-4);
        text-align: center;
    }

    .header-left[b-qe22mck2yu] {
        flex-direction: column;
    }

    .header-actions[b-qe22mck2yu] {
        width: 100%;
        justify-content: center;
    }

    .search-filter-section[b-qe22mck2yu] {
        flex-direction: column;
        gap: var(--spacing-4);
    }

    .filter-controls[b-qe22mck2yu] {
        width: 100%;
        justify-content: space-between;
    }

    .servicedesks-grid.grid[b-qe22mck2yu] {
        grid-template-columns: 1fr;
    }

    .card-stats[b-qe22mck2yu] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-2);
    }

    .pagination-container[b-qe22mck2yu] {
        flex-direction: column;
        gap: var(--spacing-4);
        text-align: center;
    }

    .quick-actions-section[b-qe22mck2yu] {
        flex-direction: column;
    }
}

/* Dark Mode Adjustments */
[data-theme="dark"] .servicedesks-container[b-qe22mck2yu]::before {
    opacity: 0.2;
}

[data-theme="dark"] .page-header[b-qe22mck2yu] {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-quaternary) 100%);
}

[data-theme="dark"] .servicedesk-card[b-qe22mck2yu] {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .card-header[b-qe22mck2yu] {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .search-filter-section[b-qe22mck2yu],
[data-theme="dark"] .pagination-container[b-qe22mck2yu],
[data-theme="dark"] .empty-state[b-qe22mck2yu] {
    background: var(--bg-secondary);
}

[data-theme="dark"] .stat-item[b-qe22mck2yu],
[data-theme="dark"] .activity-item[b-qe22mck2yu] {
    background: var(--bg-quaternary);
}

[data-theme="dark"] .quick-action[b-qe22mck2yu] {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
}

/* Animations */
@keyframes fadeIn-b-qe22mck2yu {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float-b-qe22mck2yu {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(30px, -30px) rotate(120deg);
    }

    66% {
        transform: translate(-20px, 20px) rotate(240deg);
    }
}

/* Page Header */
.page-header[b-qe22mck2yu] {
    background: linear-gradient(135deg, #03A9F4 0%, #00BCD4 50%, #00ACC1 100%);
    padding: var(--spacing-8) 0;
    margin: calc(var(--spacing-8) * -1) calc(var(--spacing-8) * -1) var(--spacing-8);
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(3, 169, 244, 0.25);
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
}

    .page-header[b-qe22mck2yu]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -10%;
        width: 150%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
        animation: rotateGlow-b-qe22mck2yu 20s linear infinite;
    }

    .page-header[b-qe22mck2yu]::after {
        content: '';
        position: absolute;
        bottom: -50%;
        right: -10%;
        width: 120%;
        height: 150%;
        background: radial-gradient(circle, rgba(0, 188, 212, 0.2) 0%, transparent 60%);
        animation: rotateGlowReverse-b-qe22mck2yu 25s linear infinite;
    }

@keyframes rotateGlow-b-qe22mck2yu {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateGlowReverse-b-qe22mck2yu {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.header-content[b-qe22mck2yu] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.header-main[b-qe22mck2yu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
}

.header-icon[b-qe22mck2yu] {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--info-600);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), inset 0 2px 8px rgba(255, 255, 255, 0.5);
    animation: iconFloat-b-qe22mck2yu 3s ease-in-out infinite;
}

@keyframes iconFloat-b-qe22mck2yu {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

.page-header .header-info h1[b-qe22mck2yu] {
    margin: 0 0 var(--spacing-2) 0;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-on-primary);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.02em;
}

.page-header .lead[b-qe22mck2yu] {
    margin: 0;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Header Stats */
.page-header .header-stats[b-qe22mck2yu] {
    display: flex;
    gap: var(--spacing-4);
}

.page-header .stat-badge[b-qe22mck2yu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-5);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: var(--transition-base);
}

    .page-header .stat-badge:hover[b-qe22mck2yu] {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .page-header .stat-badge.success[b-qe22mck2yu] {
        border-color: rgba(102, 187, 106, 0.5);
    }

    .page-header .stat-badge.warning[b-qe22mck2yu] {
        border-color: rgba(255, 152, 0, 0.5);
    }

    .page-header .stat-badge.info[b-qe22mck2yu] {
        border-color: rgba(3, 169, 244, 0.5);
    }

    .page-header .stat-badge i[b-qe22mck2yu] {
        font-size: 1.5rem;
        color: var(--text-on-primary);
    }

.page-header .stat-content[b-qe22mck2yu] {
    text-align: left;
}

.page-header .stat-value[b-qe22mck2yu] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-on-primary);
    line-height: 1;
}

.page-header .stat-label[b-qe22mck2yu] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Header Actions Bar */
 .header-actions-bar[b-qe22mck2yu] {
    background: white;
    padding: var(--spacing-4) 0;
    margin-bottom: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 10;
}

.actions-content[b-qe22mck2yu] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-8);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    justify-content: flex-end;
}

.btn-action[b-qe22mck2yu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-5);
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn-action.primary[b-qe22mck2yu] {
        background: var(--gradient-primary);
        color: white;
        box-shadow: var(--shadow-md);
    }

        .btn-action.primary:hover:not(:disabled)[b-qe22mck2yu] {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg), var(--glow-primary);
        }

    .btn-action.secondary[b-qe22mck2yu] {
        background: white;
        color: var(--primary-600);
        border-color: var(--border-secondary);
    }

       .btn-action.secondary:hover:not(:disabled)[b-qe22mck2yu] {
            background: var(--pastel-lavender-light);
            border-color: var(--pastel-lavender);
            transform: translateY(-2px);
        }

    .btn-action:disabled[b-qe22mck2yu] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-action i[b-qe22mck2yu] {
        font-size: 1.125rem;
    }
/* _content/PKFAPI/Components/Pages/Settings.razor.rz.scp.css */
/* Settings Container */
.settings-container[b-m98ai1oeoi] {
    min-height: 100vh;
    position: relative;
    background: var(--bg-primary);
    overflow-x: visible;
}

/* Background Shapes Animation */
.background-shapes[b-m98ai1oeoi] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.shape[b-m98ai1oeoi] {
    position: absolute;
    border-radius: 50%;
    background: var(--gradient-soft);
    opacity: 0.1;
    animation: floatShape-b-m98ai1oeoi 30s ease-in-out infinite;
}

.shape-1[b-m98ai1oeoi] {
    width: 600px;
    height: 600px;
    top: -300px;
    right: -200px;
    background: var(--gradient-primary);
    animation-duration: 35s;
}

.shape-2[b-m98ai1oeoi] {
    width: 400px;
    height: 400px;
    bottom: -200px;
    left: -100px;
    background: var(--gradient-secondary);
    animation-duration: 40s;
    animation-delay: 5s;
}

.shape-3[b-m98ai1oeoi] {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--gradient-tertiary);
    animation-duration: 45s;
    animation-delay: 10s;
}

@keyframes floatShape-b-m98ai1oeoi {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    25% {
        transform: translate(50px, -30px) rotate(90deg) scale(1.1);
    }

    50% {
        transform: translate(-30px, 50px) rotate(180deg) scale(0.9);
    }

    75% {
        transform: translate(-50px, -20px) rotate(270deg) scale(1.05);
    }
}

/* Settings Header */
.settings-header[b-m98ai1oeoi] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    padding: var(--spacing-8) 0;
    margin: calc(var(--spacing-8) * -1) calc(var(--spacing-8) * -1) var(--spacing-8);
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.25);
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
}

    .settings-header[b-m98ai1oeoi]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -10%;
        width: 150%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
        animation: rotateGlow-b-m98ai1oeoi 20s linear infinite;
    }

    .settings-header[b-m98ai1oeoi]::after {
        content: '';
        position: absolute;
        bottom: -50%;
        right: -10%;
        width: 120%;
        height: 150%;
        background: radial-gradient(circle, rgba(240, 147, 251, 0.2) 0%, transparent 60%);
        animation: rotateGlowReverse-b-m98ai1oeoi 25s linear infinite;
    }

@keyframes rotateGlow-b-m98ai1oeoi {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateGlowReverse-b-m98ai1oeoi {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.header-content[b-m98ai1oeoi] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-8);
    position: relative;
    z-index: 1;
}

.header-main[b-m98ai1oeoi] {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.header-icon[b-m98ai1oeoi] {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--primary-600);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), inset 0 2px 8px rgba(255, 255, 255, 0.5);
    animation: iconFloat-b-m98ai1oeoi 3s ease-in-out infinite;
}

@keyframes iconFloat-b-m98ai1oeoi {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

.header-info h1[b-m98ai1oeoi] {
    margin: 0 0 var(--spacing-2) 0;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-on-primary);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.02em;
}

.lead[b-m98ai1oeoi] {
    margin: 0;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Header Stats */
.header-stats[b-m98ai1oeoi] {
    display: flex;
    gap: var(--spacing-4);
}

.stat-badge[b-m98ai1oeoi] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-5);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: var(--transition-base);
}

    .stat-badge:hover[b-m98ai1oeoi] {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .stat-badge.success[b-m98ai1oeoi] {
        border-color: rgba(102, 187, 106, 0.5);
    }

    .stat-badge.warning[b-m98ai1oeoi] {
        border-color: rgba(255, 152, 0, 0.5);
    }

    .stat-badge.info[b-m98ai1oeoi] {
        border-color: rgba(3, 169, 244, 0.5);
    }

    .stat-badge i[b-m98ai1oeoi] {
        font-size: 1.5rem;
        color: var(--text-on-primary);
    }

.stat-content[b-m98ai1oeoi] {
    text-align: left;
}

.stat-value[b-m98ai1oeoi] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-on-primary);
    line-height: 1;
}

.stat-label[b-m98ai1oeoi] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Notifications */
.notification-container[b-m98ai1oeoi] {
    position: fixed;
    top: var(--spacing-6);
    right: var(--spacing-6);
    z-index: var(--z-notification);
    max-width: 400px;
}

.notification[b-m98ai1oeoi] {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-3);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    box-shadow: var(--shadow-2xl);
    position: relative;
    border-left: 4px solid;
    animation: slideIn-b-m98ai1oeoi 0.3s ease-out;
}

@keyframes slideIn-b-m98ai1oeoi {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.notification.success[b-m98ai1oeoi] {
    border-left-color: var(--success-500);
}

.notification.error[b-m98ai1oeoi] {
    border-left-color: var(--danger-500);
}

.notification-icon[b-m98ai1oeoi] {
    font-size: 1.5rem;
}

.notification.success .notification-icon[b-m98ai1oeoi] {
    color: var(--success-500);
}

.notification.error .notification-icon[b-m98ai1oeoi] {
    color: var(--danger-500);
}

.notification-content[b-m98ai1oeoi] {
    flex: 1;
}

    .notification-content h5[b-m98ai1oeoi] {
        margin: 0 0 var(--spacing-1) 0;
        font-weight: 600;
        color: var(--text-primary);
    }

    .notification-content p[b-m98ai1oeoi] {
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.875rem;
    }

.notification-close[b-m98ai1oeoi] {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: var(--transition-fast);
}

    .notification-close:hover[b-m98ai1oeoi] {
        color: var(--text-primary);
    }

/* Settings Content */
.settings-content[b-m98ai1oeoi] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-8);
    position: relative;
    z-index: 10;
}

.settings-grid[b-m98ai1oeoi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-6);
}

/* Settings Cards */
.settings-card[b-m98ai1oeoi] {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--spacing-8);
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
    transition: var(--transition-base);
}

    .settings-card:hover[b-m98ai1oeoi] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-2xl);
    }

.credentials-card[b-m98ai1oeoi] {
    grid-column: 1 / 2;
}

.help-card[b-m98ai1oeoi] {
    grid-column: 2 / 3;
}

.future-card[b-m98ai1oeoi] {
    grid-column: 1 / -1;
}

/* Card Header */
.card-header[b-m98ai1oeoi] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.card-icon[b-m98ai1oeoi] {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--text-on-primary);
    box-shadow: var(--shadow-lg);
    animation: iconFloat-b-m98ai1oeoi 3s ease-in-out infinite;
}

    .card-icon.gradient-info[b-m98ai1oeoi] {
        background: var(--gradient-info);
    }

    .card-icon.gradient-secondary[b-m98ai1oeoi] {
        background: var(--gradient-secondary);
    }

.card-title h2[b-m98ai1oeoi] {
    margin: 0 0 var(--spacing-1) 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.card-title p[b-m98ai1oeoi] {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

/* Config Display */
.config-display[b-m98ai1oeoi] {
    animation: fadeIn-b-m98ai1oeoi 0.3s ease-out;
}

.config-info-grid[b-m98ai1oeoi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.config-item[b-m98ai1oeoi] {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    transition: var(--transition-fast);
}

    .config-item:hover[b-m98ai1oeoi] {
        background: var(--pastel-lavender-light);
        transform: translateX(4px);
    }

.config-label[b-m98ai1oeoi] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
    font-size: 0.875rem;
    color: var(--text-tertiary);
    font-weight: 600;
}

    .config-label i[b-m98ai1oeoi] {
        color: var(--primary-500);
    }

.config-value[b-m98ai1oeoi] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Test Status Card */
.test-status-card[b-m98ai1oeoi] {
    background: var(--bg-tertiary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    margin-bottom: var(--spacing-5);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    border: 2px solid var(--border-secondary);
    transition: var(--transition-base);
}

    .test-status-card.success[b-m98ai1oeoi] {
        border-color: var(--success-300);
        background: var(--success-50);
    }

    .test-status-card.error[b-m98ai1oeoi] {
        border-color: var(--danger-300);
        background: var(--danger-50);
    }

.test-icon[b-m98ai1oeoi] {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.test-status-card.success .test-icon[b-m98ai1oeoi] {
    background: var(--success-100);
    color: var(--success-600);
}

.test-status-card.error .test-icon[b-m98ai1oeoi] {
    background: var(--danger-100);
    color: var(--danger-600);
}

.test-content h4[b-m98ai1oeoi] {
    margin: 0 0 var(--spacing-1) 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.test-status-card.success .test-content h4[b-m98ai1oeoi] {
    color: var(--success-700);
}

.test-status-card.error .test-content h4[b-m98ai1oeoi] {
    color: var(--danger-700);
}

.test-content p[b-m98ai1oeoi] {
    margin: 0;
    font-size: 0.875rem;
}

.test-status-card.success .test-content p[b-m98ai1oeoi] {
    color: var(--success-600);
}

.test-status-card.error .test-content p[b-m98ai1oeoi] {
    color: var(--danger-600);
}

/* Form Styling */
.validation-summary[b-m98ai1oeoi] {
    background: var(--danger-50);
    border: 2px solid var(--danger-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-5);
    color: var(--danger-700);
}

.form-section[b-m98ai1oeoi] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.form-group[b-m98ai1oeoi] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.form-label[b-m98ai1oeoi] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9375rem;
}

    .form-label i[b-m98ai1oeoi] {
        color: var(--primary-500);
    }

.input-wrapper[b-m98ai1oeoi] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.form-input[b-m98ai1oeoi] {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    color: var(--text-primary);
    transition: var(--transition-base);
}

    .form-input:focus[b-m98ai1oeoi] {
        outline: none;
        border-color: var(--primary-400);
        box-shadow: 0 0 0 3px var(--pastel-lavender);
    }

.input-hint[b-m98ai1oeoi] {
    font-size: 0.875rem;
    color: var(--text-tertiary);
}

.link-primary[b-m98ai1oeoi] {
    color: var(--primary-600);
    text-decoration: none;
    transition: var(--transition-fast);
}

    .link-primary:hover[b-m98ai1oeoi] {
        color: var(--primary-700);
        text-decoration: underline;
    }

    .link-primary i[b-m98ai1oeoi] {
        font-size: 0.75rem;
        margin-left: var(--spacing-1);
    }

.form-actions[b-m98ai1oeoi] {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-4);
}

/* Action Section */
.action-section[b-m98ai1oeoi] {
    display: flex;
    gap: var(--spacing-3);
    margin-top: var(--spacing-6);
    flex-wrap: wrap;
}

/* Buttons */
.btn-primary[b-m98ai1oeoi],
.btn-secondary[b-m98ai1oeoi],
.btn-danger[b-m98ai1oeoi] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    border-radius: var(--radius-xl);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    border: none;
    font-size: 0.9375rem;
}

.btn-primary[b-m98ai1oeoi] {
    background: var(--gradient-primary);
    color: var(--text-on-primary);
    box-shadow: var(--shadow-md);
}

    .btn-primary:hover:not(:disabled)[b-m98ai1oeoi] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg), var(--glow-primary);
    }

.btn-secondary[b-m98ai1oeoi] {
    background: white;
    color: var(--text-primary);
    border: 2px solid var(--border-secondary);
}

    .btn-secondary:hover[b-m98ai1oeoi] {
        background: var(--bg-tertiary);
        border-color: var(--border-tertiary);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.btn-danger[b-m98ai1oeoi] {
    background: var(--gradient-danger);
    color: var(--text-on-primary);
    box-shadow: var(--shadow-md);
}

    .btn-danger:hover[b-m98ai1oeoi] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg), var(--glow-danger);
    }

    .btn-primary:disabled[b-m98ai1oeoi],
    .btn-secondary:disabled[b-m98ai1oeoi],
    .btn-danger:disabled[b-m98ai1oeoi] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* Help Card Content */
.help-content[b-m98ai1oeoi] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.help-section h3[b-m98ai1oeoi] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0 0 var(--spacing-4) 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

    .help-section h3 i[b-m98ai1oeoi] {
        color: var(--primary-500);
    }

.help-steps[b-m98ai1oeoi] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

    .help-steps li[b-m98ai1oeoi] {
        display: flex;
        gap: var(--spacing-3);
        align-items: flex-start;
    }

.step-icon[b-m98ai1oeoi] {
    width: 36px;
    height: 36px;
    background: var(--gradient-primary);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
}

.step-content[b-m98ai1oeoi] {
    flex: 1;
}

    .step-content strong[b-m98ai1oeoi] {
        display: block;
        color: var(--text-primary);
        margin-bottom: var(--spacing-1);
    }

    .step-content p[b-m98ai1oeoi] {
        margin: 0;
        font-size: 0.875rem;
        color: var(--text-secondary);
    }

/* Security Notice */
.security-notice[b-m98ai1oeoi] {
    background: var(--pastel-mint-light);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    display: flex;
    gap: var(--spacing-4);
    border: 2px solid var(--pastel-mint);
}

.notice-icon[b-m98ai1oeoi] {
    width: 48px;
    height: 48px;
    background: var(--accent-mint);
    color: white;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.notice-content h4[b-m98ai1oeoi] {
    margin: 0 0 var(--spacing-2) 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.notice-content p[b-m98ai1oeoi] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Help Links */
.help-links h4[b-m98ai1oeoi] {
    margin: 0 0 var(--spacing-3) 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.link-grid[b-m98ai1oeoi] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-3);
}

.help-link[b-m98ai1oeoi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text-primary);
    transition: var(--transition-base);
    text-align: center;
    border: 2px solid transparent;
}

    .help-link:hover[b-m98ai1oeoi] {
        background: var(--pastel-lavender-light);
        border-color: var(--pastel-lavender);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .help-link i[b-m98ai1oeoi] {
        font-size: 1.5rem;
        color: var(--primary-500);
    }

    .help-link span[b-m98ai1oeoi] {
        font-size: 0.875rem;
        font-weight: 500;
    }

/* Coming Soon Content */
.coming-soon-content[b-m98ai1oeoi] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.feature-item[b-m98ai1oeoi] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    transition: var(--transition-fast);
}

    .feature-item:hover[b-m98ai1oeoi] {
        background: var(--pastel-lavender-light);
        transform: translateX(4px);
    }

    .feature-item i[b-m98ai1oeoi] {
        width: 48px;
        height: 48px;
        background: var(--gradient-secondary);
        color: white;
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        flex-shrink: 0;
    }

.feature-info h4[b-m98ai1oeoi] {
    margin: 0 0 var(--spacing-1) 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.feature-info p[b-m98ai1oeoi] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Animations */
.animate-in[b-m98ai1oeoi] {
    animation: fadeInUp-b-m98ai1oeoi 0.5s ease-out;
}

@keyframes fadeInUp-b-m98ai1oeoi {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in[b-m98ai1oeoi] {
    animation: fadeIn-b-m98ai1oeoi 0.3s ease-out;
}

@keyframes fadeIn-b-m98ai1oeoi {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .settings-grid[b-m98ai1oeoi] {
        grid-template-columns: 1fr;
    }

    .credentials-card[b-m98ai1oeoi],
    .help-card[b-m98ai1oeoi] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .settings-header[b-m98ai1oeoi] {
        padding: var(--spacing-6) 0;
    }

    .header-main[b-m98ai1oeoi] {
        flex-direction: column;
        text-align: center;
    }

    .header-icon[b-m98ai1oeoi] {
        width: 80px;
        height: 80px;
        font-size: 2.5rem;
    }

    .header-info h1[b-m98ai1oeoi] {
        font-size: 2rem;
    }

    .header-stats[b-m98ai1oeoi] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .notification-container[b-m98ai1oeoi] {
        left: var(--spacing-4);
        right: var(--spacing-4);
        max-width: none;
    }

    .settings-content[b-m98ai1oeoi] {
        padding: 0 var(--spacing-4);
    }

    .settings-card[b-m98ai1oeoi] {
        padding: var(--spacing-5);
    }

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

    .link-grid[b-m98ai1oeoi] {
        grid-template-columns: 1fr;
    }

    .action-section[b-m98ai1oeoi] {
        flex-direction: column;
    }

        .action-section button[b-m98ai1oeoi] {
            width: 100%;
        }
}

/* Dark Mode Adjustments */
[data-theme="dark"] .settings-card[b-m98ai1oeoi] {
    background: var(--bg-secondary);
}

[data-theme="dark"] .config-item[b-m98ai1oeoi] {
    background: var(--bg-quaternary);
}

    [data-theme="dark"] .config-item:hover[b-m98ai1oeoi] {
        background: rgba(232, 227, 245, 0.1);
    }

[data-theme="dark"] .test-status-card[b-m98ai1oeoi] {
    background: var(--bg-quaternary);
}

[data-theme="dark"] .form-input[b-m98ai1oeoi] {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .help-link[b-m98ai1oeoi] {
    background: var(--bg-quaternary);
}

[data-theme="dark"] .feature-item[b-m98ai1oeoi] {
    background: var(--bg-quaternary);
}

[data-theme="dark"] .security-notice[b-m98ai1oeoi] {
    background: rgba(227, 245, 241, 0.1);
    border-color: rgba(125, 211, 192, 0.3);
}

/* Print Styles */
@media print {
    .background-shapes[b-m98ai1oeoi],
    .notification-container[b-m98ai1oeoi] {
        display: none !important;
    }

    .settings-header[b-m98ai1oeoi] {
        background: none;
        color: black;
    }

    .settings-card[b-m98ai1oeoi] {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}
/* _content/PKFAPI/Components/Pages/Sync.razor.rz.scp.css */
/* Sync Container */
.sync-container[b-y03v8mkbct] {
    min-height: 100vh;
    position: relative;
    background: var(--bg-primary);
    overflow-x: visible;
}

/* Background Shapes Animation */
.background-shapes[b-y03v8mkbct] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.shape[b-y03v8mkbct] {
    position: absolute;
    border-radius: 50%;
    background: var(--gradient-soft);
    opacity: 0.1;
    animation: floatShape-b-y03v8mkbct 30s ease-in-out infinite;
}

.shape-1[b-y03v8mkbct] {
    width: 600px;
    height: 600px;
    top: -300px;
    right: -200px;
    background: var(--gradient-primary);
    animation-duration: 35s;
}

.shape-2[b-y03v8mkbct] {
    width: 400px;
    height: 400px;
    bottom: -200px;
    left: -100px;
    background: var(--gradient-secondary);
    animation-duration: 40s;
    animation-delay: 5s;
}

.shape-3[b-y03v8mkbct] {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--gradient-tertiary);
    animation-duration: 45s;
    animation-delay: 10s;
}

@keyframes floatShape-b-y03v8mkbct {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    25% {
        transform: translate(50px, -30px) rotate(90deg) scale(1.1);
    }

    50% {
        transform: translate(-30px, 50px) rotate(180deg) scale(0.9);
    }

    75% {
        transform: translate(-50px, -20px) rotate(270deg) scale(1.05);
    }
}

/* Sync Header */
.sync-header[b-y03v8mkbct] {
    background: linear-gradient(135deg, #8AB4F8 0%, #81C784 100%);
    padding: var(--spacing-8) 0;
    margin: calc(var(--spacing-8) * -1) calc(var(--spacing-8) * -1) var(--spacing-8);
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(138, 180, 248, 0.25);
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
}

    .sync-header[b-y03v8mkbct]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -10%;
        width: 150%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
        animation: rotateGlow-b-y03v8mkbct 20s linear infinite;
    }

    .sync-header[b-y03v8mkbct]::after {
        content: '';
        position: absolute;
        bottom: -50%;
        right: -10%;
        width: 120%;
        height: 150%;
        background: radial-gradient(circle, rgba(129, 199, 132, 0.2) 0%, transparent 60%);
        animation: rotateGlowReverse-b-y03v8mkbct 25s linear infinite;
    }

@keyframes rotateGlow-b-y03v8mkbct {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateGlowReverse-b-y03v8mkbct {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.header-content[b-y03v8mkbct] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-8);
    position: relative;
    z-index: 1;
}

.header-main[b-y03v8mkbct] {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.header-icon[b-y03v8mkbct] {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--accent-blue);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), inset 0 2px 8px rgba(255, 255, 255, 0.5);
    animation: iconFloat-b-y03v8mkbct 3s ease-in-out infinite;
}

@keyframes iconFloat-b-y03v8mkbct {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

.header-info h1[b-y03v8mkbct] {
    margin: 0 0 var(--spacing-2) 0;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-on-primary);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.02em;
}

.lead[b-y03v8mkbct] {
    margin: 0;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Header Stats */
.header-stats[b-y03v8mkbct] {
    display: flex;
    gap: var(--spacing-4);
}

.stat-badge[b-y03v8mkbct] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-5);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: var(--transition-base);
}

    .stat-badge:hover[b-y03v8mkbct] {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .stat-badge.success[b-y03v8mkbct] {
        border-color: rgba(102, 187, 106, 0.5);
    }

    .stat-badge.warning[b-y03v8mkbct] {
        border-color: rgba(255, 152, 0, 0.5);
    }

    .stat-badge.info[b-y03v8mkbct] {
        border-color: rgba(3, 169, 244, 0.5);
    }

    .stat-badge i[b-y03v8mkbct] {
        font-size: 1.5rem;
        color: var(--text-on-primary);
    }

.stat-content[b-y03v8mkbct] {
    text-align: left;
}

.stat-value[b-y03v8mkbct] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-on-primary);
    line-height: 1;
}

.stat-label[b-y03v8mkbct] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Notifications */
.notification-container[b-y03v8mkbct] {
    position: fixed;
    top: var(--spacing-6);
    right: var(--spacing-6);
    z-index: var(--z-notification);
    max-width: 400px;
}

.notification[b-y03v8mkbct] {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-3);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    box-shadow: var(--shadow-2xl);
    position: relative;
    border-left: 4px solid;
    animation: slideIn-b-y03v8mkbct 0.3s ease-out;
}

@keyframes slideIn-b-y03v8mkbct {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.notification.success[b-y03v8mkbct] {
    border-left-color: var(--success-500);
}

.notification.error[b-y03v8mkbct] {
    border-left-color: var(--danger-500);
}

.notification.warning[b-y03v8mkbct] {
    border-left-color: var(--warning-500);
}

.notification.info[b-y03v8mkbct] {
    border-left-color: var(--info-500);
}

.notification-icon[b-y03v8mkbct] {
    font-size: 1.5rem;
}

.notification.success .notification-icon[b-y03v8mkbct] {
    color: var(--success-500);
}

.notification.error .notification-icon[b-y03v8mkbct] {
    color: var(--danger-500);
}

.notification.warning .notification-icon[b-y03v8mkbct] {
    color: var(--warning-500);
}

.notification.info .notification-icon[b-y03v8mkbct] {
    color: var(--info-500);
}

.notification-content[b-y03v8mkbct] {
    flex: 1;
}

    .notification-content h5[b-y03v8mkbct] {
        margin: 0 0 var(--spacing-1) 0;
        font-weight: 600;
        color: var(--text-primary);
    }

    .notification-content p[b-y03v8mkbct] {
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.875rem;
    }

.notification-close[b-y03v8mkbct] {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: var(--transition-fast);
}

    .notification-close:hover[b-y03v8mkbct] {
        color: var(--text-primary);
    }

/* Section Headers */
.section-header[b-y03v8mkbct] {
    text-align: center;
    margin-bottom: var(--spacing-6);
}

    .section-header h2[b-y03v8mkbct] {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0 0 var(--spacing-2) 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-3);
    }

        .section-header h2 i[b-y03v8mkbct] {
            color: var(--primary-500);
        }

    .section-header p[b-y03v8mkbct] {
        margin: 0;
        color: var(--text-secondary);
        font-size: 1.125rem;
    }

/* Quick Actions */
.quick-actions-container[b-y03v8mkbct] {
    max-width: 1400px;
    margin: 0 auto var(--spacing-8);
    padding: 0 var(--spacing-8);
    position: relative;
    z-index: 10;
}

.quick-actions[b-y03v8mkbct] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-6);
}

.quick-action-card[b-y03v8mkbct] {
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--shadow-lg);
    border: 3px solid transparent;
    position: relative;
    overflow: hidden;
}

    .quick-action-card[b-y03v8mkbct]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gradient-soft);
        opacity: 0;
        transition: var(--transition-base);
    }

    .quick-action-card:hover[b-y03v8mkbct] {
        transform: translateY(-4px);
        box-shadow: var(--shadow-2xl);
    }

        .quick-action-card:hover[b-y03v8mkbct]::before {
            opacity: 0.05;
        }

    .quick-action-card.primary[b-y03v8mkbct] {
        border-color: var(--pastel-lavender);
    }

        .quick-action-card.primary:hover[b-y03v8mkbct] {
            border-color: var(--pastel-lavender-dark);
        }

    .quick-action-card.secondary[b-y03v8mkbct] {
        border-color: var(--pastel-mint);
    }

        .quick-action-card.secondary:hover[b-y03v8mkbct] {
            border-color: var(--pastel-mint-dark);
        }

    .quick-action-card.tertiary[b-y03v8mkbct] {
        border-color: var(--pastel-sky);
    }

        .quick-action-card.tertiary:hover[b-y03v8mkbct] {
            border-color: var(--pastel-sky-dark);
        }

.action-icon[b-y03v8mkbct] {
    width: 70px;
    height: 70px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.quick-action-card.primary .action-icon[b-y03v8mkbct] {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-md);
}

.quick-action-card.secondary .action-icon[b-y03v8mkbct] {
    background: var(--gradient-secondary);
    color: white;
    box-shadow: var(--shadow-md);
}

.quick-action-card.tertiary .action-icon[b-y03v8mkbct] {
    background: var(--gradient-info);
    color: white;
    box-shadow: var(--shadow-md);
}

.action-content[b-y03v8mkbct] {
    flex: 1;
    position: relative;
    z-index: 1;
}

    .action-content h3[b-y03v8mkbct] {
        margin: 0 0 var(--spacing-2) 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
    }

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

.action-arrow[b-y03v8mkbct] {
    font-size: 1.25rem;
    color: var(--text-tertiary);
    transition: var(--transition-base);
    position: relative;
    z-index: 1;
}

.quick-action-card:hover .action-arrow[b-y03v8mkbct] {
    transform: translateX(4px);
    color: var(--text-secondary);
}

.quick-action-card:disabled[b-y03v8mkbct] {
    opacity: 0.6;
    cursor: not-allowed;
}

    .quick-action-card:disabled:hover[b-y03v8mkbct] {
        transform: none;
    }

/* Sync Options Card */
.sync-options-card[b-y03v8mkbct] {
    max-width: 1400px;
    margin: 0 auto var(--spacing-8);
    padding: 0 var(--spacing-8);
    position: relative;
    z-index: 10;
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--spacing-8);
    box-shadow: var(--shadow-xl);
}

.card-header[b-y03v8mkbct] {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.card-icon[b-y03v8mkbct] {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    box-shadow: var(--shadow-lg);
}

.card-title h2[b-y03v8mkbct] {
    margin: 0 0 var(--spacing-1) 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.card-title p[b-y03v8mkbct] {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.options-grid[b-y03v8mkbct] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
}

.option-item[b-y03v8mkbct] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition-base);
    border: 2px solid transparent;
    position: relative;
}

    .option-item:hover[b-y03v8mkbct] {
        background: var(--pastel-lavender-light);
        border-color: var(--pastel-lavender);
        transform: translateX(4px);
    }

    .option-item input[type="checkbox"][b-y03v8mkbct] {
        position: absolute;
        opacity: 0;
    }

.option-checkbox[b-y03v8mkbct] {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-tertiary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition-fast);
    background: white;
}

.option-item input[type="checkbox"]:checked ~ .option-checkbox[b-y03v8mkbct] {
    background: var(--gradient-primary);
    border-color: transparent;
}

    .option-item input[type="checkbox"]:checked ~ .option-checkbox[b-y03v8mkbct]::after {
        content: '\f00c';
        font-family: 'Font Awesome 6 Pro';
        font-weight: 300;
        color: white;
        font-size: 0.875rem;
    }

.option-content[b-y03v8mkbct] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-weight: 500;
    color: var(--text-primary);
}

    .option-content i[b-y03v8mkbct] {
        font-size: 1.125rem;
        color: var(--primary-500);
    }

.request-days-config[b-y03v8mkbct] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: var(--pastel-sky-light);
    border-radius: var(--radius-lg);
    border: 2px solid var(--pastel-sky);
}

.config-label[b-y03v8mkbct] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-weight: 600;
    color: var(--text-primary);
}

    .config-label i[b-y03v8mkbct] {
        color: var(--accent-blue);
    }

.config-input[b-y03v8mkbct] {
    width: 100px;
    padding: var(--spacing-2) var(--spacing-3);
    background: white;
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    color: var(--text-primary);
    text-align: center;
    font-weight: 600;
}

    .config-input:focus[b-y03v8mkbct] {
        outline: none;
        border-color: var(--accent-blue);
        box-shadow: 0 0 0 3px var(--pastel-sky);
    }

/* Entity Status Section */
.entity-status-section[b-y03v8mkbct] {
    max-width: 1400px;
    margin: 0 auto var(--spacing-8);
    padding: 0 var(--spacing-8);
    position: relative;
    z-index: 10;
}

.entity-grid[b-y03v8mkbct] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-5);
}

.entity-card[b-y03v8mkbct] {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
    border: 2px solid var(--border-secondary);
    position: relative;
    overflow: hidden;
}

    .entity-card[b-y03v8mkbct]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: var(--gradient-primary);
        transform: scaleX(0);
        transition: var(--transition-base);
    }

    .entity-card:hover[b-y03v8mkbct] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .entity-card.syncing[b-y03v8mkbct] {
        border-color: var(--info-300);
        background: var(--info-50);
    }

        .entity-card.syncing[b-y03v8mkbct]::before {
            transform: scaleX(1);
            background: var(--gradient-info);
            animation: progressMove-b-y03v8mkbct 2s linear infinite;
        }

@keyframes progressMove-b-y03v8mkbct {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.entity-card.recently-synced[b-y03v8mkbct] {
    border-color: var(--success-300);
}

.entity-card.error[b-y03v8mkbct] {
    border-color: var(--danger-300);
    background: var(--danger-50);
}

.entity-header[b-y03v8mkbct] {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.entity-icon[b-y03v8mkbct] {
    width: 48px;
    height: 48px;
    background: var(--pastel-lavender);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-600);
}

.entity-card.syncing .entity-icon[b-y03v8mkbct] {
    background: var(--info-100);
    color: var(--info-600);
    animation: pulse-b-y03v8mkbct 1.5s ease-in-out infinite;
}

@keyframes pulse-b-y03v8mkbct {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.entity-header h3[b-y03v8mkbct] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.entity-stats[b-y03v8mkbct] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.stat-item[b-y03v8mkbct] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--border-primary);
}

    .stat-item:last-child[b-y03v8mkbct] {
        border-bottom: none;
    }

    .stat-item.highlight[b-y03v8mkbct] {
        background: var(--pastel-mint-light);
        padding: var(--spacing-2) var(--spacing-3);
        border-radius: var(--radius-md);
        border: none;
    }

.stat-label[b-y03v8mkbct] {
    font-size: 0.875rem;
    color: var(--text-tertiary);
}

.stat-value[b-y03v8mkbct] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.stat-item.highlight .stat-value[b-y03v8mkbct] {
    color: var(--accent-mint);
}

.entity-actions[b-y03v8mkbct] {
    display: flex;
    gap: var(--spacing-2);
}

.btn-entity-sync[b-y03v8mkbct],
.btn-entity-view[b-y03v8mkbct] {
    flex: 1;
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    border: none;
}

.btn-entity-sync[b-y03v8mkbct] {
    background: var(--gradient-primary);
    color: white;
}

    .btn-entity-sync:hover:not(:disabled)[b-y03v8mkbct] {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

.btn-entity-view[b-y03v8mkbct] {
    background: white;
    color: var(--primary-600);
    border: 2px solid var(--primary-200);
}

    .btn-entity-view:hover[b-y03v8mkbct] {
        background: var(--primary-50);
        border-color: var(--primary-300);
    }

    .btn-entity-sync:disabled[b-y03v8mkbct],
    .btn-entity-view:disabled[b-y03v8mkbct] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Sync Progress Card */
.sync-progress-card[b-y03v8mkbct] {
    max-width: 1000px;
    margin: 0 auto var(--spacing-8);
    padding: var(--spacing-8);
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    position: relative;
    z-index: 10;
}

.progress-header[b-y03v8mkbct] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

    .progress-header h3[b-y03v8mkbct] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

        .progress-header h3 i[b-y03v8mkbct] {
            color: var(--primary-500);
        }

.progress-percentage[b-y03v8mkbct] {
    font-size: 3rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.progress-track[b-y03v8mkbct] {
    height: 40px;
    background: var(--bg-quaternary);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-fill[b-y03v8mkbct] {
    height: 100%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.5s ease;
    position: relative;
}

.progress-glow[b-y03v8mkbct] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: progressShimmer-b-y03v8mkbct 2s ease-in-out infinite;
}

@keyframes progressShimmer-b-y03v8mkbct {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

.progress-details[b-y03v8mkbct] {
    margin-top: var(--spacing-4);
    text-align: center;
}

.current-step[b-y03v8mkbct] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
}

    .current-step i[b-y03v8mkbct] {
        color: var(--info-500);
    }

.step-progress[b-y03v8mkbct] {
    margin-top: var(--spacing-2);
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

/* Sync Log Card */
.sync-log-card[b-y03v8mkbct] {
    max-width: 1000px;
    margin: 0 auto var(--spacing-8);
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-xl);
    position: relative;
    z-index: 10;
}

.log-header[b-y03v8mkbct] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

    .log-header h3[b-y03v8mkbct] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

        .log-header h3 i[b-y03v8mkbct] {
            color: var(--primary-500);
        }

.btn-clear-log[b-y03v8mkbct] {
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--bg-tertiary);
    border: 2px solid var(--border-secondary);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

    .btn-clear-log:hover[b-y03v8mkbct] {
        background: var(--bg-quaternary);
        border-color: var(--border-tertiary);
        color: var(--text-primary);
    }

.log-container[b-y03v8mkbct] {
    max-height: 400px;
    overflow-y: auto;
    padding-right: var(--spacing-2);
}

    .log-container[b-y03v8mkbct]::-webkit-scrollbar {
        width: 6px;
    }

    .log-container[b-y03v8mkbct]::-webkit-scrollbar-track {
        background: var(--bg-tertiary);
        border-radius: var(--radius-sm);
    }

    .log-container[b-y03v8mkbct]::-webkit-scrollbar-thumb {
        background: var(--pastel-lavender);
        border-radius: var(--radius-sm);
    }

        .log-container[b-y03v8mkbct]::-webkit-scrollbar-thumb:hover {
            background: var(--pastel-lavender-dark);
        }

.log-entry[b-y03v8mkbct] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-2);
    transition: var(--transition-fast);
}

    .log-entry:hover[b-y03v8mkbct] {
        background: var(--bg-tertiary);
    }

    .log-entry.error[b-y03v8mkbct] {
        background: var(--danger-50);
    }

    .log-entry.warning[b-y03v8mkbct] {
        background: var(--warning-50);
    }

    .log-entry.success[b-y03v8mkbct] {
        background: var(--success-50);
    }

.log-icon[b-y03v8mkbct] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.log-entry.error .log-icon[b-y03v8mkbct] {
    background: var(--danger-100);
    color: var(--danger-600);
}

.log-entry.warning .log-icon[b-y03v8mkbct] {
    background: var(--warning-100);
    color: var(--warning-600);
}

.log-entry.success .log-icon[b-y03v8mkbct] {
    background: var(--success-100);
    color: var(--success-600);
}

.log-entry.info .log-icon[b-y03v8mkbct] {
    background: var(--info-100);
    color: var(--info-600);
}

.log-content[b-y03v8mkbct] {
    flex: 1;
}

.timestamp[b-y03v8mkbct] {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    font-weight: 600;
    margin-right: var(--spacing-2);
}

.message[b-y03v8mkbct] {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.details[b-y03v8mkbct] {
    display: block;
    margin-top: var(--spacing-1);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Sync Results Card */
.sync-results-card[b-y03v8mkbct] {
    max-width: 1000px;
    margin: 0 auto var(--spacing-8);
    background: white;
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-xl);
    position: relative;
    z-index: 10;
    border: 3px solid var(--border-secondary);
}

    .sync-results-card.success[b-y03v8mkbct] {
        border-color: var(--success-300);
    }

    .sync-results-card.error[b-y03v8mkbct] {
        border-color: var(--danger-300);
    }

.results-header[b-y03v8mkbct] {
    margin-bottom: var(--spacing-5);
}

    .results-header h3[b-y03v8mkbct] {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
    }

.sync-results-card.success .results-header h3[b-y03v8mkbct] {
    color: var(--success-700);
}

.sync-results-card.error .results-header h3[b-y03v8mkbct] {
    color: var(--danger-700);
}

.results-grid[b-y03v8mkbct] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-5);
}

.result-card[b-y03v8mkbct] {
    background: var(--bg-tertiary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-4);
    text-align: center;
    transition: var(--transition-base);
    border: 2px solid transparent;
}

    .result-card:hover[b-y03v8mkbct] {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .result-card.success[b-y03v8mkbct] {
        background: var(--success-50);
        border-color: var(--success-200);
    }

    .result-card.info[b-y03v8mkbct] {
        background: var(--info-50);
        border-color: var(--info-200);
    }

    .result-card.warning[b-y03v8mkbct] {
        background: var(--warning-50);
        border-color: var(--warning-200);
    }

    .result-card.danger[b-y03v8mkbct] {
        background: var(--danger-50);
        border-color: var(--danger-200);
    }

    .result-card.secondary[b-y03v8mkbct] {
        background: var(--bg-quaternary);
        border-color: var(--border-secondary);
    }

.result-icon[b-y03v8mkbct] {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--spacing-3);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.result-card.success .result-icon[b-y03v8mkbct] {
    background: var(--success-100);
    color: var(--success-600);
}

.result-card.info .result-icon[b-y03v8mkbct] {
    background: var(--info-100);
    color: var(--info-600);
}

.result-card.warning .result-icon[b-y03v8mkbct] {
    background: var(--warning-100);
    color: var(--warning-600);
}

.result-card.danger .result-icon[b-y03v8mkbct] {
    background: var(--danger-100);
    color: var(--danger-600);
}

.result-card.secondary .result-icon[b-y03v8mkbct] {
    background: var(--gray-200);
    color: var(--gray-600);
}

.result-value[b-y03v8mkbct] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: var(--spacing-2);
}

.result-label[b-y03v8mkbct] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.result-message[b-y03v8mkbct] {
    padding: var(--spacing-4);
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.9375rem;
}

.sync-results-card.success .result-message[b-y03v8mkbct] {
    background: var(--success-50);
    color: var(--success-700);
}

.sync-results-card.error .result-message[b-y03v8mkbct] {
    background: var(--danger-50);
    color: var(--danger-700);
}

/* Sync History Card */
.sync-history-card[b-y03v8mkbct] {
    max-width: 1400px;
    margin: 0 auto var(--spacing-8);
    padding: var(--spacing-8);
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    position: relative;
    z-index: 10;
}

.history-header[b-y03v8mkbct] {
    margin-bottom: var(--spacing-5);
}

    .history-header h3[b-y03v8mkbct] {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
    }

        .history-header h3 i[b-y03v8mkbct] {
            color: var(--primary-500);
        }

.history-table-wrapper[b-y03v8mkbct] {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    background: var(--bg-tertiary);
}

.history-table[b-y03v8mkbct] {
    width: 100%;
    border-collapse: collapse;
}

    .history-table th[b-y03v8mkbct] {
        background: var(--bg-quaternary);
        padding: var(--spacing-3) var(--spacing-4);
        text-align: left;
        font-weight: 600;
        font-size: 0.875rem;
        color: var(--text-primary);
        border-bottom: 2px solid var(--border-secondary);
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .history-table td[b-y03v8mkbct] {
        padding: var(--spacing-3) var(--spacing-4);
        border-bottom: 1px solid var(--border-secondary);
        font-size: 0.875rem;
        background: white;
    }

    .history-table tr[b-y03v8mkbct] {
        transition: var(--transition-fast);
    }

        .history-table tr:hover td[b-y03v8mkbct] {
            background: var(--bg-tertiary);
        }

        .history-table tr.error-row td[b-y03v8mkbct] {
            background: var(--danger-50);
        }

.entity-name[b-y03v8mkbct] {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-weight: 600;
    color: var(--text-primary);
}

    .entity-name i[b-y03v8mkbct] {
        color: var(--primary-500);
    }

.changes[b-y03v8mkbct] {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.change-stat[b-y03v8mkbct] {
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 600;
}

    .change-stat.added[b-y03v8mkbct] {
        background: var(--success-100);
        color: var(--success-700);
    }

    .change-stat.updated[b-y03v8mkbct] {
        background: var(--info-100);
        color: var(--info-700);
    }

    .change-stat.deleted[b-y03v8mkbct] {
        background: var(--warning-100);
        color: var(--warning-700);
    }

    .change-stat.failed[b-y03v8mkbct] {
        background: var(--danger-100);
        color: var(--danger-700);
    }

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

    .status-badge.success[b-y03v8mkbct] {
        background: var(--success-100);
        color: var(--success-700);
    }

    .status-badge.error[b-y03v8mkbct] {
        background: var(--danger-100);
        color: var(--danger-700);
    }

/* Animations */
.animate-in[b-y03v8mkbct] {
    animation: fadeInUp-b-y03v8mkbct 0.5s ease-out;
}

@keyframes fadeInUp-b-y03v8mkbct {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in[b-y03v8mkbct] {
    animation: fadeIn-b-y03v8mkbct 0.3s ease-out;
}

@keyframes fadeIn-b-y03v8mkbct {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .quick-actions[b-y03v8mkbct] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sync-header[b-y03v8mkbct] {
        padding: var(--spacing-6) 0;
    }

    .header-main[b-y03v8mkbct] {
        flex-direction: column;
        text-align: center;
    }

    .header-icon[b-y03v8mkbct] {
        width: 80px;
        height: 80px;
        font-size: 2.5rem;
    }

    .header-info h1[b-y03v8mkbct] {
        font-size: 2rem;
    }

    .header-stats[b-y03v8mkbct] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .notification-container[b-y03v8mkbct] {
        left: var(--spacing-4);
        right: var(--spacing-4);
        max-width: none;
    }

    .quick-actions-container[b-y03v8mkbct],
    .entity-status-section[b-y03v8mkbct],
    .sync-options-card[b-y03v8mkbct] {
        padding: 0 var(--spacing-4);
    }

    .sync-options-card[b-y03v8mkbct],
    .sync-progress-card[b-y03v8mkbct],
    .sync-log-card[b-y03v8mkbct],
    .sync-results-card[b-y03v8mkbct],
    .sync-history-card[b-y03v8mkbct] {
        padding: var(--spacing-5);
    }

    .options-grid[b-y03v8mkbct] {
        grid-template-columns: 1fr;
    }

    .entity-grid[b-y03v8mkbct] {
        grid-template-columns: 1fr;
    }

    .results-grid[b-y03v8mkbct] {
        grid-template-columns: 1fr 1fr;
    }

    .history-table[b-y03v8mkbct] {
        font-size: 0.75rem;
    }

        .history-table th[b-y03v8mkbct],
        .history-table td[b-y03v8mkbct] {
            padding: var(--spacing-2);
        }
}

/* Dark Mode Adjustments */
[data-theme="dark"] .sync-options-card[b-y03v8mkbct],
[data-theme="dark"] .sync-progress-card[b-y03v8mkbct],
[data-theme="dark"] .sync-log-card[b-y03v8mkbct],
[data-theme="dark"] .sync-results-card[b-y03v8mkbct],
[data-theme="dark"] .sync-history-card[b-y03v8mkbct],
[data-theme="dark"] .entity-card[b-y03v8mkbct],
[data-theme="dark"] .quick-action-card[b-y03v8mkbct] {
    background: var(--bg-secondary);
}

[data-theme="dark"] .option-item[b-y03v8mkbct] {
    background: var(--bg-quaternary);
}

    [data-theme="dark"] .option-item:hover[b-y03v8mkbct] {
        background: rgba(232, 227, 245, 0.1);
    }

[data-theme="dark"] .request-days-config[b-y03v8mkbct] {
    background: rgba(227, 240, 255, 0.1);
    border-color: rgba(138, 180, 248, 0.3);
}

[data-theme="dark"] .log-entry:hover[b-y03v8mkbct] {
    background: var(--bg-quaternary);
}

[data-theme="dark"] .result-card[b-y03v8mkbct] {
    background: var(--bg-quaternary);
}

[data-theme="dark"] .history-table-wrapper[b-y03v8mkbct] {
    background: var(--bg-quaternary);
}

[data-theme="dark"] .history-table td[b-y03v8mkbct] {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .history-table tr:hover td[b-y03v8mkbct] {
    background: var(--bg-quaternary);
}

/* Print Styles */
@media print {
    .background-shapes[b-y03v8mkbct],
    .notification-container[b-y03v8mkbct],
    .quick-actions-container[b-y03v8mkbct],
    .sync-options-card[b-y03v8mkbct] {
        display: none !important;
    }

    .sync-header[b-y03v8mkbct] {
        background: none;
        color: black;
    }

    .entity-card[b-y03v8mkbct],
    .sync-progress-card[b-y03v8mkbct],
    .sync-log-card[b-y03v8mkbct],
    .sync-results-card[b-y03v8mkbct],
    .sync-history-card[b-y03v8mkbct] {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}