/* ==========================================================================
   Empty State Component Library - EasyRentalGuru
   Updated for Dark Mode Support
   ========================================================================== */

/* Base Empty State Styles */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 24px;
    max-width: 480px;
    margin: 0 auto;
}

/* Empty State Illustration (Image) */
.empty-state-illustration {
    width: 200px;
    height: auto;
    margin-bottom: 24px;
    opacity: 0.8;
}

/* Empty State Icon */
.empty-state-icon {
    width: 80px;
    height: 80px;
    background: var(--color-bg-tertiary, #f1f5f9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--color-text-tertiary, #64748b);
    transition: all 0.3s ease;
}

html.dark .empty-state-icon,
[data-theme="dark"] .empty-state-icon {
    background: var(--color-bg-tertiary, #334155);
    color: var(--color-text-tertiary, #94a3b8);
}

.empty-state-icon.default {
    background: linear-gradient(135deg, var(--color-primary, #3b82f6) 0%, var(--color-secondary, #14b8a6) 100%);
    color: white;
}

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

/* Empty State Title */
.empty-state-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary, #0f172a);
    margin: 0 0 12px 0;
    line-height: 1.3;
    transition: color 0.3s ease;
}

html.dark .empty-state-title,
[data-theme="dark"] .empty-state-title {
    color: var(--color-text-primary, #f8fafc);
}

/* Empty State Description */
.empty-state-description {
    font-size: 16px;
    color: var(--color-text-secondary, #475569);
    margin: 0 0 24px 0;
    line-height: 1.6;
    transition: color 0.3s ease;
}

html.dark .empty-state-description,
[data-theme="dark"] .empty-state-description {
    color: var(--color-text-secondary, #cbd5e1);
}

/* Empty State Content (Custom) */
.empty-state-content {
    margin-bottom: 24px;
    width: 100%;
}

/* Empty State Action Button */
.empty-state-action {
    min-width: 160px;
}

/* Empty State Variants */

/* Compact Empty State */
.empty-state-compact {
    padding: 32px 24px;
}

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

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

.empty-state-compact .empty-state-title {
    font-size: 18px;
    margin-bottom: 8px;
}

.empty-state-compact .empty-state-description {
    font-size: 14px;
    margin-bottom: 16px;
}

/* Large Empty State */
.empty-state-large {
    padding: 100px 24px;
    max-width: 600px;
}

.empty-state-large .empty-state-icon {
    width: 120px;
    height: 120px;
    margin-bottom: 32px;
}

.empty-state-large .empty-state-icon svg {
    width: 60px;
    height: 60px;
}

.empty-state-large .empty-state-title {
    font-size: 32px;
    margin-bottom: 16px;
}

.empty-state-large .empty-state-description {
    font-size: 18px;
    margin-bottom: 32px;
}

/* Inline Empty State */
.empty-state-inline {
    flex-direction: row;
    text-align: left;
    padding: 24px;
    gap: 20px;
    max-width: none;
}

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

.empty-state-inline .empty-state-icon svg {
    width: 28px;
    height: 28px;
}

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

.empty-state-inline .empty-state-title {
    margin-bottom: 4px;
}

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

/* Card Empty State */
.empty-state-card {
    background: var(--color-bg-surface, #ffffff);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
    border: 1px solid var(--color-border, #e2e8f0);
    padding: 48px 32px;
    transition: all 0.3s ease;
}

html.dark .empty-state-card,
[data-theme="dark"] .empty-state-card {
    background: var(--color-bg-secondary, #1e293b);
    border-color: var(--color-border, #334155);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.4));
}

/* Empty State with Background */
.empty-state-bg {
    background: linear-gradient(135deg, var(--color-bg-secondary, #f8fafc) 0%, var(--color-bg-tertiary, #f1f5f9) 100%);
    border-radius: var(--radius-lg, 16px);
    padding: 60px 32px;
    transition: all 0.3s ease;
}

html.dark .empty-state-bg,
[data-theme="dark"] .empty-state-bg {
    background: linear-gradient(135deg, var(--color-bg-secondary, #1e293b) 0%, var(--color-bg-tertiary, #334155) 100%);
}

/* Empty State for Dark Backgrounds (Legacy - use with caution) */
.empty-state-dark {
    color: white;
}

.empty-state-dark .empty-state-icon {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.empty-state-dark .empty-state-title {
    color: white;
}

.empty-state-dark .empty-state-description {
    color: rgba(255, 255, 255, 0.8);
}

/* Multiple Actions */
.empty-state-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Empty State List (for showing suggestions) */
.empty-state-suggestions {
    list-style: none;
    padding: 0;
    margin: 16px 0 0 0;
    text-align: left;
}

.empty-state-suggestions li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    color: var(--color-text-secondary, #475569);
    font-size: 14px;
    transition: color 0.3s ease;
}

html.dark .empty-state-suggestions li,
[data-theme="dark"] .empty-state-suggestions li {
    color: var(--color-text-secondary, #cbd5e1);
}

.empty-state-suggestions li::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--color-primary, #3b82f6);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Empty State for Tables/Lists */
.empty-state-table {
    padding: 48px 24px;
    border: 2px dashed var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 12px);
    margin: 16px;
    transition: all 0.3s ease;
}

html.dark .empty-state-table,
[data-theme="dark"] .empty-state-table {
    border-color: var(--color-border, #334155);
}

/* Loading State (transitional) */
.empty-state-loading {
    opacity: 0.7;
    pointer-events: none;
}

.empty-state-loading .empty-state-icon {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Error State */
.empty-state-error .empty-state-icon {
    background: var(--color-error-subtle, #fee2e2);
    color: var(--color-error, #ef4444);
}

html.dark .empty-state-error .empty-state-icon,
[data-theme="dark"] .empty-state-error .empty-state-icon {
    background: rgba(239, 68, 68, 0.2);
    color: var(--color-error-light, #f87171);
}

/* Success State */
.empty-state-success .empty-state-icon {
    background: var(--color-success-subtle, #d1fae5);
    color: var(--color-success, #10b981);
}

html.dark .empty-state-success .empty-state-icon,
[data-theme="dark"] .empty-state-success .empty-state-icon {
    background: rgba(16, 185, 129, 0.2);
    color: var(--color-success-light, #34d399);
}

/* Warning State */
.empty-state-warning .empty-state-icon {
    background: var(--color-warning-subtle, #fef3c7);
    color: var(--color-warning, #f59e0b);
}

html.dark .empty-state-warning .empty-state-icon,
[data-theme="dark"] .empty-state-warning .empty-state-icon {
    background: rgba(245, 158, 11, 0.2);
    color: var(--color-warning-light, #fbbf24);
}

/* Info State */
.empty-state-info .empty-state-icon {
    background: var(--color-info-subtle, #dbeafe);
    color: var(--color-info, #3b82f6);
}

html.dark .empty-state-info .empty-state-icon,
[data-theme="dark"] .empty-state-info .empty-state-icon {
    background: rgba(59, 130, 246, 0.2);
    color: var(--color-info-light, #60a5fa);
}

/* Search Empty State */
.empty-state-search .empty-state-icon {
    background: var(--color-bg-tertiary, #f1f5f9);
    color: var(--color-text-muted, #94a3b8);
}

html.dark .empty-state-search .empty-state-icon,
[data-theme="dark"] .empty-state-search .empty-state-icon {
    background: var(--color-bg-tertiary, #334155);
    color: var(--color-text-muted, #64748b);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .empty-state {
        padding: 40px 20px;
    }
    
    .empty-state-title {
        font-size: 20px;
    }
    
    .empty-state-description {
        font-size: 15px;
    }
    
    .empty-state-large {
        padding: 60px 20px;
    }
    
    .empty-state-large .empty-state-title {
        font-size: 24px;
    }
    
    .empty-state-inline {
        flex-direction: column;
        text-align: center;
    }
    
    .empty-state-inline .empty-state-icon {
        margin-bottom: 16px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .empty-state-loading .empty-state-icon {
        animation: none;
    }
    
    .empty-state,
    .empty-state-icon,
    .empty-state-title,
    .empty-state-description,
    .empty-state-card,
    .empty-state-bg,
    .empty-state-table {
        transition: none;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .empty-state-icon {
        border: 2px solid currentColor;
    }
    
    .empty-state-table {
        border-width: 3px;
    }
}