/**
 * Empty States CSS
 * ============================================
 * Styles for empty state displays
 */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8, 2rem) var(--space-4, 1rem);
    text-align: center;
    min-height: 200px;
    color: var(--text-secondary, #64748b);
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-secondary, #f1f5f9);
    border-radius: 50%;
    margin-bottom: var(--space-4, 1rem);
}

.empty-state-icon i {
    font-size: 2rem;
    color: var(--primary-500, #14b8a6);
}

/* Icon style variants */
.empty-state-icon-teal {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15) 0%, rgba(13, 148, 136, 0.1) 100%);
}
.empty-state-icon-teal i { color: #14b8a6; }

.empty-state-icon-purple {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(109, 40, 217, 0.1) 100%);
}
.empty-state-icon-purple i { color: #8b5cf6; }

.empty-state-icon-blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);
}
.empty-state-icon-blue i { color: #3b82f6; }

.empty-state-icon-orange {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(234, 88, 12, 0.1) 100%);
}
.empty-state-icon-orange i { color: #f97316; }

.empty-state-icon-red {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
}
.empty-state-icon-red i { color: #ef4444; }

.empty-state-icon-gold {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.1) 100%);
}
.empty-state-icon-gold i { color: #f59e0b; }

.empty-state-icon-gray {
    background: var(--surface-secondary, #f1f5f9);
}
.empty-state-icon-gray i { color: var(--text-secondary, #64748b); }

.empty-state-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    margin: 0 0 var(--space-2, 0.5rem);
}

.empty-state-description {
    font-size: 0.875rem;
    max-width: 300px;
    margin: 0 0 var(--space-4, 1rem);
    line-height: 1.5;
}

.empty-state-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
    background: var(--primary-600, #0d9488);
    border: none;
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
    transition: all 0.2s ease;
}

.empty-state-action:hover {
    background: var(--primary-700, #0f766e);
    transform: translateY(-1px);
}

.empty-state-action:active {
    transform: translateY(0);
}

/* Secondary action button */
.empty-state-action.secondary {
    background: transparent;
    color: var(--text-secondary, #64748b);
    border: 1px solid var(--border-color, #e2e8f0);
}

.empty-state-action.secondary:hover {
    background: var(--surface-secondary, #f1f5f9);
    color: var(--text-primary, #1e293b);
}

/* Actions container */
.empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
    justify-content: center;
}

/* Tip text */
.empty-state-tip {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    font-size: 0.8125rem;
    color: var(--text-secondary, #64748b);
    background: var(--surface-secondary, #f8fafc);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border-radius: var(--radius-md, 0.5rem);
    margin: 0 0 var(--space-4, 1rem);
}

.empty-state-tip i {
    color: var(--warning, #f59e0b);
    font-size: 0.875rem;
}

/* Privacy notice */
.empty-state-privacy {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    font-size: 0.75rem;
    color: var(--text-muted, #94a3b8);
    margin: 0 0 var(--space-4, 1rem);
}

.empty-state-privacy i {
    color: var(--success, #22c55e);
}

/* Loading State */
.loading-state {
    min-height: 150px;
}

.loading-spinner {
    font-size: 2rem;
    color: var(--primary-500, #14b8a6);
    margin-bottom: var(--space-4, 1rem);
}

.loading-spinner i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Error State */
.empty-state.error-state .empty-state-icon {
    background: var(--danger-50, #fef2f2);
}

.empty-state.error-state .empty-state-icon i {
    color: var(--danger, #ef4444);
}

/* Offline State */
.empty-state.offline-state .empty-state-icon {
    background: var(--warning-50, #fffbeb);
}

.empty-state.offline-state .empty-state-icon i {
    color: var(--warning, #f59e0b);
}

/* Upgrade State */
.empty-state.upgrade-state .empty-state-icon {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.empty-state.upgrade-state .empty-state-icon i {
    color: var(--warning, #f59e0b);
}

/* Dark Mode */
body.dark-mode .empty-state {
    color: var(--slate-400, #94a3b8);
}

body.dark-mode .empty-state-icon {
    background: var(--slate-800, #1e293b);
}

body.dark-mode .empty-state-title {
    color: var(--slate-100, #f1f5f9);
}

body.dark-mode .empty-state-description {
    color: var(--slate-400, #94a3b8);
}

/* Compact variant */
.empty-state.empty-state-compact {
    padding: var(--space-4, 1rem);
    min-height: 120px;
}

.empty-state.empty-state-compact .empty-state-icon {
    width: 56px;
    height: 56px;
}

.empty-state.empty-state-compact .empty-state-icon i {
    font-size: 1.5rem;
}

.empty-state.empty-state-compact .empty-state-title {
    font-size: 1rem;
}

.empty-state.empty-state-compact .empty-state-description {
    font-size: 0.8125rem;
}

/* Inline variant */
.empty-state.empty-state-inline {
    flex-direction: row;
    text-align: left;
    padding: var(--space-4, 1rem);
    min-height: auto;
    gap: var(--space-4, 1rem);
}

.empty-state.empty-state-inline .empty-state-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.empty-state.empty-state-inline .empty-state-icon i {
    font-size: 1.25rem;
}

.empty-state.empty-state-inline .empty-state-content {
    flex: 1;
}

.empty-state.empty-state-inline .empty-state-description {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 640px) {
    .empty-state {
        padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
    }

    .empty-state-icon {
        width: 64px;
        height: 64px;
    }

    .empty-state-icon i {
        font-size: 1.5rem;
    }

    .empty-state-title {
        font-size: 1rem;
    }

    .empty-state-description {
        font-size: 0.8125rem;
    }
}