/* Skeleton Screens — FNL Budgets
   Shimmer placeholders for loading states.
   Uses --theme-* CSS custom properties for light/dark support. */

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

/* Base skeleton mixin-style */
.skeleton-text,
.skeleton-card,
.skeleton-chart,
.skeleton-stat {
    position: relative;
    overflow: hidden;
    background: var(--theme-bg-tertiary, #e5e7eb);
    border: 1px solid var(--theme-border-light, #f3f4f6);
    border-radius: var(--radius, 0.5rem);
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}

.skeleton-text::after,
.skeleton-card::after,
.skeleton-chart::after,
.skeleton-stat::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--theme-bg-secondary, rgba(255,255,255,0.4)) 50%,
        transparent 100%
    );
    animation: shimmer 1.8s ease-in-out infinite;
}

/* Text placeholder */
.skeleton-text {
    height: 1em;
    width: 80%;
    border-radius: var(--radius-sm, 0.375rem);
    margin-bottom: 0.5rem;
}

.skeleton-text.skeleton-text--short { width: 40%; }
.skeleton-text.skeleton-text--medium { width: 60%; }

/* Card placeholder */
.skeleton-card {
    min-height: 120px;
    padding: 1.25rem;
    border-radius: var(--radius-lg, 0.75rem);
}

/* Chart placeholder */
.skeleton-chart {
    min-height: 280px;
    border-radius: var(--radius-lg, 0.75rem);
}

/* Stat card placeholder */
.skeleton-stat {
    min-height: 90px;
    border-radius: var(--radius-lg, 0.75rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
}

/* Dark mode — tweak shimmer highlight */
[data-bs-theme="dark"] .skeleton-text::after,
[data-bs-theme="dark"] .skeleton-card::after,
[data-bs-theme="dark"] .skeleton-chart::after,
[data-bs-theme="dark"] .skeleton-stat::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 50%,
        transparent 100%
    );
}