/* ==============================================
   empty-states.css - Illustrated Empty State Extensions
   Extends .empty-state base class in layout.css
   ============================================== */

/* --- Illustration Container --- */
.empty-state-illustration {
    max-width: 200px;
    margin-bottom: var(--space-4);
}

.empty-state-illustration svg {
    width: 100%;
    height: auto;
    fill: none;
}

/* --- Stroke Color Utilities --- */
.empty-state-stroke-primary {
    color: var(--color-primary);
}

.empty-state-stroke-muted {
    color: var(--color-text-muted);
}

/* --- Action Button Layout --- */
.empty-state-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.empty-state-actions .btn {
    min-width: 200px;
}

.empty-state-actions .empty-state-link {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: underline;
}

/* --- Dark Mode Overrides --- */
[data-theme="dark"] .empty-state-illustration {
    opacity: 0.8;
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    .empty-state-illustration {
        max-width: 160px;
    }

    .empty-state {
        padding: var(--space-12) var(--space-4);
    }
}