/* ComboBox */
.ui-combo-box {
  @apply flex flex-col gap-2;
}

/* Label */
.ui-combo-box__label {
  @apply flex items-end gap-1 text-sm font-normal leading-5 text-gray-900;
}

.ui-combo-box__required {
  @apply text-red-500;
}

/* Control wrapper (positions the menu) */
.ui-combo-box__control-wrapper {
  @apply relative;
}

/* Control（textarea 折り返し時は上揃えでクリアボタンと並べる） */
.ui-combo-box__control {
  @apply flex w-full items-start rounded-md border border-gray-200 bg-white;
}

/* py は Figma（sm: node 1641:1730 / md: node 2252:25263）の py-1.5 / py-2 をそのまま使わず、
   コントロール高（sm 32px / md 40px）から border 2px と 1 行分の leading-5 (20px) を引いた
   余白を上下に等分した値にする。Figma は stroke がレイアウト非干渉かつ items-center なので
   ずれないが、こちらは items-start（折り返し時に先頭行へ揃えるため）なので、1 行時に
   ぴったり収まる py でないと文字が中央から浮く。 */
.ui-combo-box__control--sm {
  @apply min-h-8 gap-1.5 px-3 py-1.25;
}

.ui-combo-box__control--md {
  @apply min-h-10 gap-2 px-4 py-2.25;
}

.ui-combo-box__control--error {
  @apply border-red-500;
}

.ui-combo-box__control--disabled {
  @apply cursor-not-allowed border-gray-200 bg-gray-50;
}

.ui-combo-box--focus .ui-combo-box__control {
  @apply border-indigo-500 ring-1 ring-inset ring-indigo-500;
}

/* 検索・表示用テキストエリア（長い display は折り返し、高さは Stimulus の scrollHeight 同期）。field-sizing: content は intrinsic 幅が内容に引きずられ選択前後で枠幅が変わるため使わない */
.ui-combo-box__input {
  @apply block min-h-0 w-full min-w-0 flex-1 resize-none overflow-hidden break-words border-none bg-transparent p-0 text-gray-900 outline-none;
  field-sizing: fixed;
}

/* 未選択時（プレースホルダー・検索入力中）：1 行・はみ出しは省略。選択確定後はこのクラスを外して折り返す */
.ui-combo-box__input--single-line {
  @apply whitespace-nowrap;
  text-overflow: ellipsis;
}

.ui-combo-box__input::placeholder {
  @apply text-gray-400;
}

.ui-combo-box__input--sm {
  @apply text-sm leading-5;
}

.ui-combo-box__input--md {
  @apply text-sm leading-5;
}

.ui-combo-box__control--disabled .ui-combo-box__input {
  @apply cursor-not-allowed text-gray-400;
}

/* Clear button（複数行時も先頭行付近に置く） */
.ui-combo-box__clear {
  @apply flex shrink-0 cursor-pointer items-center justify-center text-gray-400 hover:text-gray-600;
}

/* mt は先頭行の leading-5 (20px) に対する中央合わせ（(20px - アイコン径) / 2）。
   items-start のままなので、折り返し時も先頭行に揃い続ける。 */
.ui-combo-box__clear--sm {
  @apply mt-0.75 size-3.5;
}

.ui-combo-box__clear--md {
  @apply mt-0.5 size-4;
}

.ui-combo-box__clear--hidden {
  @apply invisible;
}

/* Dropdown menu (Figma ComboBoxMenu: outer py-1, default max height 240px) */
.ui-combo-box__menu {
  @apply absolute left-0 top-full z-50 mt-1 hidden max-h-60 w-full flex-col overflow-hidden rounded-md border border-gray-200 bg-white py-1;
  min-width: 165px;
  box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.08);
}

.ui-combo-box__menu--open {
  @apply flex;
}

/* ItemSelect variant (Figma: taller panel) */
.ui-combo-box__menu--item-select {
  max-height: 420px;
}

/* PriceTable variant (Figma: fixed width, no count row via show_count: false) */
.ui-combo-box__menu--price-table {
  width: 248px;
  min-width: 248px;
  max-width: 248px;
}

/* Count row */
.ui-combo-box__count {
  @apply flex shrink-0 items-center gap-0 px-3 py-2 text-xs leading-4 text-gray-400;
}

.ui-combo-box__count:has(.ui-combo-box__loading:not(.ui-combo-box__loading--hidden)) {
  @apply gap-1;
}

/* Loading icon */
.ui-combo-box__loading {
  @apply inline-flex;
}

.ui-combo-box__loading .icon {
  @apply animate-spin;
}

.ui-combo-box__loading--hidden {
  @apply invisible;
}

/* Header row */
.ui-combo-box__header {
  @apply flex shrink-0 items-stretch bg-gray-50 px-3 py-2 text-xs font-semibold leading-4 text-gray-600;
}

/* テーブル風ヘッダー: オプション行（.ui-combo-box__option）と同じ flex 行幅になるようパーシャル側でラップする */
.ui-combo-box__header-row {
  @apply flex min-w-0 w-full flex-1 items-stretch;
}

/* Option list (scrollable area; fills remaining height under menu max-height) */
.ui-combo-box__option-list {
  @apply min-h-0 flex-1 overflow-y-auto py-0;
}

/* Option row */
.ui-combo-box__option {
  @apply flex cursor-pointer items-stretch px-3 py-2 text-sm leading-5 text-gray-900;
}

.ui-combo-box__option:hover,
.ui-combo-box__option--focused {
  @apply bg-gray-100;
}

/* Empty state */
.ui-combo-box__empty {
  @apply shrink-0 px-3 py-2 text-sm leading-5 text-gray-400;
}

.ui-combo-box__empty--hidden {
  @apply hidden;
}

/* Helper / Error text */
.ui-combo-box__helper {
  @apply text-xs font-normal leading-4 text-gray-600;
}

.ui-combo-box__error-text {
  @apply text-xs font-normal leading-4 text-red-500;
}