/* ===== EMPTY STATES WITH SVG ILLUSTRATIONS ===== */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    animation: fadeInUp 0.6s ease-out;
}

.empty-state-illustration {
    width: 180px;
    height: 180px;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.empty-state-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    max-width: 320px;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.empty-state-action {
    margin-top: 0.5rem;
}

/* SVG Illustrations - Inline as background */
.empty-state-history .empty-state-illustration {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='grad1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%233b82f6;stop-opacity:0.2' /%3E%3Cstop offset='100%25' style='stop-color:%236366f1;stop-opacity:0.1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='80' fill='url(%23grad1)'/%3E%3Cpath d='M70 70h60v80H70z' fill='none' stroke='%233b82f6' stroke-width='2' rx='4'/%3E%3Cpath d='M80 90h40M80 105h30M80 120h35' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='140' cy='140' r='25' fill='%233b82f6' opacity='0.15'/%3E%3Cpath d='M135 140l3 3 7-7' stroke='%233b82f6' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.empty-state-notifications .empty-state-illustration {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='grad2' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%2310b981;stop-opacity:0.2' /%3E%3Cstop offset='100%25' style='stop-color:%2306b6d4;stop-opacity:0.1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='80' fill='url(%23grad2)'/%3E%3Cpath d='M100 60c-16 0-30 13-30 30v25l-8 8v5h76v-5l-8-8V90c0-17-14-30-30-30z' fill='none' stroke='%2310b981' stroke-width='2'/%3E%3Ccircle cx='100' cy='140' r='8' fill='%2310b981' opacity='0.5'/%3E%3Ccircle cx='145' cy='70' r='12' fill='%2310b981'/%3E%3Cpath d='M142 70h6M145 67v6' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.empty-state-search .empty-state-illustration {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='grad3' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23f59e0b;stop-opacity:0.2' /%3E%3Cstop offset='100%25' style='stop-color:%23f97316;stop-opacity:0.1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='80' fill='url(%23grad3)'/%3E%3Ccircle cx='90' cy='90' r='30' fill='none' stroke='%23f59e0b' stroke-width='3'/%3E%3Cpath d='M112 112l25 25' stroke='%23f59e0b' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M80 85h20M90 75v20' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.empty-state-analytics .empty-state-illustration {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='grad4' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%238b5cf6;stop-opacity:0.2' /%3E%3Cstop offset='100%25' style='stop-color:%23a855f7;stop-opacity:0.1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='80' fill='url(%23grad4)'/%3E%3Crect x='55' y='100' width='20' height='40' rx='3' fill='%238b5cf6' opacity='0.6'/%3E%3Crect x='80' y='80' width='20' height='60' rx='3' fill='%238b5cf6' opacity='0.8'/%3E%3Crect x='105' y='60' width='20' height='80' rx='3' fill='%238b5cf6'/%3E%3Crect x='130' y='90' width='20' height='50' rx='3' fill='%238b5cf6' opacity='0.7'/%3E%3Cpath d='M55 55l40 30 30-15 30 20' stroke='%23a855f7' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='55' cy='55' r='4' fill='%23a855f7'/%3E%3Ccircle cx='95' cy='85' r='4' fill='%23a855f7'/%3E%3Ccircle cx='125' cy='70' r='4' fill='%23a855f7'/%3E%3Ccircle cx='155' cy='90' r='4' fill='%23a855f7'/%3E%3C/svg%3E") center/contain no-repeat;
}

.empty-state-favorites .empty-state-illustration {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='grad5' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ec4899;stop-opacity:0.2' /%3E%3Cstop offset='100%25' style='stop-color:%23f43f5e;stop-opacity:0.1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='80' fill='url(%23grad5)'/%3E%3Cpath d='M100 140l-32-32c-12-12-12-32 0-44s32-12 44 0l-12 12 12-12c12 12 12 32 0 44z' fill='none' stroke='%23ec4899' stroke-width='3'/%3E%3Cpath d='M100 140l-32-32c-12-12-12-32 0-44s32-12 44 0l-12 12 12-12c12 12 12 32 0 44z' fill='%23ec4899' opacity='0.2'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Animated floating effect for illustrations */
@keyframes floatIllustration {

    0%,
    100% {
        transform: translateY(0);
    }

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

.empty-state-illustration {
    animation: floatIllustration 4s ease-in-out infinite;
}