/* Badge component — maps to powerappsui.com "Badge" */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  background: var(--color-error-500);
  color: var(--color-neutral-0);
}

.badge-dot {
  width: 8px;
  height: 8px;
  min-width: 0;
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--color-error-500);
}

/* Positioned on top of an icon button, e.g. the header notification bell */
.badge-anchor {
  position: relative;
  display: inline-flex;
}

.badge-anchor .badge {
  position: absolute;
  top: -4px;
  right: -4px;
}

/* Status badges — reused later by the My Requests table */
.badge-status {
  height: auto;
  min-width: 0;
  border-radius: var(--radius-full);
  padding: 3px 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.badge-status-draft { background: var(--color-neutral-200); color: var(--color-neutral-700); }
.badge-status-submitted { background: var(--color-blue-50); color: var(--color-blue-700); }
.badge-status-under-review { background: var(--color-warning-50); color: var(--color-warning-700); }
.badge-status-active { background: var(--color-success-50); color: var(--color-success-700); }
.badge-status-awarded { background: var(--color-green-100); color: var(--color-green-800); }

/*
  Approval-status chips — used on My Requests (approvalStatus field:
  Draft/Submitted/Approved/Rejected). Exact colors specified for that page;
  intentionally separate from the .badge-status-* set above, which serves
  the Dashboard's 5-value lifecycle `status` field on the same records.
*/
.badge-chip {
  height: auto;
  min-width: 0;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.badge-chip-approved { background: #93C6AF; color: #083722; }
.badge-chip-submitted { background: #FFDC9B; color: #6B4B10; }
.badge-chip-draft { background: #DFE1E6; color: #091E42; }
.badge-chip-rejected { background: #EE9C96; color: #5C100B; }