/**
 * Global AJAX loading indicator styles.
 * Overlay is scoped to #app-content so the header/submenu chrome stays put.
 */

:root {
    /* Height of the app's fixed header + submenu (public/css/dsx4u.css sets
       body { padding-top: 100px } for the same reason) — keeps the spinner
       centered in the visible viewport band instead of behind the header. */
    --loading-header-offset: 100px;
}

/* Positioned to match #app-content's full (possibly tall) height without
   contributing to its layout height, so the sticky child below has a range
   to travel through as the page scrolls. */
.loading-overlay-anchor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1000;
}

.loading-overlay {
    position: sticky;
    top: var(--loading-header-offset);
    height: calc(100vh - var(--loading-header-offset));
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.65);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 150ms ease-in, visibility 0s linear 150ms;
}

.loading-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 150ms ease-out;
}

.loading-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 4px solid rgba(237, 126, 35, 0.18);
    border-top-color: #ed7e23;
    animation: loading-spinner-rotate 700ms linear infinite;
}

@keyframes loading-spinner-rotate {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading-overlay,
    .loading-overlay.is-visible {
        transition: opacity 1ms linear;
    }
    .loading-spinner {
        animation-duration: 1400ms;
    }
}

/* DataTables gets the app-wide indicator instead of its own "Processing"
   overlay — one shared rule instead of touching every DataTable init. */
.dataTables_processing {
    display: none !important;
}