/*
  status-chips.css — Nium Portal Status Chip System
  ───────────────────────────────────────────────────
  Link after tokens.css and typography.css.

  <link rel="stylesheet" href="status-chips.css">

  CANONICAL PATTERN:
    <span class="chip chip--success">
      <span class="chip__dot"></span>
      Verified
    </span>

  Legacy class aliases (.dt-badge-*, .card-badge-*, .status-tag-*)
  are mapped here so existing pages continue to work without HTML changes.

  STATES:
    success   — Verified, Approved, Validated, Active, Completed
    danger    — Rejected, Failed, Upload failed, Expired
    warning   — Pending, Expiring soon, Submitted for approval
    info      — Processing, Frozen, Scheduled, Uploaded
    neutral   — Cancelled, Inactive, Draft
    attention — Action required, RFI
*/

/* ── Base chip ─────────────────────────────────────────────────────────── */

.chip,
[class^="chip--"],
[class*=" chip--"] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-tag-size, 11.5px);
  font-weight: var(--text-tag-weight, 500);
  font-family: inherit;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: var(--text-line-height-tight, 1.2);
}

.chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── State variants ─────────────────────────────────────────────────────── */

.chip--success {
  background: var(--color-chip-success-bg);
  color: var(--color-chip-success-text);
}
.chip--success .chip__dot { background: var(--color-success-dot); }

.chip--danger {
  background: var(--color-chip-danger-bg);
  color: var(--color-chip-danger-text);
}
.chip--danger .chip__dot { background: var(--color-danger-dot); }

.chip--warning {
  background: var(--color-chip-warning-bg);
  color: var(--color-chip-warning-text);
}
.chip--warning .chip__dot { background: var(--color-warning-text-dark); }

.chip--info {
  background: var(--color-chip-info-bg);
  color: var(--color-chip-info-text);
}
.chip--info .chip__dot { background: var(--color-chip-info-text); }

.chip--neutral {
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}
.chip--neutral .chip__dot { background: var(--color-neutral-dot); }

.chip--attention {
  background: var(--color-attention-bg);
  color: var(--color-attention-text);
}
.chip--attention .chip__dot { background: var(--color-attention-text); }

/* ── Legacy aliases — dt-badge-* (payouts, transactions) ───────────────── */

.dt-badge-approved,
.dt-badge-validated { background: var(--color-chip-success-bg); color: var(--color-chip-success-text); }

.dt-badge-rejected,
.dt-badge-failed    { background: var(--color-chip-danger-bg);  color: var(--color-chip-danger-text); }

.dt-badge-pending,
.dt-badge-partial   { background: var(--color-chip-warning-bg); color: var(--color-chip-warning-text); }

.dt-badge-submitted { background: var(--color-chip-info-bg);    color: var(--color-chip-info-text); }

.dt-badge-uploaded,
.dt-badge-cancelled { background: var(--color-bg-secondary);    color: var(--color-text-label); }

/* ── Legacy aliases — card-badge-* (cards overview) ────────────────────── */

.card-badge-active,
.card-badge-completed { background: var(--color-chip-success-bg); color: var(--color-chip-success-text); }

.card-badge-expired   { background: var(--color-chip-danger-bg);  color: var(--color-chip-danger-text); }

.card-badge-pending,
.card-badge-scheduled { background: var(--color-chip-warning-bg); color: var(--color-chip-warning-text); }

.card-badge-frozen    { background: var(--color-chip-info-bg);    color: var(--color-chip-info-text); }

.card-badge-cancelled { background: var(--color-bg-secondary);    color: var(--color-text-label); }

/* ── Legacy aliases — status-tag-* (transactions) ───────────────────────── */

.status-tag-success,
.status-completed { background: var(--color-success-tag-bg); color: var(--color-success-text); }

.status-tag-danger,
.status-failed    { background: var(--color-danger-tag-bg);  color: var(--color-danger-text); }

.status-pending   { background: var(--color-warning-tag-bg); color: var(--color-warning-tag-text); }
.status-converted { background: var(--color-info-tag-bg);    color: var(--color-info-tag-text); }

/* ── Dot-only status indicators (table rows, sidebar) ───────────────────── */

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot--success  { background: var(--color-success-dot); }
.status-dot--danger   { background: var(--color-danger-dot); }
.status-dot--warning  { background: var(--color-warning-text-dark); }
.status-dot--info     { background: var(--color-chip-info-text); }
.status-dot--neutral  { background: var(--color-neutral-dot); }
.status-dot--live     { background: var(--color-success-btn); }

/* ── Live badge (Verify page header) ────────────────────────────────────── */

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: 999px;
  font-size: var(--text-tag-size, 11.5px);
  font-weight: var(--text-tag-weight, 500);
  color: var(--color-warning-text);
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success-btn);
  flex-shrink: 0;
  animation: live-pulse 1.8s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}