/*
 * Inline shimmer skeleton loader for Yajra server-side DataTables.
 *
 * Activated by adding `dt-skeleton-enabled` to the <table> class list.
 * JS counterpart: /custom_js/datatable_skeleton.js — replaces the table's
 * <tbody> with skeleton rows on preXhr.dt, and wraps the table's ajax so
 * DataTables can't draw real rows for MIN_DISPLAY_MS (400ms) after the
 * request starts.
 *
 * Because skeleton rows live inside the real table, the browser handles
 * column alignment for us — bars line up perfectly under the real header.
 */

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

/* Skeleton row matches a real row visually so the table height doesn't jump
 * when DataTables paints real data on top. */
table.dt-skeleton-enabled tbody tr.dt-skeleton-row td {
    padding: 14px 16px;
    border-top: 1px solid #f1f3f5;
    background: transparent;
    vertical-align: middle;
}
/* Don't let zebra-striping bleed through the shimmer bars. */
table.dt-skeleton-enabled.table-striped tbody tr.dt-skeleton-row,
table.dt-skeleton-enabled.table-striped tbody tr.dt-skeleton-row:nth-of-type(odd) {
    background-color: transparent !important;
}

.dt-skeleton-bar {
    display: block;
    height: 14px;
    border-radius: 6px;
    background-color: #eef1f4;
    background-image: linear-gradient(
        90deg,
        rgba(238, 241, 244, 1) 0%,
        rgba(248, 249, 251, 1) 50%,
        rgba(238, 241, 244, 1) 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: dt-skeleton-shimmer 1.4s ease-in-out infinite;
}

/* Width variants — JS picks one per cell via (row + col) % 4 so the layout
 * looks organic without re-randomising between draws. */
.dt-skeleton-w-30 { width: 30%; }
.dt-skeleton-w-50 { width: 50%; }
.dt-skeleton-w-70 { width: 70%; }
.dt-skeleton-w-90 { width: 90%; }

/* Suppress Yajra's "Processing…" overlay on opt-in tables so it doesn't
 * fight the skeleton. :has() is supported in all browsers from 2022+. */
.dataTables_wrapper:has(table.dt-skeleton-enabled) .dataTables_processing {
    display: none !important;
}

/* Honour OS-level reduced-motion: keep the skeleton visible but freeze the
 * sweep so it doesn't strobe. */
@media (prefers-reduced-motion: reduce) {
    .dt-skeleton-bar {
        animation: none;
        background-image: none;
    }
}

/* Light-blue tint on the shimmer bars so injected skeleton rows read clearly
 * against the table. */
.dt-skeleton-bar {
    background-color: #d6e0ea !important;
}