/* SteelAxis OS — status pills
 *
 * Framework-agnostic CSS for the status pill system. Used by
 * components/StatusPill.razor in Blazor projects, or apply the
 * .sa-pill classes directly in plain HTML.
 *
 * Depends on tokens.css for the underlying colour variables.
 *
 * Six status kinds:
 *   - sa-pill--success (in stock, compliant, delivered)
 *   - sa-pill--warning (action required, pending review)
 *   - sa-pill--danger  (NCR open, blocked, failed)
 *   - sa-pill--info    (in transit, new, informational)
 *   - sa-pill--active  (in progress, primary brand state)
 *   - sa-pill--neutral (draft, archived, default)
 *
 * Four appearances:
 *   - sa-pill--tint    (default — soft bg, saturated text)
 *   - sa-pill--filled  (solid bg, contrasting text — emphasis)
 *   - sa-pill--outline (transparent bg, coloured border + text)
 *   - sa-pill--ghost   (transparent, just coloured text)
 */

.sa-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--sa-radius-pill);
  font-family: var(--sa-font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.005em;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}

.sa-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* ============================================================ */
/* Tint appearance (default)                                    */
/* ============================================================ */
.sa-pill--tint.sa-pill--success { background: var(--sa-status-success-bg); color: var(--sa-status-success-fg); }
.sa-pill--tint.sa-pill--warning { background: var(--sa-status-warning-bg); color: var(--sa-status-warning-fg); }
.sa-pill--tint.sa-pill--danger  { background: var(--sa-status-danger-bg);  color: var(--sa-status-danger-fg); }
.sa-pill--tint.sa-pill--info    { background: var(--sa-status-info-bg);    color: var(--sa-status-info-fg); }
.sa-pill--tint.sa-pill--active  { background: var(--sa-status-active-bg);  color: var(--sa-status-active-fg); }
.sa-pill--tint.sa-pill--neutral { background: var(--sa-status-neutral-bg); color: var(--sa-status-neutral-fg); }

.sa-pill--success .sa-pill__dot { background: var(--sa-status-success-dot); }
.sa-pill--warning .sa-pill__dot { background: var(--sa-status-warning-dot); }
.sa-pill--danger  .sa-pill__dot { background: var(--sa-status-danger-dot); }
.sa-pill--info    .sa-pill__dot { background: var(--sa-status-info-dot); }
.sa-pill--active  .sa-pill__dot { background: var(--sa-status-active-dot); }
.sa-pill--neutral .sa-pill__dot { background: var(--sa-status-neutral-dot); }

/* ============================================================ */
/* Filled appearance — solid bg, use for emphasis only          */
/* ============================================================ */
.sa-pill--filled.sa-pill--success { background: var(--sa-status-success-filled); color: var(--sa-status-success-on); }
.sa-pill--filled.sa-pill--warning { background: var(--sa-status-warning-filled); color: var(--sa-status-warning-on); }
.sa-pill--filled.sa-pill--danger  { background: var(--sa-status-danger-filled);  color: var(--sa-status-danger-on); }
.sa-pill--filled.sa-pill--info    { background: var(--sa-status-info-filled);    color: var(--sa-status-info-on); }
.sa-pill--filled.sa-pill--active  { background: var(--sa-status-active-filled);  color: var(--sa-status-active-on); }
.sa-pill--filled.sa-pill--neutral { background: var(--sa-status-neutral-filled); color: var(--sa-status-neutral-on); }
.sa-pill--filled .sa-pill__dot    { background: currentColor; opacity: 0.85; }

/* ============================================================ */
/* Outline appearance                                           */
/* ============================================================ */
.sa-pill--outline { background: transparent; border-style: solid; border-width: 1px; }
.sa-pill--outline.sa-pill--success { color: var(--sa-status-success-filled); border-color: var(--sa-status-success-filled); }
.sa-pill--outline.sa-pill--warning { color: var(--sa-status-warning-filled); border-color: var(--sa-status-warning-filled); }
.sa-pill--outline.sa-pill--danger  { color: var(--sa-status-danger-filled);  border-color: var(--sa-status-danger-filled); }
.sa-pill--outline.sa-pill--info    { color: var(--sa-status-info-filled);    border-color: var(--sa-status-info-filled); }
.sa-pill--outline.sa-pill--active  { color: var(--sa-status-active-filled);  border-color: var(--sa-status-active-filled); }
.sa-pill--outline.sa-pill--neutral { color: var(--sa-status-neutral-filled); border-color: var(--sa-status-neutral-filled); }

/* ============================================================ */
/* Ghost appearance — no bg, no border, just colour             */
/* ============================================================ */
.sa-pill--ghost { background: transparent; padding-left: 0; padding-right: 0; }
.sa-pill--ghost.sa-pill--success { color: var(--sa-status-success-filled); }
.sa-pill--ghost.sa-pill--warning { color: var(--sa-status-warning-filled); }
.sa-pill--ghost.sa-pill--danger  { color: var(--sa-status-danger-filled); }
.sa-pill--ghost.sa-pill--info    { color: var(--sa-status-info-filled); }
.sa-pill--ghost.sa-pill--active  { color: var(--sa-status-active-filled); }
.sa-pill--ghost.sa-pill--neutral { color: var(--sa-status-neutral-filled); }

/* ============================================================ */
/* Size variants — optional                                     */
/* ============================================================ */
.sa-pill--sm { padding: 2px 8px; font-size: 11px; gap: 5px; }
.sa-pill--sm .sa-pill__dot { width: 5px; height: 5px; }

.sa-pill--lg { padding: 6px 14px; font-size: 13px; gap: 8px; }
.sa-pill--lg .sa-pill__dot { width: 8px; height: 8px; }