/* ============================================================================
   Component: status badge
   ----------------------------------------------------------------------------
   Status is NEVER colour alone. Every badge carries an icon as well as its
   tint, so the ~8% of male users with colour-vision deficiency (roughly 40
   fathers in a 1,060-student school reading a fee statement) can still read
   it, and so it survives a monochrome print.

   Tones map to the semantic soft surfaces, which are contrast-paired in both
   themes — see tokens.css for the measured ratios.
   ========================================================================== */
.aq-badge{
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  border: 1px solid transparent;
  background: var(--status-neutral-bg);
  color: var(--status-neutral-fg);
}
.aq-badge .bi{ font-size: 1em; line-height: 1; }

.aq-badge--success{ background: var(--status-success-bg); color: var(--status-success-fg); }
.aq-badge--warning{ background: var(--status-warning-bg); color: var(--status-warning-fg); }
.aq-badge--danger { background: var(--status-danger-bg);  color: var(--status-danger-fg);  }
.aq-badge--info   { background: var(--status-info-bg);    color: var(--status-info-fg);    }
.aq-badge--neutral{ background: var(--status-neutral-bg); color: var(--status-neutral-fg); }

/* Brand tone — for "current session", tenant-context chips and similar. */
.aq-badge--brand{
  background: var(--brand-subtle);
  color: var(--nav-active-fg);
  border-color: var(--line);
}

/* Outlined variant for dense tables, where a filled chip per row is noise. */
.aq-badge--outline{
  background: transparent;
  border-color: currentColor;
}