/**
 * Smart Collect — semantic status tokens & focus (UX-DR2).
 * All rules scoped under .smartcollect-scope so WHMCS admin/client chrome is unaffected.
 *
 * Contrast notes: see docs/accessibility.md (WCAG 2.2 AA targets for normal text on pill backgrounds).
 */

.smartcollect-scope {
  /* Status surfaces (background tints). Pair with .sc-status-label text — never color alone (UX-DR2, AC5). */
  --sc-pending: #e9ecef;
  --sc-detected: #d1fae5;
  --sc-paid: #bbf7d0;
  --sc-credited: #a7f3d0;
  --sc-partial: #fef3c7;
  --sc-needs-review: #dbeafe;

  /* Readable text on each tint (normal text ≥ 4.5:1 vs background — verified in docs/accessibility.md) */
  --sc-on-pending: #212529;
  --sc-on-detected: #0f766e;
  --sc-on-paid: #14532d;
  --sc-on-credited: #064e3b;
  --sc-on-partial: #78350f;
  --sc-on-needs-review: #1e40af;

  /* Focus rings — interactive controls within addon markup */
  --sc-focus-ring-color: #2563eb;
  --sc-focus-ring-width: 3px;
}

/* Focus-visible: keyboard / AT; avoid mouse-click ring noise where browser supports :focus-visible */
.smartcollect-scope a:focus-visible,
.smartcollect-scope button:focus-visible,
.smartcollect-scope input:focus-visible,
.smartcollect-scope select:focus-visible,
.smartcollect-scope textarea:focus-visible {
  outline: var(--sc-focus-ring-width) solid var(--sc-focus-ring-color);
  outline-offset: 2px;
}

/* Status pill: background from token + mandatory visible label (pattern for Epic 5 partials) */
.smartcollect-scope .sc-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid transparent;
}

.smartcollect-scope .sc-status-pending {
  background-color: var(--sc-pending);
  color: var(--sc-on-pending);
  border-color: rgba(0, 0, 0, 0.06);
}

.smartcollect-scope .sc-status-detected {
  background-color: var(--sc-detected);
  color: var(--sc-on-detected);
  border-color: rgba(15, 118, 110, 0.25);
}

.smartcollect-scope .sc-status-paid {
  background-color: var(--sc-paid);
  color: var(--sc-on-paid);
  border-color: rgba(20, 83, 45, 0.2);
}

.smartcollect-scope .sc-status-credited {
  background-color: var(--sc-credited);
  color: var(--sc-on-credited);
  border-color: rgba(6, 78, 59, 0.2);
}

.smartcollect-scope .sc-status-partial {
  background-color: var(--sc-partial);
  color: var(--sc-on-partial);
  border-color: rgba(120, 53, 15, 0.2);
}

.smartcollect-scope .sc-status-needs-review {
  background-color: var(--sc-needs-review);
  color: var(--sc-on-needs-review);
  border-color: rgba(30, 64, 175, 0.25);
}

/* Story 2.3: split panel — instructions (primary) vs status (secondary); mobile stacks status first (order utilities in markup). */
.smartcollect-scope.sc-payment-panel .sc-payment-row {
  align-items: stretch;
}

.smartcollect-scope .sc-payment-card,
.smartcollect-scope .sc-status-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.smartcollect-scope .sc-receiver-dl .sc-receiver-dt {
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
  margin-bottom: 0.25rem;
}

@media (min-width: 576px) {
  .smartcollect-scope .sc-receiver-dl .sc-receiver-dt {
    margin-bottom: 0;
  }
}

.smartcollect-scope .sc-receiver-dl .sc-receiver-dd {
  margin-bottom: 0.5rem;
  word-break: break-word;
}

@media (min-width: 576px) {
  .smartcollect-scope .sc-receiver-dl .sc-receiver-dd {
    margin-bottom: 0.35rem;
  }
}