/* ==== All Skeletons CSS=== */
    /* =========== Table Loader ============= */
    /* .table-loader-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
        z-index: 10;
        padding: 10px;
    } */

    .skeleton-cell {
        height: 18px;
        width: 100%;
        border-radius: 4px;
        background: linear-gradient(90deg,
                #e0e0e0 25%,
                #f5f5f5 37%,
                #e0e0e0 63%);
        background-size: 400% 100%;
        animation: shimmer 1.2s infinite;
    }

    .skeleton-cell.small {
        width: 40px;
    }

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

        100% {
            background-position: -100% 0;
        }
    }

    /* ============== */
    /* =========== Progress Bars ============= */
    .skeleton-label {
        height: 14px;
        width: 80%;
        border-radius: 4px;
        background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 37%, #e0e0e0 63%);
        background-size: 400% 100%;
        animation: shimmer 1.2s infinite;
        margin-top: 8px;
    }

    .skeleton-progress {
        height: 20px;
        width: 100%;
        border-radius: 10px;
        background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 37%, #e0e0e0 63%);
        background-size: 400% 100%;
        animation: shimmer 1.2s infinite;
    }

    /* ================= */
    /* ===== Pie Chart ===== */
    .skeleton-pie {
        width: 220px;
        height: 220px;
        border-radius: 50%;
        margin: 20px auto;
        background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 37%, #e0e0e0 63%);
        background-size: 400% 100%;
        animation: shimmer 1.2s infinite;
        position: relative;
    }

    /* Inner cut (donut effect like chart) */
    .skeleton-pie::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 120px;
        height: 120px;
        background: #fff;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    /* Legend skeleton */
    .skeleton-legend {
        height: 12px;
        width: 60%;
        margin: 8px auto;
        border-radius: 4px;
        background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 37%, #e0e0e0 63%);
        background-size: 400% 100%;
        animation: shimmer 1.2s infinite;
    }

    /* =========== */