/*
 * Skeleton Loading Styles
 * Story 2.3: Skeleton Loading Screens
 *
 * Provides animated skeleton placeholders for loading states.
 * Uses shimmer animation to indicate activity.
 */

/* Base skeleton element */
.skeleton {
    background: linear-gradient(
        90deg,
        #e0e0e0 0%,
        #f0f0f0 50%,
        #e0e0e0 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s ease-in-out infinite;
    will-change: background-position;
    border-radius: 4px;
}

/* Shimmer animation */
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Skeleton variants */
.skeleton-text {
    height: 20px;
}

.skeleton-badge {
    height: 28px;
    border-radius: 14px;
}

.skeleton-button {
    height: 32px;
    border-radius: 4px;
}

/* Skeleton row styling */
.skeleton-row {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Screen reader only class (accessibility) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
        background: #e0e0e0;
    }

    .skeleton-row {
        animation: none;
    }
}

/* ============================================================================
 * Story 11B.12 — GridSkeleton (Project Tracker loading state)
 *
 * Polished shimmer skeleton that mirrors the <table class="tracker-table"> grid
 * structure: a header band + N body rows, each with frozen-column cells
 * (.gs-frozen) and several scrollable cells. Rendered as <div>s (never a table)
 * to avoid the Blazor circuit element-type-swap diffing gotcha when toggling
 * loading↔grid. Tokens match the Medtronic design language used in tracker-view.css.
 * ============================================================================ */

.grid-skeleton {
    width: 100%;
    border: 1px solid var(--med-gray-light, #d7d7d7);
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
}

/* Header band — echoes the dark sticky <thead> of the real grid */
.gs-header {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--med-blue-primary, #001E46);
    min-height: 36px;
}

.gs-header .gs-shimmer {
    /* On the dark header, use a lighter shimmer so blocks read as column headers */
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.18) 25%,
        rgba(255, 255, 255, 0.38) 50%,
        rgba(255, 255, 255, 0.18) 75%
    );
    background-size: 200% 100%;
}

.gs-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.55rem 1rem;
    min-height: 32px;                 /* matches real row height (~32px) */
    border-bottom: 1px solid #f0f0f0;
}

.gs-row:last-child {
    border-bottom: none;
}

.gs-cell {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

/* Frozen-ish cells get a faint tint, echoing the sticky frozen columns */
.gs-cell.gs-frozen {
    background: #fafbfc;
}

/* The animated shimmer block itself */
.gs-shimmer {
    display: inline-block;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        #e6e8eb 25%,
        #f2f4f6 50%,
        #e6e8eb 75%
    );
    background-size: 200% 100%;
    animation: gs-shimmer 1.5s ease-in-out infinite;
    will-change: background-position;
}

@keyframes gs-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Accessibility: disable the shimmer animation when the user prefers reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .gs-shimmer {
        animation: none;
        background: #e6e8eb;
    }

    .gs-header .gs-shimmer {
        background: rgba(255, 255, 255, 0.28);
    }
}