/* ============================================================
   Accounting Report Skeleton Loaders — shimmer loading effect
   ============================================================ */

@keyframes skelShimmer {
    0%   { background-position: -800px 0; }
    100% { background-position:  800px 0; }
}

/* Base shimmer element */
.skel {
    display: inline-block;
    background-color: #e8e8e8;
    background-image: linear-gradient(
        to right,
        #e8e8e8 0%,
        #f4f4f4 30%,
        #e8e8e8 60%
    );
    background-repeat: no-repeat;
    background-size: 1600px 100%;
    animation: skelShimmer 1.5s infinite linear;
    border-radius: 3px;
    height: 12px;
}

/* Wrapper for the whole skeleton loader */
.skel-report-loader {
    padding: 4px 0 12px;
}

/* Box shell */
.skel-loader-box {
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* Box header strip */
.skel-loader-hdr {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}

/* Flex row — used for table rows */
.skel-row {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 15px;
    border-bottom: 1px solid #f4f4f4;
}
.skel-row:last-child { border-bottom: none; }

/* Taller header row */
.skel-row.skel-thead .skel { height: 13px; }

/* Standard data row height */
.skel-row.skel-data .skel { height: 11px; }

/* Section title shimmer */
.skel-sec-head {
    display: block;
    height: 13px;
    width: 160px;
    margin: 10px 15px 8px;
}

/* Section total line */
.skel-sec-total {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 9px 15px;
    border-top: 1px solid #eee;
    background: #fafafa;
}
.skel-sec-total .skel { height: 13px; }

/* Divider between sections */
.skel-section-divider {
    height: 8px;
    background: #f8f8f8;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

/* KPI bar (for ageing summaries etc.) */
.skel-kpi-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.skel-kpi {
    flex: 1;
    height: 58px;
    border-radius: 4px;
    display: block;
}

/* Two-column layout (for comparative report) */
.skel-two-col {
    display: flex;
    gap: 12px;
}
.skel-two-col > .skel-loader-box { flex: 1; }