/* ─────────────────────────────────────────────────────────────────────── */
/* Badge Component — Status, Count, Type Indicators                         */
/* ─────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────── */
/* Base Badge                                                                */
/* ─────────────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background-color: var(--bg-3);
  color: var(--text-mute);
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────── */
/* Status Badge (New, In Progress, Accepted, Done)                         */
/* ─────────────────────────────────────────────────────────────────────── */

.badge-status {
  padding: 4px 8px;
  height: auto;
  border-radius: 4px;
  font-size: 11px;
  min-width: unset;
}

.badge-status[data-status="new"] {
  background-color: var(--st-new-bg);
  color: var(--st-new);
}

.badge-status[data-status="in_progress"] {
  background-color: var(--st-progress-bg);
  color: var(--st-progress);
}

.badge-status[data-status="accepted"] {
  background-color: var(--st-accepted-bg);
  color: var(--st-accepted);
}

.badge-status[data-status="done"] {
  background-color: var(--st-done-bg);
  color: var(--st-done);
}

/* ─────────────────────────────────────────────────────────────────────── */
/* Notification Badge (for unread counts)                                   */
/* ─────────────────────────────────────────────────────────────────────── */

.badge-notification {
  background-color: var(--accent);
  color: var(--accent-ink);
  min-width: 20px;
  height: 20px;
  padding: 0;
  font-size: 9px;
  font-weight: 600;
  border-radius: 50%;
}

/* ─────────────────────────────────────────────────────────────────────── */
/* Type Badge (Bug, Feature, Support)                                       */
/* ─────────────────────────────────────────────────────────────────────── */

.badge-type {
  padding: 2px 6px;
  height: auto;
  border-radius: 3px;
  font-size: 10px;
  min-width: unset;
  border: 1px solid;
}

.badge-type[data-type="bug"] {
  background-color: var(--t-bug-bg);
  color: var(--t-bug);
  border-color: var(--t-bug-bd);
}

.badge-type[data-type="feature"] {
  background-color: var(--t-feature-bg);
  color: var(--t-feature);
  border-color: var(--t-feature-bd);
}

.badge-type[data-type="support"] {
  background-color: var(--t-support-bg);
  color: var(--t-support);
  border-color: var(--t-support-bd);
}