/* ==================== STATUS BADGES ==================== */
/* Dot + label pattern: vivid text on soft background, 6px radius */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: 3px 10px;
  border-radius: var(--radius-md);
  line-height: 1.4;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}

.badge-dot,
.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Status badges — text uses -dark variants so 13px copy passes WCAG AA
   on the pale tinted bg. Dots keep the base saturated color for vibrancy. */

/* Success / Completed / Cleared / Approved */
.status-badge.completed,
.status-badge.success,
.status-badge.active {
  background: var(--pk-success-light);
  color: var(--pk-success-dark);
}
.status-badge.completed::before,
.status-badge.success::before,
.status-badge.active::before {
  background: var(--pk-success);
}

/* Info / Pending / Queued / Processing / In Review
   `queued` is IntegrationLog's "Queued (Month-End)" status. It had no rule
   at all, and .status-badge alone sets no background or colour, so a
   month-end-queued attempt rendered as bare text with a transparent dot and
   stray left padding — visibly not a badge — on every page that writes
   `class="status-badge {{ log.status }}"`. */
.status-badge.pending,
.status-badge.queued,
.status-badge.processing,
.status-badge.info {
  background: var(--pk-info-light);
  color: var(--pk-info-dark);
}
.status-badge.pending::before,
.status-badge.queued::before,
.status-badge.processing::before,
.status-badge.info::before {
  background: var(--pk-info);
}

/* Warning / Needs Review / Escalated */
.status-badge.needs_review,
.status-badge.warning,
.status-badge.escalated {
  background: var(--pk-warning-light);
  color: var(--pk-warning-dark);
}
.status-badge.needs_review::before,
.status-badge.warning::before,
.status-badge.escalated::before {
  background: var(--pk-warning);
}

/* Error / Failed / Danger / Disputed */
.status-badge.failed,
.status-badge.danger {
  background: var(--pk-error-light);
  color: var(--pk-error-dark);
}
.status-badge.failed::before,
.status-badge.danger::before {
  background: var(--pk-error);
}

/* Retry */
.status-badge.retry {
  background: var(--pk-caution-light);
  color: var(--pk-caution-dark);
}
.status-badge.retry::before {
  background: var(--pk-warning);
}

/* Inactive / Closed / Muted / Dismissed */
.status-badge.inactive,
.status-badge.closed,
.status-badge.muted {
  background: var(--pk-gray-100);
  color: var(--pk-gray-600);
}
.status-badge.inactive::before,
.status-badge.closed::before,
.status-badge.muted::before {
  background: var(--pk-gray-500);
}

/* Disputed — special treatment */
.status-badge.disputed {
  background: var(--pk-error-light);
  color: var(--pk-error);
  border: 1px solid var(--badge-disputed-border);
}
.status-badge.disputed::before {
  background: var(--pk-error);
}

/* ==================== METHOD BADGES ==================== */
.method-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: 3px 10px;
  border-radius: var(--radius-md);
  line-height: 1.4;
  white-space: nowrap;
}

.method-badge.fixed_sell { background: var(--pk-success-light); color: var(--pk-success); }
.method-badge.percentage { background: var(--pk-info-light); color: var(--pk-info); }
.method-badge.fixed_amount { background: var(--pk-warning-light); color: var(--pk-warning); }
.method-badge.pass_through { background: var(--pk-gray-100); color: var(--pk-gray-600); }

/* ==================== VALIDITY BADGES ==================== */
.validity-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: 3px 10px;
  border-radius: var(--radius-md);
  line-height: 1.4;
}

.validity-badge.validity-current { background: var(--pk-success-light); color: var(--pk-success); }
.validity-badge.validity-future { background: var(--pk-info-light); color: var(--pk-info); }
.validity-badge.validity-expired { background: var(--pk-gray-100); color: var(--pk-gray-500); }
.validity-badge.validity-indefinite { background: var(--pk-warning-light); color: var(--pk-warning); }

/* ==================== COUNT BADGES ==================== */
.status-count {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--pk-gray-200);
  color: var(--pk-gray-600);
  line-height: 1.4;
}

.status-count--success { background: var(--pk-success-light); color: var(--pk-success); }
.status-count--warning { background: var(--pk-warning-light); color: var(--pk-warning); }
.status-count--danger { background: var(--pk-error-light); color: var(--pk-error); }

.note-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--pk-info-light);
  color: var(--pk-info);
  line-height: 1.4;
}

/* ==================== CONTAINER CHIPS ==================== */
/* Multi-container invoices collapse to "FIRST +N more" in the info grid;
   the toggle expands this full-width row of selectable chips. The row is
   a direct child of the info grid, so 1 / -1 spans every column and the
   chips wrap horizontally instead of stacking in one narrow cell. */

.container-more-toggle {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  font-family: inherit;
  padding: 1px 7px;
  margin-left: var(--space-1);
  border: none;
  border-radius: var(--radius-full);
  background: var(--pk-gray-200);
  color: var(--pk-gray-600);
  line-height: 1.4;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.container-more-toggle:hover,
.container-more-toggle:focus {
  background: var(--pk-gray-300);
  color: var(--pk-gray-700);
}

.container-chips {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Author display:flex outranks the UA's [hidden]{display:none} (origin
   beats origin, not specificity) — restate the hidden state explicitly or
   the row can never collapse. */
.container-chips[hidden] {
  display: none;
}

/* Same author-display-outranks-[hidden] trap as .container-chips above. */
.status-badge[hidden] {
  display: none;
}

.container-chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  padding: 2px 8px;
  background: var(--pk-white);
  border: 1px solid var(--pk-gray-200);
  border-radius: var(--radius-md);
  color: var(--pk-slate-dark);
  line-height: 1.4;
  user-select: text;
}