/* ============================================================================
 * app/assets/stylesheets/components/luxury_select.css
 *
 * 概要: テーマ追従のカスタム <select>（プルダウン）。ネイティブ select を
 *       Stimulus(theme-select) でプログレッシブエンハンスし、展開リストの
 *       選択中 / ホバー色をゴールド/ダークのトンマナへ完全に揃える。
 *       （ネイティブ select の option ポップアップは OS 描画で色制御不可のため）
 *
 * 作成日: 2026-06-07
 *
 * 【命名】基底は `.luxury-select-field`。既存の `.luxury-select`（言語セレクタ /
 *   accounts_locale.css）とは別物なので衝突回避のためサフィックスを付けている。
 *
 * 【テーマ対応】色は theme_variables.css のトークンを参照し dark / light / wood に追従。
 *   --gold-primary-rgb はテーマ別に 黄 / アンバー / 銅 へ変化する。
 *
 * 【関連】
 *   - app/javascript/controllers/theme_select_controller.js（DOM 構築・開閉・同期）
 *   - レイアウト読み込み: layouts/application.html.erb
 * ----------------------------------------------------------------------------
 * 最終更新: 2026-07-13（表示モード監査対応: RTL 論理プロパティ化 2 件 —
 *   __list の left:0 → inset-inline-start:0 / __trigger の text-align left → start。
 *   LTR では完全等価のため全テーマの既定表示は不変）
 * 過去更新: 2026-06-14
 * 【リファクタリング基準】（CSS 用しきい値 / コメント行・空行は行数カウントから除外）
 *   500 行未満  = 完璧（分割不要）
 *   800 行未満  = 問題なし
 *   1200 行未満 = 注意喚起（分割を要検討）
 *   1200 行以上 = リファクタリング必須
 *   現在の実コード行数: 約 112 行 → 判定: 完璧。
 *   単一コンポーネント（.luxury-select-field 系 BEM）に閉じており規模も小さく分割不要。
 *   将来このファイルに別コンポーネントが混ざり始めたら、コンポーネント単位で
 *   別 CSS ファイルへ切り出すこと。
 * ----------------------------------------------------------------------------
 * ============================================================================ */

.luxury-select-field {
  position: relative;
  display: inline-block;
}

/* ネイティブ select は視覚的に隠すが、フォーム送信値・change 発火源として DOM に残す */
.luxury-select-field__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  /* clip + width/height 1px + overflow:hidden の組み合わせは「視覚的には隠すがスクリーンリーダーやフォーム送信からは生きている」ための定番の隠蔽手法。display:none にすると select の値が送信されなくなるため使えない */
  white-space: nowrap;
  border: 0;
}

/* トリガー（入力欄と同じ見た目） */
.luxury-select-field__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  /* 【2026-07-13】RTL 対応: left → start（LTR では等価・RTL でラベルが自然な右寄せに） */
  text-align: start;
  color: var(--text-primary);
  background: rgba(var(--surface-rgb), 0.06);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.luxury-select-field__trigger:hover {
  border-color: rgba(var(--gold-primary-rgb), 0.5);
}
.luxury-select-field__trigger:focus-visible,
.luxury-select-field__trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 3px rgba(var(--gold-primary-rgb), 0.12);
}

.luxury-select-field__value {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.luxury-select-field__chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--lx-gold-text);
  transition: transform 0.2s ease;
}
.luxury-select-field__trigger[aria-expanded="true"] .luxury-select-field__chevron {
  transform: rotate(180deg);
}

/* 展開リスト（divベースなので色を完全制御できる＝青ハイライト等が出ない） */
.luxury-select-field__list {
  position: absolute;
  top: calc(100% + 6px);
  /* 【2026-07-13】RTL(ar-SA) 対応: left:0 → 論理プロパティ化。LTR では left:0 と完全等価
     （全テーマの既定表示は不変）、RTL では右端起点となり展開リストの画面外飛び出しを防ぐ */
  inset-inline-start: 0;
  z-index: 40;
  /* 展開リストを他の要素より前面に出すための重なり順。トリガー直下に絶対配置で浮かせるため、周囲の z-index と競合しないか変更時は確認すること */
  min-width: 100%;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--gold-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  backdrop-filter: blur(20px);
}
.luxury-select-field__list[hidden] { display: none; }

.luxury-select-field__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.luxury-select-field__option + .luxury-select-field__option { margin-top: 2px; }

/* ホバー / キーボードのアクティブ行 */
.luxury-select-field__option:hover,
.luxury-select-field__option.is-active {
  background: rgba(var(--gold-primary-rgb), 0.12);
  color: var(--text-primary);
}

/* 選択中の行（ゴールド・チェック付き）。色だけでなく ::after の ✓ でも示すのは、
   色覚特性のあるユーザーや低コントラスト環境でも「どれが選択中か」を判別できるようにするため。 */
.luxury-select-field__option[aria-selected="true"] {
  background: rgba(var(--gold-primary-rgb), 0.16);
  color: var(--lx-gold-text);
  font-weight: 600;
}
.luxury-select-field__option[aria-selected="true"]::after {
  /* 選択中の行の右端にチェックマークを擬似要素で表示する。aria-selected="true" の行だけに付くので、選択状態を色だけでなく記号でも示せる */
  content: "✓";
  flex: 0 0 auto;
  color: var(--lx-gold-text);
  font-size: 12px;
}
/* 選択中かつアクティブ（ホバー）は少し強める */
.luxury-select-field__option[aria-selected="true"].is-active,
.luxury-select-field__option[aria-selected="true"]:hover {
  background: rgba(var(--gold-primary-rgb), 0.22);
}

/* リスト内スクロールバーを控えめなゴールドに */
.luxury-select-field__list::-webkit-scrollbar { width: 8px; }
.luxury-select-field__list::-webkit-scrollbar-track { background: transparent; }
.luxury-select-field__list::-webkit-scrollbar-thumb {
  background: rgba(var(--gold-primary-rgb), 0.3);
  border-radius: 4px;
}
.luxury-select-field__list::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--gold-primary-rgb), 0.5);
}

/* ============================================================================
 * レスポンシブ（2026-06-08）: タッチ44px・アドレスバー(dvh)・横向き・狭幅クランプ。
 * 色 / position / 開閉ロジックには触れず、高さ・幅プロパティのみ。768px 超のデスクトップは不変。
 * ============================================================================ */
@media (max-width: 768px) {
  .luxury-select-field__trigger { min-height: 44px; }
  .luxury-select-field__option { min-height: 44px; padding-block: 12px; }
  .luxury-select-field__option + .luxury-select-field__option { margin-top: 4px; }
  /* 固定 280px はアドレスバー展開時に画面外へ。min() で十分高い画面では従来 280px を維持しつつ、
     短い画面のみ dvh に収め overflow-y:auto で内部スクロールに切替える。 */
  .luxury-select-field__list {
    /* min() は2値の小さい方を採用する。広い画面ではデスクトップと同じ 280px、低い画面では 70dvh 側が小さくなり画面内へ収まる。dvh はモバイルのアドレスバー伸縮を反映する単位 */
    max-height: min(280px, calc(70dvh - var(--safe-area-bottom, 0px)));
  }
}

@media (max-width: 480px) {
  /* 長い訳語/選択肢でもビューポートからはみ出さないよう上限を被せる（min-width:100% は維持） */
  .luxury-select-field__list { max-width: calc(100vw - 24px); }
}

@media (orientation: landscape) and (max-height: 500px) {
  .luxury-select-field__list { max-height: calc(60dvh - var(--safe-area-bottom, 0px)); }
}