/* SKELETON UI STYLES - GLOBAL */
#loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

:root {
    --skeleton-base: #e2e8f0;
    --skeleton-shine: #f8fafc;
    --indigo-shimmer: rgba(99, 102, 241, 0.1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --skeleton-base: #334155;
        --skeleton-shine: #475569;
    }
}

.skeleton {
    background-color: var(--skeleton-base);
    position: relative;
    overflow: hidden;
    border-radius: 0.375rem;
}

.skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg, 
        transparent, 
        var(--indigo-shimmer), 
        var(--skeleton-shine), 
        var(--indigo-shimmer), 
        transparent
    );
    animation: shimmer 1.8s infinite;
}

@keyframes shimmer {
    100% { transform: translateX(100%); }
}

[data-loading="true"] .hide-on-loading { display: none !important; }
[data-loading="false"] .show-on-loading { display: none !important; }

.skeleton-row { height: 60px; }
.skeleton-cell { height: 1.5rem; margin: 0.5rem 0; }
.skeleton-kpi { height: 2rem; width: 60%; margin-top: 0.5rem; }
.skeleton-box { height: 100%; width: 100%; }