/* 発注一覧のステータスセル: 納品待ち⇔納品済みトグルの popover とローディング表示。
   使い回す想定が無いため汎用 popover 化はせず、この機能限定のスタイルとして閉じる。 */

.order-status-popover {
  @apply relative inline-flex;
  /* busy 解除（送信完了）後の再表示だけを遅延させる。busy が外れてから turbo_stream の
     バッジ差し替えが走るまでの隙間で旧バッジが一瞬見えるため、その間は opacity-0 を保持し、
     差し替え完了後に表示へ切り替わるようにする。busy 付与時は [busy] 側で即座に隠す。 */
  transition: opacity 0s 150ms;
}

/* 全ステータスのバッジを矢印カーソルにし、トグル可能なものだけ後段で指差しに上書きする。 */
.order-status-cell .ui-badge {
  @apply cursor-default;
}

/* トグル可能なバッジはクリックできることを指差しカーソルで示す。上の既定と詳細度が同じため、
   ソース順で後に置いて勝たせる。 */
.order-status-popover .ui-badge {
  @apply cursor-pointer;
}

/* バッジ直下に出すパネル。pt はバッジ↔本体の隙間を hover 領域でつなぐ橋渡し。 */
.order-status-popover__panel {
  @apply absolute left-1/2 top-full z-10 hidden -translate-x-1/2 pt-2;
}

/* バッジからパネルへマウスを移しても、パネルは .order-status-popover の子孫なので
   親の :hover が外れず開いたままになる。 */
.order-status-popover:hover .order-status-popover__panel {
  @apply block;
}

/* 寸法は Figma に合わせて固定する。 */
.order-status-popover__body {
  @apply relative w-32 rounded-sm border border-gray-200 bg-white py-2 text-sm whitespace-nowrap;
  padding-left: 15px; /* Figma の左インセット。Tailwind に 15px の標準ユーティリティが無いため生 CSS で指定。 */
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.08);
}

/* 本体上辺中央の上向き矢印。枠線色と白の三角を擬似要素2枚で重ねる。 */
.order-status-popover__body::before,
.order-status-popover__body::after {
  @apply absolute bottom-full left-1/2 h-0 w-0 -translate-x-1/2;
  content: "";
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

.order-status-popover__body::before {
  border-bottom: 8px solid #e5e7eb; /* 外側: 枠線色 (gray-200) */
}

.order-status-popover__body::after {
  border-bottom: 8px solid #fff; /* 内側: 白で塗り、1px 上にずらして枠線を残す */
  margin-bottom: -1px;
}

.order-status-popover__action {
  @apply cursor-pointer text-indigo-600 hover:underline;
}

/* バッジの自然なサイズに収まる inline 枠。relative はローディングアイコンの中央寄せの基準。 */
.order-status-cell {
  @apply relative inline-flex items-center;
}

/* ローディングをバッジに重ねて常時置き、表示切り替えは display ではなく opacity で行う
   （display の切り替えだと下の transition の遅延が効かないため）。
   pointer-events-none にして、重なっている下のバッジの hover popover を妨げない。 */
.order-status-cell__loading {
  @apply pointer-events-none absolute inset-0 flex items-center justify-center opacity-0;
  /* バッジと対に、busy 解除後の非表示化を遅延させ、差し替えまでローディングを保持する。 */
  transition: opacity 0s 150ms;
}

/* 送信中: turbo-frame[busy] の間だけバッジを隠してローディングアイコンを出す。
   ローディングアイコンとバッジが重なって表示されることを防ぐため、バッジを opacity-0 で透明にする。
   busy 付与時は遅延なしで即座に切り替える（クリック直後にローディングを出す）。 */
.order-status-cell[busy] .order-status-popover {
  @apply opacity-0;
  transition: opacity 0s;
}

.order-status-cell[busy] .order-status-cell__loading {
  @apply opacity-100;
  transition: opacity 0s;
}

.order-status-cell__loading .icon {
  @apply animate-spin;
}