/*
 * Skeleton/loader styles, injected via HEAD_END into every panel rather
 * than living in theme.css: the loading-section override in
 * resources/views/vendor/filament applies to the super-admin panel too,
 * which doesn't load the admin Vite theme.
 */
:root {
    --ta-skel-base: rgb(var(--gray-200));
    --ta-skel-shine: rgba(255, 255, 255, 0.75);
    --ta-skel-card: #fff;
    --ta-skel-ring: rgba(var(--gray-950), 0.05);
    --ta-skel-page: rgb(var(--gray-50));
}

.dark {
    --ta-skel-base: rgba(255, 255, 255, 0.08);
    --ta-skel-shine: rgba(255, 255, 255, 0.08);
    --ta-skel-card: rgb(var(--gray-900));
    --ta-skel-ring: rgba(255, 255, 255, 0.1);
    --ta-skel-page: rgb(var(--gray-950));
}

#nprogress { display: none !important; }

/* ---- Shimmer building blocks ---------------------------------------- */

@keyframes ta-skel-shimmer {
    from { background-position: 150% 0; }
    to { background-position: -50% 0; }
}

@keyframes ta-skel-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ta-skel {
    display: block;
    flex-shrink: 0;
    border-radius: 0.375rem;
    background-color: var(--ta-skel-base);
    background-image: linear-gradient(100deg, transparent 30%, var(--ta-skel-shine) 50%, transparent 70%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: ta-skel-shimmer 1.4s ease-in-out infinite;
}

.ta-skel-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    padding: 1.5rem;
    overflow: hidden;
    border-radius: 0.75rem;
    background-color: var(--ta-skel-card);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--ta-skel-ring);
    animation: ta-skel-in 0.25s ease-out both;
}

.ta-skel-head,
.ta-skel-row,
.ta-skel-tr {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ta-skel-head { justify-content: space-between; }

.ta-skel-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.ta-skel-line { height: 0.75rem; }
.ta-skel-line-sm { height: 0.5rem; }
.ta-skel-title { width: 10rem; max-width: 50%; height: 1rem; }
.ta-skel-heading { width: 14rem; max-width: 70%; height: 1.75rem; }
.ta-skel-pill { width: 4rem; height: 1.25rem; border-radius: 999px; }
.ta-skel-btn { width: 7.5rem; height: 2.25rem; border-radius: 0.5rem; }
.ta-skel-icon { width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; }
.ta-skel-value { width: 45%; height: 1.75rem; }

/* stats: a row of tiles, like StatsOverviewWidget */
.ta-skel-stats {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
    .ta-skel-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .ta-skel-stats { grid-template-columns: repeat(var(--ta-skel-cols, 4), minmax(0, 1fr)); }
}

.ta-skel-stat { gap: 0.875rem; }
.ta-skel-stats > :nth-child(2) .ta-skel { animation-delay: 0.1s; }
.ta-skel-stats > :nth-child(3) .ta-skel { animation-delay: 0.2s; }
.ta-skel-stats > :nth-child(4) .ta-skel { animation-delay: 0.3s; }

/* chart: bars rising from a baseline */
.ta-skel-bars {
    display: flex;
    align-items: flex-end;
    gap: 4%;
    flex: 1;
    min-height: 8rem;
    padding-top: 0.5rem;
    border-bottom: 1px solid var(--ta-skel-base);
}

.ta-skel-bar {
    flex: 1;
    border-radius: 0.375rem 0.375rem 0 0;
}

/* table: header-ish rows divided by hairlines */
.ta-skel-table { display: flex; flex-direction: column; }

.ta-skel-tr {
    justify-content: space-between;
    padding: 0.875rem 0;
    border-top: 1px solid var(--ta-skel-base);
}

.ta-skel-list { display: flex; flex-direction: column; gap: 1.125rem; }

/* ---- SPA page-switch skeleton -------------------------------------- */

.fi-main { position: relative; }

.ta-page-loader {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 1rem;
    overflow: hidden;
    background-color: var(--ta-skel-page);
}

@media (min-width: 768px) {
    .ta-page-loader { padding: 2rem 1.5rem; }
}

@media (min-width: 1024px) {
    .ta-page-loader { padding: 2rem; }
}

.ta-page-loader-head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Short delay so fast (prefetched) switches don't flash the skeleton */
.ta-navigating .ta-page-loader {
    display: flex;
    animation: ta-skel-in 0.2s ease-out 0.12s both;
}

.ta-navigating .fi-main { min-height: 70vh; }

@media (prefers-reduced-motion: reduce) {
    .ta-skel { animation: none; }
}