/* ======================================================================
 * App loader — full-screen branded loading overlay (page open / navigation /
 * long actions) plus the same logo+ring treatment for DataTables' own
 * "processing" indicator.
 *
 *   markup:  views/templates/app_loader.php  (included right after <body>)
 *   script:  assets/custom/shared/app-loader.js  -> window.AppLoader.show()/hide()
 * ====================================================================== */

.app-loader {
    --app-loader-gold: var(--app-primary, #c9a227);
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .98) 0%, rgba(248, 241, 224, .97) 60%, rgba(242, 230, 200, .97) 100%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 1;
    visibility: visible;
    transition: opacity .35s ease, visibility .35s ease;
}

.app-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* If the script that normally hides the boot overlay never runs, fade it out on its own
   so a JS error can never leave the site covered. Removed (is-boot) once the page is ready. */
.app-loader.is-boot {
    animation: appLoaderFailsafe .01s linear 20s forwards;
}

@keyframes appLoaderFailsafe {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

.app-loader__mark {
    position: relative;
    width: 116px;
    height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-loader__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(201, 162, 39, .16);
    border-top-color: var(--app-loader-gold);
    animation: appLoaderSpin 1.05s linear infinite;
}

.app-loader__ring--inner {
    inset: 11px;
    border-width: 2px;
    border-top-color: transparent;
    border-bottom-color: rgba(201, 162, 39, .6);
    animation-duration: 1.7s;
    animation-direction: reverse;
}

.app-loader__logo {
    width: 66px;
    height: 66px;
    object-fit: contain;
    animation: appLoaderPulse 1.7s ease-in-out infinite;
    filter: drop-shadow(0 4px 10px rgba(169, 130, 29, .25));
}

.app-loader__text {
    min-height: 1.3em;
    font-size: .92rem;
    font-weight: 700;
    color: var(--app-text-muted, #6b7280);
    letter-spacing: .01em;
}

.app-loader__bar {
    width: 140px;
    height: 3px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(201, 162, 39, .18);
}

.app-loader__bar::after {
    content: '';
    display: block;
    width: 45%;
    height: 100%;
    border-radius: 3px;
    background: var(--app-loader-gold);
    animation: appLoaderSlide 1.2s ease-in-out infinite;
}

@keyframes appLoaderSpin {
    to { transform: rotate(360deg); }
}

@keyframes appLoaderPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(.9); opacity: .85; }
}

@keyframes appLoaderSlide {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(260%); }
}

html.app-loading {
    overflow: hidden;
}

/* ---- DataTables processing indicator (every table in the app) ---- */
div.dataTables_wrapper {
    position: relative;
}

div.dataTables_wrapper div.dataTables_processing {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 30;
    border: 0 !important;
    border-radius: var(--app-radius-md, 10px);
    background: rgba(255, 255, 255, .74) !important;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    box-shadow: none !important;
    font-size: 0 !important;
    color: transparent !important;
    overflow: hidden;
}

div.dataTables_wrapper div.dataTables_processing > * {
    display: none !important;
}

div.dataTables_wrapper div.dataTables_processing::before,
div.dataTables_wrapper div.dataTables_processing::after {
    content: '';
    position: absolute;
    top: min(50%, 180px);
    left: 50%;
}

div.dataTables_wrapper div.dataTables_processing::before {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    border: 3px solid rgba(201, 162, 39, .18);
    border-top-color: var(--app-primary, #c9a227);
    animation: appLoaderSpin 1s linear infinite;
}

div.dataTables_wrapper div.dataTables_processing::after {
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    background: url('../../img/orphan-logo-64.png') center / contain no-repeat;
    animation: appLoaderPulse 1.7s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .app-loader__ring,
    .app-loader__logo,
    .app-loader__bar::after,
    div.dataTables_wrapper div.dataTables_processing::before,
    div.dataTables_wrapper div.dataTables_processing::after {
        animation-duration: 3s;
    }
}

/* ---- In-place loader (AppLoader.inlineShow / inlineError): tabs, panels loaded by ajax ---- */
.app-inline-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    min-height: 320px;
    padding: 2rem 1rem;
    text-align: center;
    animation: appInlineFade .25s ease;
}

.app-inline-loader__mark .app-loader__mark {
    width: 92px;
    height: 92px;
}

.app-inline-loader__mark .app-loader__logo {
    width: 50px;
    height: 50px;
}

.app-inline-loader__mark .app-loader__ring--inner {
    inset: 9px;
}

.app-inline-loader .app-loader__text {
    color: var(--app-text-muted, #6b7280);
}

.app-inline-loader__icon {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--app-danger, #e74a3b);
    background: rgba(231, 74, 59, .12);
}

@keyframes appInlineFade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

/* ---- Overlay scoped to one modal (.modal-content) instead of the whole screen ---- */
.app-loader--scoped {
    position: absolute;
    inset: 0;
    z-index: 70;
    gap: .8rem;
    border-radius: inherit;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: appInlineFade .2s ease;
}

.app-loader--scoped .app-loader__mark {
    width: 84px;
    height: 84px;
}

.app-loader--scoped .app-loader__logo {
    width: 46px;
    height: 46px;
}

.app-loader--scoped .app-loader__ring--inner {
    inset: 9px;
}

.has-app-loader {
    min-height: 220px;
}