/* ==========================================================================
   AIO ERP — Brand Loaders
   Built from the AIO ERP icon (2x2 white/gold module grid on navy #1E3A6F).
   Variants: cascade (app) · spin (CMS/website) · pulse (auth)
   Pure CSS, no JS. Honors prefers-reduced-motion.
   ========================================================================== */

.aio-loader {
    --aio-loader-size: 72px;
    --aio-navy: #1E3A6F;
    --aio-gold: #D4A24C;
    --aio-blue: #147cbb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.aio-loader svg {
    width: var(--aio-loader-size);
    height: var(--aio-loader-size);
    display: block;
}
.aio-loader .aio-tile { transform-box: fill-box; transform-origin: center; }

/* ── Full-screen frosted overlay (CMS + auth; app reuses its own #page-loader) ── */
.aio-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(15px) saturate(140%);
    -webkit-backdrop-filter: blur(15px) saturate(140%);
    transition: opacity 0.4s ease;
}
.aio-loader-overlay.is-hidden { opacity: 0; pointer-events: none; }

/* ============ CASCADE — modules load in one by one (app) ============ */
.aio-loader--cascade .aio-tile { animation: aio-cascade 1.8s cubic-bezier(.5, 0, .3, 1) infinite; }
.aio-loader--cascade .aio-t1 { animation-delay: 0s; }
.aio-loader--cascade .aio-t2 { animation-delay: .15s; }
.aio-loader--cascade .aio-t4 { animation-delay: .30s; }
.aio-loader--cascade .aio-t3 { animation-delay: .45s; }
@keyframes aio-cascade {
    0%   { opacity: 0; transform: scale(.2) rotate(-25deg); }
    25%  { opacity: 1; transform: scale(1) rotate(0); }
    70%  { opacity: 1; transform: scale(1) rotate(0); }
    100% { opacity: .15; transform: scale(.82) rotate(0); }
}

/* ============ SPIN — snap-rotating grid (CMS / website) ============ */
.aio-loader--spin .aio-qgroup {
    transform-box: fill-box;
    transform-origin: center;
    animation: aio-qspin 2.4s cubic-bezier(.7, 0, .2, 1) infinite;
}
@keyframes aio-qspin {
    0%   { transform: rotate(0); }    18% { transform: rotate(90deg); }  25% { transform: rotate(90deg); }
    43%  { transform: rotate(180deg); } 50% { transform: rotate(180deg); }
    68%  { transform: rotate(270deg); } 75% { transform: rotate(270deg); }
    93%  { transform: rotate(360deg); } 100% { transform: rotate(360deg); }
}

/* ============ PULSE — diagonal heartbeat + gradient ring (auth) ============ */
.aio-loader--pulse { position: relative; }
.aio-loader--pulse .aio-gring {
    position: absolute;
    inset: calc(var(--aio-loader-size) * -0.16);
    border-radius: 24px;
    background: conic-gradient(from 0deg, transparent, var(--aio-blue) 120deg, var(--aio-gold) 300deg, transparent 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
    animation: aio-ringspin 1.4s linear infinite;
    opacity: .9;
}
.aio-loader--pulse .aio-white-pair { animation: aio-pulseA 1.6s ease-in-out infinite; }
.aio-loader--pulse .aio-gold-pair  { animation: aio-pulseB 1.6s ease-in-out infinite; }
@keyframes aio-pulseA { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .55; } }
@keyframes aio-pulseB { 0%, 100% { transform: scale(.7); opacity: .55; } 50% { transform: scale(1); opacity: 1; } }
@keyframes aio-ringspin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .aio-loader * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* Shared table date treatment, matching the sell index two-line date/time cell. */
body.premium-ui .aio-date-cell,
body.premium-ui .premium-report-date-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    min-width: 85px;
    white-space: nowrap;
    line-height: 1.2;
}

body.premium-ui .aio-date-cell__date {
    color: var(--foreground, #0f172a);
    font-weight: 400;
}

body.premium-ui .aio-date-cell__time,
body.premium-ui .premium-report-date-cell__time {
    display: block;
    color: var(--muted-foreground, #64748b);
    font-size: 12px;
    font-weight: 500;
}

body.premium-ui td.aio-date-cell-td {
    vertical-align: middle !important;
}

body.premium-ui .swal2-image {
    width: 64px !important;
    height: 64px !important;
    max-height: 64px !important;
    object-fit: contain !important;
}

body.premium-ui .swal2-image.aio-swal-brand-loader {
    animation: aio-qspin 2.4s cubic-bezier(.7, 0, .2, 1) infinite;
    transform-origin: center;
}

html.dark-mode body.premium-ui .aio-date-cell__date,
body.dark-mode.premium-ui .aio-date-cell__date {
    color: var(--foreground, #f8fafc);
}