/*
 * AC POS — "the system is never silent" UX layer (2026-09-29).
 * A spinner + status on any control that starts a slow operation, a staged full-screen overlay for the long ones
 * (login, backup, exports), and a top progress bar on pages that have no Pace bar (the auth screens). Brand colours
 * from acpos-theme.css, with a safe fallback so it also works on the sign-in layout that does not load that file.
 * Presentation only; the behaviour is in ac-busy.js.
 */
:root { --acb-primary: var(--ac-primary, #1F4E79); --acb-primary-50: var(--ac-primary-50, #EEF4FA); }

@keyframes acb-spin { to { transform: rotate(360deg); } }
@keyframes acb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes acb-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }

/* a control that is working: a spinner before its label, dimmed, no pointer */
.acb-busy { position: relative; opacity: .72; cursor: progress !important; pointer-events: none; }
.acb-busy > .acb-spin { display: inline-block; vertical-align: -2px; margin-inline-end: 7px; }
.acb-spin { width: 1em; height: 1em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: acb-spin .6s linear infinite; box-sizing: border-box; }

/* the top progress bar (only where Pace is absent) */
.acb-topbar { position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: 100000; background: transparent; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .2s; }
.acb-topbar.on { opacity: 1; }
.acb-topbar::before { content: ""; position: absolute; inset-block: 0; inline-size: 25%; background: linear-gradient(90deg, transparent, var(--acb-primary), transparent); animation: acb-bar 1.1s ease-in-out infinite; }

/* the staged full-screen overlay */
.acb-overlay { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); animation: acb-fade .12s ease-out; }
.acb-overlay[hidden] { display: none !important; }
.acb-card { background: #fff; color: #111827; border-radius: 18px; box-shadow: 0 24px 60px rgba(15, 23, 42, .32); padding: 30px 34px; text-align: center; max-width: 380px; width: 100%; }
.acb-ring { width: 54px; height: 54px; margin: 0 auto 16px; border: 4px solid var(--acb-primary-50); border-top-color: var(--acb-primary); border-radius: 50%; animation: acb-spin .7s linear infinite; }
.acb-status { font-size: 18px; font-weight: 800; line-height: 1.6; min-height: 1.6em; color: #111827; transition: opacity .15s; }
.acb-status.acb-swap { opacity: 0; }
.acb-sub { margin-top: 6px; font-size: 13px; color: #6B7280; }
.acb-count { margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--acb-primary); font-variant-numeric: tabular-nums; unicode-bidi: plaintext; }

/* a real percentage (imports): a bar with its number */
.acb-meter { position: relative; height: 16px; margin: 14px 0 4px; border-radius: 999px; background: var(--acb-primary-50); overflow: hidden; }
.acb-meter > i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--acb-primary), #3B82C4); transition: width .35s ease; }
.acb-meter > b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #0f172a; text-shadow: 0 0 3px #fff, 0 0 2px #fff; }
.acb-meter[hidden] { display: none !important; }
.acb-actions { margin-top: 16px; }
.acb-actions[hidden] { display: none !important; }
.acb-cancel { min-height: 40px; padding: 0 18px; border-radius: 10px; border: 1px solid #E5E7EB; background: #F9FAFB; color: #B91C1C; font-weight: 800; font-family: inherit; cursor: pointer; }
.acb-cancel:hover { background: #FEF2F2; border-color: #FCA5A5; }
.acb-cancel:disabled { opacity: .55; cursor: default; }
.acb-count[hidden], .acb-sub[hidden] { display: none !important; }

/* a small status pill at the bottom (a file being prepared — the page itself stays usable) */
.acb-pill { position: fixed; inset-block-end: 22px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 100000; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: #0f172a; color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 12px 30px rgba(15, 23, 42, .3); animation: acb-fade .12s ease-out; }
[dir=rtl] .acb-pill { transform: translateX(50%); }
.acb-pill[hidden] { display: none !important; }
.acb-pill .acb-spin { width: 16px; height: 16px; color: #93C5FD; }

/* an inline block-level loader (for a section fetching its data) */
.acb-inline { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 26px 12px; color: #6B7280; font-weight: 700; }
.acb-inline .acb-spin { color: var(--acb-primary); width: 20px; height: 20px; border-width: 3px; }

@media (max-width: 480px) { .acb-card { padding: 24px 20px; } }
@media print { .acb-overlay, .acb-topbar { display: none !important; } }