/*
 * Approvals
 *
 * Shared approval status badge classes for approval components and expense rows.
 */

.approval-status {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  padding: 0.25rem 0.5rem;
  color: var(--color-ink-light);
  background-color: var(--color-surface-muted);
  box-shadow:
    inset 0 0 0 1px
    color-mix(in oklch, var(--color-ink-light) 20%, transparent);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
}

.approval-status--medium {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.approval-status--approved {
  color: rgb(var(--palette-green-700));
  background-color: rgb(var(--palette-green-50));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-success-strong) 20%, transparent);
}

.approval-status--rejected {
  color: rgb(var(--palette-red-700));
  background-color: rgb(var(--palette-red-50));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger-strong) 20%, transparent);
}

.approval-status--pending {
  color: var(--color-ink-light);
  background-color: var(--color-surface-muted);
  box-shadow:
    inset 0 0 0 1px
    color-mix(in oklch, var(--color-ink-lighter) 20%, transparent);
}

.approval-event-item {
  padding-block-end: 1rem;
  padding-inline: 1rem;
  border-block-end: 1px solid var(--color-border-medium);
}

.approval-event-item__body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-inline: 1rem;
}

.approval-event-item__avatar {
  flex-shrink: 0;
}

.approval-event-item__employee {
  margin-inline-start: 0.5rem;
}

.approval-event-item__description,
.approval-event-item__meta {
  margin-block-start: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.approval-event-item__description {
  color: var(--color-ink-light);
}

.approval-event-item__meta {
  display: flex;
  gap: 0.5rem;
}

.approval-event-item__timestamp {
  color: var(--color-ink-lighter);
  font-weight: 500;
}

.approval-event-form {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-block-start: 1.5rem;
}

.approval-event-form__body {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.approval-event-form__form {
  position: relative;
}

.main-approval-event {
  padding: 1rem;
  border-block-end: 1px solid var(--color-border-medium);
}

.main-approval-event--compact {
  padding-block-start: 0;
}

.main-approval-event__content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-inline: 1rem;
}

.main-approval-event__avatar {
  flex-shrink: 0;
}

.main-approval-event__employee {
  margin-inline-start: 0.5rem;
}

.main-approval-event__description,
.main-approval-event__meta {
  margin-block-start: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.main-approval-event__description {
  color: var(--color-ink-light);
}

.main-approval-event__date {
  color: var(--color-ink-lighter);
  font-weight: 500;
}

.main-approval-form {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-block-start: 1.5rem;
}

.main-approval-form__body {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.main-approval-form__form {
  position: relative;
}