/* =====================================================================
   MedPayroll - processing loader (page load + every action)
   Used by Assets/js/mp-loader.js. Self-contained: no other CSS needed.
   ===================================================================== */

/* 1) Page load: shown from the first paint (html.mp-loading is set by the
      script in <head>) until the page has finished loading. A short delay
      keeps fast pages from flashing. */
html.mp-loading::before {
    content: ""; position: fixed; inset: 0; z-index: 99998;
    background: rgba(248, 250, 252, 0.72); backdrop-filter: blur(1px);
    opacity: 0; animation: mpFadeIn .15s ease .12s forwards;
}
html.mp-loading::after {
    content: ""; position: fixed; z-index: 99999; top: 50%; left: 50%;
    width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
    border: 4px solid #e0e7ff; border-top-color: #4f46e5;
    opacity: 0; animation: mpFadeIn .15s ease .12s forwards, mpSpin .8s linear infinite;
}

/* 2) Actions: buttons, postbacks, links, uploads */
#mpLoader {
    position: fixed; inset: 0; z-index: 100000; display: none;
    align-items: center; justify-content: center;
    background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px);
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}
#mpLoader.show { display: flex; animation: mpFadeIn .15s ease; }
#mpLoader .mp-box {
    background: #fff; border-radius: 14px; padding: 22px 28px; min-width: 240px; max-width: 90vw;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25); text-align: center;
}
#mpLoader .mp-spin {
    width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 50%;
    border: 4px solid #e0e7ff; border-top-color: #4f46e5; animation: mpSpin .8s linear infinite;
}
#mpLoader .mp-title { font-size: 15px; font-weight: 700; color: #0f172a; }
#mpLoader .mp-sub { font-size: 12.5px; color: #64748b; margin-top: 4px; }
#mpLoader .mp-bar { height: 4px; border-radius: 4px; background: #eef2ff; overflow: hidden; margin-top: 14px; }
#mpLoader .mp-bar i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, #4f46e5, #818cf8); border-radius: 4px; animation: mpSlide 1.1s ease-in-out infinite; }

/* button that started the action */
.mp-busy { opacity: .75; cursor: progress !important; }

@keyframes mpSpin { to { transform: rotate(360deg); } }
@keyframes mpFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mpSlide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

@media (prefers-reduced-motion: reduce) {
    #mpLoader .mp-spin, html.mp-loading::after { animation-duration: 2s; }
    #mpLoader .mp-bar i { animation: none; width: 100%; }
}

@media print { html.mp-loading::before, html.mp-loading::after, #mpLoader { display: none !important; } }