/* ── Badges — ARKAN Design System v2 ─────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.03em;
  white-space: nowrap;
  line-height: 1.4;
  border: 1px solid transparent;
}

/* Pill variant */
.badge--pill { border-radius: var(--radius-full); }

/* Count badge */
.badge--count {
  padding: 2px var(--space-1);
  min-width: 20px;
  justify-content: center;
  font-weight: 700;
}

/* ── Status variants ─────────────────────────────────────────── */

/* Open / Active / Info */
.badge--open,
.badge--active,
.badge--info,
.badge--primary {
  color: var(--status-info);
  background: var(--status-info-bg);
}

/* In Progress */
.badge--in-progress,
.badge--in_progress {
  color: var(--accent-primary);
  background: var(--accent-surface);
}

/* Pending / Warning / At Risk */
.badge--pending,
.badge--at-risk,
.badge--at_risk,
.badge--warning {
  color: var(--status-warning);
  background: var(--status-warning-bg);
}

/* Resolved / Closed / Success */
.badge--resolved,
.badge--closed,
.badge--success {
  color: var(--status-success);
  background: var(--status-success-bg);
}

/* Critical / Breach / Danger */
.badge--critical,
.badge--breach,
.badge--danger {
  color: var(--status-danger);
  background: var(--status-danger-bg);
}

/* Neutral / Muted */
.badge--neutral,
.badge--muted {
  color: var(--status-neutral);
  background: var(--status-neutral-bg);
}

/* Soft neutral with border (for lifecycle statuses) */
.badge--outline {
  background: transparent;
  border-color: currentColor;
  opacity: 0.85;
}

/* ── VIP / Level Badges (Phase 8.1) ─────────────────────── */

.badge--vip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}

/* Gold — VIP */
.badge--vip-gold {
  color: #92400e;
  background: #fef3c7;
  border-color: #fcd34d;
}

/* Purple — Executive */
.badge--vip-purple {
  color: #5b21b6;
  background: #ede9fe;
  border-color: #c4b5fd;
}

/* Blue — Manager */
.badge--vip-blue {
  color: #1e40af;
  background: #dbeafe;
  border-color: #93c5fd;
}

/* Gray — Employee */
.badge--vip-gray {
  color: var(--status-neutral);
  background: var(--status-neutral-bg);
  border-color: transparent;
}

/* ── Company Chip ────────────────────────────────────────── */

.company-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px 2px 5px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.company-chip__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0;
}

.company-chip__logo {
  border-radius: 3px;
  object-fit: contain;
  flex-shrink: 0;
}

.company-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

.company-chip__code {
  color: var(--text-muted);
  font-size: 10px;
  font-family: var(--font-mono, monospace);
}

.company-chip__tier {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.company-chip__tier--enterprise { background: #7c3aed22; color: #7c3aed; }
.company-chip__tier--premium    { background: #d9770622; color: #d97706; }
.company-chip__tier--standard   { background: var(--status-neutral-bg); color: var(--status-neutral); }
.company-chip__tier--trial      { background: #0ea5e922; color: #0ea5e9; }

/* ── Company Identity Card (sidebar / detail panels) ─────── */

.cid-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-1);
}

.cid-card__accent {
  height: 4px;
  width: 100%;
}

.cid-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.cid-card__logo {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: contain;
  flex-shrink: 0;
  border: 1px solid var(--border-subtle);
}

.cid-card__initials {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.cid-card__meta { flex: 1; min-width: 0; }

.cid-card__name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cid-card__code {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  margin-top: 1px;
}

.cid-card__rows {
  padding: 8px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cid-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-primary);
  gap: 8px;
}

.cid-card__label {
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}