/**
 * EMPTY STATES - PharmData Design System v2.0
 * Padrões visuais para estados vazios, primeiro uso e erros
 *
 * Empty states são momentos de oportunidade para orientar
 * o curador e manter o engajamento.
 */

/* ===================
   EMPTY STATE BASE
   =================== */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-12) var(--space-6);
    min-height: 300px;
}

.empty-state-compact {
    padding: var(--space-8) var(--space-4);
    min-height: 200px;
}

.empty-state-full {
    min-height: 60vh;
}

/* ===================
   ILLUSTRATION/ICON
   =================== */

.empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    margin-bottom: var(--space-6);
    color: var(--mint-signal, #B7E4D5);
    background: rgba(183, 228, 213, 0.1);
    border-radius: var(--radius-full);
}

.empty-state-icon svg,
.empty-state-icon i {
    font-size: var(--icon-3xl, 2.5rem);
}

/* Smaller variant */
.empty-state-compact .empty-state-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--space-4);
}

.empty-state-compact .empty-state-icon svg,
.empty-state-compact .empty-state-icon i {
    font-size: var(--icon-2xl, 2rem);
}

/* Colored variants */
.empty-state-icon.icon-success {
    color: var(--success, #4CAF50);
    background: rgba(76, 175, 80, 0.1);
}

.empty-state-icon.icon-warning {
    color: var(--warning, #FFA726);
    background: rgba(255, 167, 38, 0.1);
}

.empty-state-icon.icon-error {
    color: var(--error, #EF4444);
    background: rgba(239, 83, 80, 0.1);
}

.empty-state-icon.icon-info {
    color: var(--info, #3B82F6);
    background: rgba(59, 130, 246, 0.1);
}

/* ===================
   CONTENT
   =================== */

.empty-state-title {
    font-family: var(--font-display, 'EB Garamond', serif);
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--emerald-abyss, #0B2D2A);
    margin-bottom: var(--space-2);
}

.empty-state-compact .empty-state-title {
    font-size: var(--text-md);
}

.empty-state-description {
    font-size: var(--text-sm);
    color: var(--soft-steel, #374151);
    max-width: 400px;
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

.empty-state-compact .empty-state-description {
    margin-bottom: var(--space-4);
    max-width: 300px;
}

/* ===================
   ACTIONS
   =================== */

.empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

.empty-state-actions .btn-primary {
    padding: var(--space-3) var(--space-6);
}

.empty-state-actions .btn-secondary {
    padding: var(--space-3) var(--space-6);
    background: transparent;
    color: var(--teal-intense, #1a8b7d);
    border: 1px solid var(--teal-intense, #1a8b7d);
}

/* ===================
   CONTEXTUAL EMPTY STATES
   =================== */

/* Search - no results */
.empty-state-search {
    background: linear-gradient(180deg,
        rgba(183, 228, 213, 0.03) 0%,
        transparent 100%);
}

.empty-state-search .empty-state-icon {
    color: var(--soft-steel, #374151);
    background: var(--arctic-mist, #E9ECEF);
}

/* First use / Onboarding */
.empty-state-onboarding {
    background: linear-gradient(180deg,
        rgba(42, 161, 152, 0.03) 0%,
        transparent 100%);
    border: 1px dashed var(--border-default, rgba(183, 228, 213, 0.35));
    border-radius: var(--radius-xl);
}

.empty-state-onboarding .empty-state-icon {
    color: var(--teal-intense, #1a8b7d);
    background: rgba(42, 161, 152, 0.1);
}

/* Error state */
.empty-state-error {
    background: rgba(239, 83, 80, 0.02);
    border: 1px solid rgba(239, 83, 80, 0.15);
    border-radius: var(--radius-xl);
}

/* Permission denied */
.empty-state-forbidden {
    background: rgba(255, 167, 38, 0.02);
    border: 1px solid rgba(255, 167, 38, 0.15);
    border-radius: var(--radius-xl);
}

/* Offline state */
.empty-state-offline {
    background: var(--arctic-mist, #E9ECEF);
}

.empty-state-offline .empty-state-icon {
    color: var(--soft-steel, #374151);
}

/* ===================
   EMPTY STATE HELPERS
   Quick tips or suggestions
   =================== */

.empty-state-tips {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-subtle, rgba(183, 228, 213, 0.2));
    max-width: 500px;
}

.empty-state-tips-title {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--soft-steel, #374151);
    margin-bottom: var(--space-3);
}

.empty-state-tips-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: left;
}

.empty-state-tips-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--graphite-depth, #1F2937);
}

.empty-state-tips-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    margin-top: 0.5em;
    background: var(--teal-intense, #1a8b7d);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ===================
   INLINE EMPTY STATE
   For smaller containers (cards, panels)
   =================== */

.empty-state-inline {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: rgba(183, 228, 213, 0.05);
    border: 1px dashed var(--border-subtle, rgba(183, 228, 213, 0.3));
    border-radius: var(--radius-md);
    text-align: left;
}

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

.empty-state-inline .empty-state-icon svg,
.empty-state-inline .empty-state-icon i {
    font-size: var(--icon-lg, 1.25rem);
}

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

.empty-state-inline .empty-state-title {
    font-size: var(--text-sm);
    font-family: var(--font-ui, 'IBM Plex Sans', sans-serif);
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.empty-state-inline .empty-state-description {
    font-size: var(--text-xs);
    margin-bottom: 0;
    max-width: none;
}

/* ===================
   SKELETON EMPTY STATE
   Placeholder while determining if empty
   =================== */

.empty-state-skeleton {
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    background: linear-gradient(
        90deg,
        var(--soft-arctic, #E5E8EB) 0%,
        var(--cloud, #F5F8FA) 50%,
        var(--soft-arctic, #E5E8EB) 100%
    );
    background-size: 200% 100%;
}

.empty-state-skeleton .empty-state-icon,
.empty-state-skeleton .empty-state-title,
.empty-state-skeleton .empty-state-description {
    background: var(--soft-arctic, #E5E8EB);
    color: transparent;
    border-radius: var(--radius-sm);
}

/* ===================
   ANIMATION
   Subtle entrance animation
   =================== */

@keyframes empty-state-appear {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.empty-state-animated {
    animation: empty-state-appear 0.4s var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
}

/* ===================
   REDUCED MOTION
   =================== */

@media (prefers-reduced-motion: reduce) {
    .empty-state-animated {
        animation: none;
    }

    .empty-state-skeleton {
        animation: none;
        background: var(--soft-arctic, #E5E8EB);
    }
}