/*
 * app-ui.css — shared loading affordances for the admin panel.
 *
 * Two pieces:
 *   1. Button loaders  (.app-btn-is-loading + .app-btn-spinner) — driven by app-ui.js
 *      whenever a save/submit control kicks off a request.
 *   2. Page overlay    (#app-page-loader) — shown while a non-ajax form POST navigates.
 *
 * The spinner is drawn with `currentColor`, so it reads correctly on every button
 * variant (btn-success, btn-light, outline buttons, dark theme) without per-theme rules.
 */

/* ---------------------------------------------------------------- button loader */

.app-btn-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .45em;
    vertical-align: -.125em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: .85;
    animation: app-btn-spin .6s linear infinite;
}

@keyframes app-btn-spin {
    to { transform: rotate(360deg); }
}

.app-btn-is-loading {
    pointer-events: none;
    cursor: progress;
    opacity: .85;
    transition: opacity .2s ease;
}

/* Anchors styled as buttons have no `disabled` attribute to lean on. */
a.app-btn-is-loading,
.app-btn-is-loading[aria-disabled="true"] {
    pointer-events: none;
}

/* Respect the OS "reduce motion" setting: hold a static ring instead of spinning. */
@media (prefers-reduced-motion: reduce) {
    .app-btn-spinner { animation-duration: 2.4s; }
}

/* ------------------------------------------------------------------ page loader */

#app-page-loader {
    position: fixed;
    z-index: 49999;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

#app-page-loader.is-visible {
    opacity: 1;
    visibility: visible;
}

.dark-theme #app-page-loader {
    background: rgba(22, 25, 47, .72);
}

#app-page-loader .app-page-loader-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    border-radius: 8px;
    background: #fff;
    color: #3c4858;
    font-size: 14px;
    box-shadow: 0 8px 24px rgba(28, 39, 60, .18);
    transform: translateY(8px) scale(.98);
    transition: transform .25s ease;
}

#app-page-loader.is-visible .app-page-loader-box {
    transform: translateY(0) scale(1);
}

.dark-theme #app-page-loader .app-page-loader-box {
    background: #1e2448;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

#app-page-loader .app-page-loader-ring {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: 3px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: .8;
    animation: app-btn-spin .6s linear infinite;
}

/* --------------------------------------------------------------- block overlay  */
/* Used by appBlock($el) to cover a card/modal body while it refreshes. */

.app-block-host { position: relative; }

.app-block-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .65);
    opacity: 0;
    transition: opacity .2s ease;
}

.app-block-overlay.is-visible { opacity: 1; }

.dark-theme .app-block-overlay { background: rgba(30, 36, 72, .65); }

.app-block-overlay .app-block-ring {
    width: 26px;
    height: 26px;
    border: 3px solid #6c757d;
    border-right-color: transparent;
    border-radius: 50%;
    animation: app-btn-spin .6s linear infinite;
}

.dark-theme .app-block-overlay .app-block-ring { border-color: #fff; border-right-color: transparent; }