/* EVO TrustGuard — shared component primitives
 *
 * Owner:        /css/AGENTS.md
 * Cascade:      AFTER tokens.css + base.css + utilities.css.
 * Edit policy:  only put rules here that apply to 5+ pages today and use
 *               class names that are NOT page-prefixed (.svc-* / .ctr-* /
 *               .cct-* etc. stay in their owning page-[name].css). Adding
 *               a single page's rule here costs cascade clarity.
 *
 * What lives here (per C56 audit Section 5):
 *   - Spinner (.spinner + @keyframes spin) — 12-file duplicate, identical body
 *   - Status pill primitive (.status-pill + data-status attribute selectors,
 *     LOCKED C53 three-state vocabulary) — replaces ~30 ad-hoc rule blocks
 *   - Toast (.toast / .tg-toast / .clients-toast) — 5-file duplicate
 *   - Top-bar back button (.top-bar-back) — canonical 44×44 click target
 *
 * What does NOT live here:
 *   - Buttons — the audit confirmed no shared button class spans the portal;
 *     each page extends from its own variant. A token-driven .btn base class
 *     is a follow-up sprint, not bundled with extraction.
 *   - Cards — feature-prefixed (.client-card, .invoice-card, .svc-card,
 *     .ctr-card) by design (LOCKED C39, C41) to avoid collisions.
 *   - Modals / sheets — page-coupled to #svcModal / #cctModal / #quoteOverlay
 *     IDs that exist only in client-detail.html and (ported) purchased-lead.
 */

/* ── Spinner ──────────────────────────────────────────────────────────── *
 * Exact body shared across 12 portal files (audit Section 5). Token swap
 * applied to make dark-mode legibility automatic via the /css/tokens.css
 * --border / --red swap. */

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Toast ────────────────────────────────────────────────────────────── *
 * Used inline on clients.html / credits.html / reminders.html / etc.
 * Light-mode pill = dark fg + white bg via per-page rules; dark-mode pill
 * is repainted by /shared-themes.css. Centralizing the structural rule
 * here avoids the property-order drift the audit flagged. */

.toast,
.tg-toast,
.clients-toast {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: var(--space-3) var(--space-5);
  background: var(--dark);
  color: var(--white);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: var(--z-toast);
  max-width: calc(100vw - 40px);
  text-align: center;
}

.toast.show,
.tg-toast.show,
.clients-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Status pill (LOCKED C53 three-state vocabulary) ──────────────────── *
 * Token-driven attribute selectors. Page-specific pills (.svc-status-pill,
 * .ctr-status-pill, .client-status-pill, .contract-status-pill) keep their
 * specialized markup but can lean on these tokens for color values. */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: capitalize;
  background: var(--status-inactive-wash);
  color: var(--status-inactive);
}

.status-pill[data-status="active"] {
  background: var(--status-active-wash);
  color: var(--status-active);
}

.status-pill[data-status="pending"] {
  background: var(--status-pending-wash);
  color: var(--status-pending);
}

.status-pill[data-status="inactive"] {
  background: var(--status-inactive-wash);
  color: var(--status-inactive);
}

/* ── Subscription status pill (LOCKED C61 — distinct 4-state vocabulary) ─ *
 * Namespace prefix `.sub-status-*` keeps these out of the LOCKED C53 three-
 * state status-pill cascade. The four states map 1:1 to subscription_status
 * values in the users table (trialing / active / past_due / canceled). Tokens
 * reuse the existing status-pending / status-active / danger / status-inactive
 * palettes — dark-mode override happens automatically via the cascaded token
 * swap in /shared-themes.css. */

.sub-status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: capitalize;
  background: var(--status-inactive-wash);
  color: var(--status-inactive);
}

.sub-status-pill.sub-status-trialing {
  background: var(--status-pending-wash);
  color: var(--status-pending-hover);
}

.sub-status-pill.sub-status-active {
  background: var(--status-active-wash);
  color: var(--status-active-hover);
}

.sub-status-pill.sub-status-past_due {
  background: var(--danger-wash);
  color: var(--danger-hover);
}

.sub-status-pill.sub-status-canceled {
  background: var(--status-inactive-wash);
  color: var(--status-inactive);
}

/* ── Top-bar back button (canonicalized 44×44 click target) ───────────── *
 * Audit Section 5 flagged 2 variants — the smaller (40×40) and larger
 * (44×44) versions. WCAG 2.5.5 calls for 44×44 minimum, so the larger one
 * wins. Pages that use a smaller back button can override per-page. */

.top-bar-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  transition: background 0.15s ease;
}

.top-bar-back:hover {
  background: var(--surface-elevated);
}

.top-bar-back:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: var(--space-0-5);
}

.top-bar-back svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}