/* Shared empty-state and loading-spinner components. */

.empty-state {
    text-align: center;
    padding: var(--space-6) var(--space-3);
    color: var(--color-text-muted);
}
.empty-state i,
.empty-state svg { font-size: 32px; margin-bottom: 12px; opacity: .5; display: block; }
.empty-state-title { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); }
.empty-state-sub { font-size: 13px; margin-top: 4px; }

.spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: mayalu-spin .7s linear infinite;
    display: inline-block;
}
.spinner-lg { width: 36px; height: 36px; border-width: 3.5px; }
@keyframes mayalu-spin { to { transform: rotate(360deg); } }

.loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.7);
    z-index: 10;
}