/* Prevent DataTables FOUC (Flash of Unstyled Content) */
.table-responsive table.display:not(.datatable-ready) {
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

table.display.datatable-ready {
    opacity: 1;
}

/* Hide skeleton when table is ready */
.datatable-loading-wrapper:has(.datatable-ready) .skeleton-loader {
    display: none !important;
}

/* Fallback for older browsers without :has() */
.datatable-ready-parent .skeleton-loader {
    display: none !important;
}

/* Skeleton Loading State */
.datatable-loading-wrapper {
    position: relative;
    min-height: 400px;
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    overflow: hidden;
}

.skeleton-row {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #f1f3f5;
}

.skeleton-cell {
    height: 18px;
    background: linear-gradient(90deg, #f8f9fa 25%, #e9ecef 50%, #f8f9fa 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
    flex: 1;
}

.skeleton-cell.sm { flex: 0.5; }
.skeleton-cell.lg { flex: 2; }

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

.dataTables_wrapper {
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}