/* Shared DataTables loading state — use on every application shell. */
.dataTables_wrapper,
.dt-container {
    position: relative;
}

.dataTables_wrapper .dataTables_processing:not([style*="display: none"]),
.dt-container .dt-processing:not([style*="display: none"]) {
    position: absolute !important;
    top: 58px !important;
    right: auto !important;
    bottom: 14px !important;
    left: 14px !important;
    z-index: 20 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: min(calc(100% - 28px), calc(100vw - 76px)) !important;
    height: auto !important;
    min-height: 140px;
    margin: 0 !important;
    padding: 20px !important;
    color: var(--ds-text-secondary, #9ca8bc) !important;
    background: color-mix(in srgb, var(--ds-bg-elevated, #101827) 88%, transparent) !important;
    border: 1px solid var(--ds-border-soft, rgba(148, 163, 184, .18)) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 42px rgba(2, 6, 23, .22) !important;
    font-size: .84rem;
    font-weight: 650;
    text-align: center;
    transform: none !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dataTables_wrapper .dataTables_processing > div,
.dt-container .dt-processing > div {
    display: none !important;
}

.dataTables_wrapper .dataTables_processing:not([style*="display: none"])::after,
.dt-container .dt-processing:not([style*="display: none"])::after {
    content: "";
    width: 9px;
    height: 9px;
    display: block;
    border-radius: 50%;
    background: var(--ds-accent, #3b82f6);
    box-shadow: 18px 0 0 rgba(var(--ds-accent-rgb, 59, 130, 246), .72), 36px 0 0 rgba(var(--ds-accent-rgb, 59, 130, 246), .42);
    transform: translateX(-18px);
    animation: ds-datatable-loading 900ms ease-in-out infinite alternate;
}

@keyframes ds-datatable-loading {
    from { opacity: .45; filter: brightness(.9); }
    to { opacity: 1; filter: brightness(1.22); }
}

@media (max-width: 767.98px) {
    .dataTables_wrapper .dataTables_processing:not([style*="display: none"]),
    .dt-container .dt-processing:not([style*="display: none"]) {
        width: min(calc(100% - 28px), calc(100vw - 76px)) !important;
        min-height: 132px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dataTables_wrapper .dataTables_processing:not([style*="display: none"])::after,
    .dt-container .dt-processing:not([style*="display: none"])::after { animation: none; }
}