/* Skeleton Loader Styles */
.skeleton {
    background: linear-gradient(90deg,
            var(--mg-bg-card) 0%,
            #f0f0f0 50%,
            var(--mg-bg-card) 100%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
    opacity: 0.7;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

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

/* Skeleton Table */
.skeleton-table {
    width: 100%;
    border-collapse: collapse;
    display: none;
    /* Hidden by default */
}

.skeleton-table thead th {
    padding: 12px;
    text-align: left;
    background: var(--mg-bg-card);
}

.skeleton-table tbody tr {
    border-bottom: 1px solid var(--mg-border);
}

.skeleton-table tbody td {
    padding: 16px 12px;
}

.skeleton-line {
    height: 20px;
    background: linear-gradient(90deg,
            #e0e0e0 0%,
            #f0f0f0 50%,
            #e0e0e0 100%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
    display: inline-block;
}

.skeleton-line.short {
    width: 60%;
}

.skeleton-line.medium {
    width: 80%;
}

.skeleton-line.long {
    width: 100%;
}

.skeleton-line.badge {
    width: 80px;
    height: 24px;
    border-radius: 12px;
}

/* Show skeleton when loading */
.mg-table-wrapper.loading .skeleton-table {
    display: table !important;
}

/* Hide real table when loading */
.mg-table-wrapper.loading>table:not(.skeleton-table),
.mg-table-wrapper.loading .dataTables_wrapper {
    display: none !important;
}

/* DataTables processing overlay - make it invisible but keep functionality */
.dataTables_processing {
    background: transparent !important;
    border: none !important;
    color: transparent !important;
    box-shadow: none !important;
}