/* Approval Tracker — 承認フローの進捗（Figma Approval Tracker 仕様準拠） */
/* item は既定の stretch で行の高さに伸ばし、各 card の縦幅を揃える。 */
.ui-approval-tracker {
  @apply flex;
}

.ui-approval-tracker__item {
  @apply flex items-center;
}

/* 幅は担当者ブロックの合計で決まる。card 自体に幅を持たせると、氏名が長いときに */
/* card が伸びてしまい省略記号が出ない。縦は self-stretch で行の高さいっぱいに広げる。 */
.ui-approval-tracker__card {
  @apply flex shrink-0 self-stretch flex-col items-start gap-2 overflow-clip rounded-lg border bg-white p-3;
}

.ui-approval-tracker__title {
  @apply flex w-full items-center gap-2 overflow-clip;
}

/* 担当者が複数の card だけ、状態を右端へ寄せる（Figma 5997:356320）。 */
/* 区切り線は担当者が 2 人以上のときだけ描く。 */
.ui-approval-tracker__card:has(.ui-approval-tracker__divider) .ui-approval-tracker__title {
  @apply justify-between;
}

.ui-approval-tracker__label {
  @apply shrink-0 whitespace-nowrap text-sm leading-5 text-gray-600;
}

.ui-approval-tracker__status {
  @apply flex shrink-0 items-center gap-1 overflow-clip whitespace-nowrap text-sm leading-5;
}

.ui-approval-tracker__assignees {
  @apply flex items-start gap-3;
}

/* 担当者を区切る縦線。担当者名と日付の高さに合わせる。 */
.ui-approval-tracker__divider {
  @apply w-px shrink-0 self-stretch bg-gray-200;
}

/* 複数人のときは Figma の固定幅 128px。1 人なら 136px。 */
.ui-approval-tracker__prop {
  @apply flex w-32 flex-col items-start gap-0.5 overflow-clip;
}

.ui-approval-tracker__prop:only-child {
  @apply w-34;
}

.ui-approval-tracker__name-row {
  @apply flex w-full items-center gap-1;
}

/* 氏名は残り幅いっぱいに伸ばし、右のアイコンを押し出さない。 */
/* 氏名が長ければ折り返さず「…」で省略する。 */
.ui-approval-tracker__name {
  @apply min-w-0 flex-1 truncate text-sm leading-5 text-gray-900;
}

.ui-approval-tracker__assignee-icon {
  @apply shrink-0;
}

.ui-approval-tracker__timestamp {
  @apply w-full truncate text-xs leading-4 text-gray-400;
}

/* 次へ繋ぐ 8px の横線 */
.ui-approval-tracker__connector {
  @apply h-px w-2 shrink-0;
}

/* State: approved — 承認済み・完了 */
.ui-approval-tracker__item--approved .ui-approval-tracker__card {
  @apply border-teal-600;
}

.ui-approval-tracker__item--approved .ui-approval-tracker__status {
  @apply text-teal-600;
}

.ui-approval-tracker__item--approved .ui-approval-tracker__connector {
  @apply bg-teal-600;
}

/* State: pending — 承認待ち・未送信 */
.ui-approval-tracker__item--pending .ui-approval-tracker__card {
  @apply border-gray-200;
}

.ui-approval-tracker__item--pending .ui-approval-tracker__status {
  @apply text-gray-600;
}

.ui-approval-tracker__item--pending .ui-approval-tracker__connector {
  @apply bg-gray-200;
}

/* State: denied — 差し戻し */
.ui-approval-tracker__item--denied .ui-approval-tracker__card {
  @apply border-red-600;
}

.ui-approval-tracker__item--denied .ui-approval-tracker__status {
  @apply text-red-600;
}

/* 担当者ごとのアイコン。card 全体の状態ではなく各自の状態で色を変える。 */
.ui-approval-tracker__assignee-icon--approved {
  @apply text-teal-600;
}

.ui-approval-tracker__assignee-icon--pending {
  @apply text-gray-600;
}

.ui-approval-tracker__assignee-icon--denied {
  @apply text-red-600;
}

/* 差し戻しの次の承認者は未対応なので、線は pending と同じグレーにする。 */
.ui-approval-tracker__item--denied .ui-approval-tracker__connector {
  @apply bg-gray-200;
}