/* ============================================================
   FLUXATH CRM — Stripe-inspired display primitives
   (Phase 2C of stripe-reskin-2026-05-24)

   Scope: badges (.badge, .badge.red, status badges via
   --status-* tokens), chips / tags / pills (.chip, .pill-tag),
   avatars (.user-avatar, .topbar-avatar), empty states
   (.empty-state), loading skeletons (.skel, .skeleton).

   Rules consume tokens from tokens-stripe.css (--rad-pill,
   --type-micro-cap, --type-caption, --ease-stripe). Color tokens
   stay sourced from style.css.

   NO template logic edits. NO data-action wiring changes. CSS only.
   ============================================================ */

/* ============================================================
   1. BASE BADGE
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: var(--rad-pill);
  background: var(--bg-elev);
  color: var(--ink-dim);
  font: var(--type-micro-cap);
  letter-spacing: var(--tracking-micro-cap);
  text-transform: uppercase;
  font-feature-settings: var(--font-feat-base);
  white-space: nowrap;
  line-height: 1.4;
}

.badge.red {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Nav-link badge overrides stay in style.css; these are lower-specificity
   defaults that apply everywhere else a .badge appears. */

/* ============================================================
   2. STATUS BADGES
   ============================================================ */

.badge.status-new {
  background: var(--status-new);
  color: var(--status-new-text);
}
.badge.status-contacted {
  background: var(--status-contacted);
  color: var(--status-contacted-text);
}
.badge.status-interested {
  background: var(--status-interested);
  color: var(--status-interested-text);
}
.badge.status-proposal-sent {
  background: var(--status-proposal-sent);
  color: var(--status-proposal-sent-text);
}
.badge.status-booked-meeting {
  background: var(--status-booked-meeting);
  color: var(--status-booked-meeting-text);
}
.badge.status-closed {
  background: var(--status-closed);
  color: var(--status-closed-text);
}
.badge.status-active-client {
  background: var(--status-active-client);
  color: var(--status-active-client-text);
}
.badge.status-built-website {
  background: var(--status-built-website);
  color: var(--status-built-website-text);
}
.badge.status-called {
  background: var(--status-called);
  color: var(--status-called-text);
}
.badge.status-no-pick-up {
  background: var(--status-no-pick-up);
  color: var(--status-no-pick-up-text);
}
.badge.status-disqualified {
  background: var(--status-disqualified);
  color: var(--status-disqualified-text);
}
.badge.status-bad-data {
  background: var(--status-bad-data);
  color: var(--status-bad-data-text);
}

/* ============================================================
   3. CHIPS / TAGS / PILLS
   ============================================================ */

.chip,
.pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--rad-pill);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--ink-dim);
  font: var(--type-caption);
  letter-spacing: var(--tracking-caption);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-stripe),
              background var(--dur-fast) var(--ease-stripe),
              border-color var(--dur-fast) var(--ease-stripe);
}

.chip:hover,
.pill-tag:hover {
  color: var(--ink);
  background: var(--bg-hover);
  border-color: var(--border-bright);
  text-decoration: none;
}

/* Active/selected state (used by inbox-toolbar .chip.on) */
.chip.on,
.pill-tag.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* Removable chip — × suffix */
.chip.removable::after {
  content: "×";
  font-size: 1.1em;
  line-height: 1;
  opacity: 0.55;
  margin-left: 2px;
  transition: opacity var(--dur-instant) var(--ease-stripe);
}
.chip.removable:hover::after { opacity: 1; }

/* ── Streak chip — preserve 🔥 prefix, just restyle the chrome ── */
.streak-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--rad-pill);
  font: var(--type-caption);
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  /* Warm orange gradient background & border unchanged — they're semantic
     for the streak indicator. Use the existing color tokens closest to the
     original orange-fire palette (warn + warn-soft). */
  background: linear-gradient(135deg, var(--warn-soft), rgba(220, 38, 38, 0.08));
  border: 1px solid rgba(217, 119, 6, 0.35);
  color: var(--warn);
}

/* ============================================================
   4. AVATARS
   ============================================================ */

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font: var(--type-button-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  letter-spacing: 0;
  user-select: none;
}

.topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font: var(--type-button-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 4px;
  overflow: hidden;
  user-select: none;
  transition: box-shadow var(--dur-fast) var(--ease-stripe);
}

.topbar-avatar:hover {
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.acct-header-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font: var(--type-button-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  user-select: none;
}

/* When a photo <img> is inside any avatar, let it fill the circle */
.user-avatar img,
.topbar-avatar img,
.acct-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ============================================================
   5. EMPTY STATE
   ============================================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 48px 24px;
  border: 1px dashed var(--border);
  border-radius: var(--rad-lg);
}

.empty-state .icon,
.empty-state > .empty-icon {
  font-size: 48px;
  opacity: 0.3;
  line-height: 1;
}

.empty-state h3,
.empty-state .empty-title {
  font: var(--type-heading-md);
  color: var(--ink);
  margin: 0;
}

.empty-state p,
.empty-state .empty-sub {
  font: var(--type-body-md);
  color: var(--ink-dim);
  max-width: 320px;
  margin: 0;
}

.empty-state .btn { margin-top: 4px; }

/* ============================================================
   6. LOADING SKELETONS
   ============================================================ */

@keyframes skel-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.skel,
.skel-line,
.skel-circle,
.skel-card {
  background: linear-gradient(
    90deg,
    var(--bg-elev)   0%,
    var(--bg-hover)  50%,
    var(--bg-elev)   100%
  );
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s var(--ease-stripe) infinite;
}

.skel {
  border-radius: var(--rad-xs);
  display: block;
}

.skel-line {
  display: block;
  height: 1em;
  border-radius: var(--rad-xs);
  margin-bottom: 6px;
}

.skel-circle {
  display: block;
  border-radius: 50%;
  /* caller sets width/height; default to avatar size */
  width: 36px;
  height: 36px;
}

.skel-card {
  display: block;
  border-radius: var(--rad-md);
  min-height: 80px;
}

/* ============================================================
   7. MOTION — respect prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .skel,
  .skel-line,
  .skel-circle,
  .skel-card {
    animation: none;
    background: var(--bg-elev);
    background-image: none;
  }

  .chip,
  .pill-tag,
  .topbar-avatar,
  .user-avatar,
  .acct-header-avatar {
    transition-duration: 0ms;
  }
}