/**
 * assets/css/modules/customers.css — Customers screen styles + a first
 * pass at the single shared "pill" component docs/CURRENT_SYSTEM_AUDIT.md
 * §3.3 and docs/PHASE_STATUS.md call for (currently 4 separate, mutually
 * inconsistent badge/pill class families exist in app.css: .badge-status,
 * .pill-badge, .badge-pill, .status-badge).
 *
 * This does NOT touch or replace any of those four — that's a larger,
 * separate migration (PHASE_STATUS.md item #8) that needs every existing
 * call site updated together, not done piecemeal as a side effect of
 * building one new screen. `.cust-pill` is scoped to this module only, but
 * built against the app's real design tokens (--success/--warning/--danger/
 * --info + their -light/-text variants, all already defined in app.css)
 * rather than inventing new colors — so this is a reasonable reference
 * point for what the eventual single `.ot-pill` family should look like.
 */

.cust-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-weight: 600;
    font-size: 0.72rem;
    padding: 0.28em 0.7em;
    border-radius: var(--radius-full, 999px);
    white-space: nowrap;
}

.cust-pill-new { background: var(--info-light); color: var(--accent-dark); }
.cust-pill-repeat { background: var(--success-light); color: var(--success-text); }
.cust-pill-at-risk { background: var(--warning-light); color: var(--warning-text); }
.cust-pill-inactive { background: var(--danger-light); color: var(--danger-text); }
.cust-pill-muted { background: var(--bg-surface-2); color: var(--text-muted); }
.cust-pill-count { background: var(--bg-surface-2); color: var(--text-secondary); }
.cust-pill-vip { background: linear-gradient(135deg, #FFE8B8, #FFC96B); color: #7A4E00; }

.cust-chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.cust-row:hover {
    background: var(--bg-surface-2);
}