/* Indikator proses bersama portal OPD & panel admin (dipakai oleh public/js/busy.js). */
:root {
    --busy-accent: #06508c;
    --busy-veil: rgba(245, 247, 250, .55);
    --busy-card-bg: #ffffff;
    --busy-card-fg: #1b2430;
}
html.dark {
    --busy-accent: #60a5fa;
    --busy-veil: rgba(9, 9, 11, .55);
    --busy-card-bg: #18181b;
    --busy-card-fg: #fafafa;
}

.busy-bar {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2147483000; pointer-events: none; opacity: 0;
    background: linear-gradient(90deg, transparent, var(--busy-accent), transparent) 0 0 / 40% 100% no-repeat;
    transition: opacity .15s;
}
.busy-overlay {
    position: fixed; inset: 0; z-index: 2147482999; display: grid; place-items: center; padding: 16px;
    background: var(--busy-veil);
    -webkit-backdrop-filter: blur(8px) saturate(.8); backdrop-filter: blur(8px) saturate(.8);
    opacity: 0; visibility: hidden; transition: opacity .15s, visibility 0s linear .15s;
}
.busy-card {
    display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; border-radius: 14px;
    background: var(--busy-card-bg); color: var(--busy-card-fg);
    font: 700 1.05rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    box-shadow: 0 20px 50px rgba(16, 24, 40, .22); transform: scale(.96); transition: transform .15s;
}
.busy-spinner {
    display: inline-block; width: 1.4em; height: 1.4em; flex-shrink: 0; border-radius: 50%;
    border: 3px solid var(--busy-accent); border-right-color: transparent; animation: busy-spin .7s linear infinite;
}

/* Muncul setelah 0,2 detik agar proses cepat tidak berkedip; menahan klik selama tampil. */
.is-busy .busy-bar { opacity: 1; transition-delay: .2s; animation: busy-slide 1.1s ease-in-out infinite; }
.is-busy-overlay .busy-overlay { opacity: 1; visibility: visible; transition: opacity .15s .2s, visibility 0s linear .2s; }
.is-busy-overlay .busy-card { transform: none; transition-delay: .2s; }

@keyframes busy-slide { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@keyframes busy-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .busy-bar, .busy-spinner { animation-duration: 2s !important; }
    .busy-overlay, .busy-card { transition: none !important; }
}