/* ============================================================
   PulseLoader — loader da marca Planeja+
   Cruz "+" de 5 quadradinhos: 4 braços azuis + centro verde,
   pulsando em sequência horária. Substitui o spin.js/blockUI
   do ABP via override global (Common/Scripts/pj-loader.js).
   ============================================================ */

.pj-loader {
    position: relative;
    display: inline-block;
    width: var(--pj-size, 48px);
    height: var(--pj-size, 48px);
    --pj-blue: #2E50C8;
    --pj-green: #10D080;
    --pj-dot: calc(var(--pj-size, 48px) * 0.27);
}

.pj-loader i {
    position: absolute;
    width: var(--pj-dot);
    height: var(--pj-dot);
    border-radius: calc(var(--pj-dot) * 0.3);
    background: var(--pj-blue);
    animation: pj-arm 1.2s ease-in-out infinite;
}

.pj-loader .t { left: 50%; top: 0; --b: translateX(-50%); }
.pj-loader .r { right: 0; top: 50%; --b: translateY(-50%); animation-delay: .15s; }
.pj-loader .b { left: 50%; bottom: 0; --b: translateX(-50%); animation-delay: .3s; }
.pj-loader .l { left: 0; top: 50%; --b: translateY(-50%); animation-delay: .45s; }

.pj-loader .c {
    left: 50%;
    top: 50%;
    --b: translate(-50%,-50%);
    background: var(--pj-green);
    animation-delay: .6s;
}

.pj-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(238,241,246,.72);
    backdrop-filter: blur(2px);
    z-index: 1000;
}

@keyframes pj-arm {
    0%, 100% { transform: var(--b) scale(.55); opacity: .25; }
    40% { transform: var(--b) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .pj-loader i { animation: none; opacity: 1; }
}

/* ----- Overlay de página inteira (busy sem elemento alvo) ----- */
/* fica fixo na viewport e acima de modais/drawers do app */
.pj-overlay--page {
    position: fixed;
    z-index: 100000;
}

/* host de elemento sem contexto de posicionamento próprio:
   garante que o overlay absoluto se ancore no alvo */
.pj-busy-host {
    position: relative !important;
}

/* ----- Variante pequena: botões com spinner ao salvar ----- */
.pj-overlay--btn {
    background: transparent;
    backdrop-filter: none;
}

.pj-overlay--btn .pj-loader {
    --pj-size: 20px;
}

/* botões azuis/primary: braços brancos + centro verde */
.pj-overlay--btn-light .pj-loader {
    --pj-blue: #fff;
}

/* dark mode: véu escuro para não "estourar" no fundo escuro */
[data-bs-theme="dark"] .pj-overlay {
    background: rgba(21,27,38,.72);
}