/* ============================================================================
 * components/filter_bar.css
 *
 * 汎用「検索 + 並び替え + 件数 + アクション + タグピッカー」フィルタバー。
 * 元は ks-filter-* （ナレッジシェア起源）。2026-05-10 に共通コンポーネント化に
 * 伴い presentations.css から抽出。
 *
 * 利用元:
 *   - shared/components/_search_filter_bar.html.erb
 *   - shared/components/_search_bar.html.erb（一部スタイル共有）
 *   - app/views/app/presentations（ナレッジシェア公開ライブラリ）
 *   - app/views/app/template_marketplace
 *   - app/views/app/template_publications
 *
 * 【ジュニアエンジニア向け解説】
 *   - 主要セレクタは .ks-filter-* 系（ks = knowledge share の頭文字、ナレッジシェアで
 *     最初に作られた経緯から残っているが現在は汎用）。
 *   - 1 行目は .ks-filter-row（flex 横並び）に input / chip / sort / actions が乗る。
 *   - 2 行目は .ks-filter-selected-categories（カテゴリピッカーで選択中のチップ群）。
 *   - .ks-filter-category-dropdown は position: fixed + JS で座標計算（スタッキング
 *     コンテキストの影響を回避し、確実に最前面に出す）。
 *   - タッチ基準 44px は WCAG 2.5.5 Target Size 対応。論理プロパティ
 *     (inset-inline-start / padding-inline-start / margin-inline-start) は RTL 対応。
 *
 * 【リファクタリング基準】（コメント行は行数カウントから除外）
 *   1. 500行未満:  完璧
 *   2. 800行未満:  問題なし
 *   3. 1200行未満: 注意喚起。リファクタリング要検討
 *   4. 1200行以上: リファクタリング必須
 *   現在の実コード行数: 約 493 行（コメント除く、2026-05-11 計測） → 判定: 完璧
 *   ※ 500 行の閾値に近接しているため、次に大きな機能追加が入る前に「カテゴリピッカー
 *      ドロップダウン」セクション (約 200 行) を別ファイル化することを検討候補とする。
 *
 * 更新日: 2026-05-11（リファクタリング基準・ジュニア向け解説を追加）
 * ============================================================================ */

/* ==============================================================================
   ナレッジシェア一覧: 検索・絞り込みフィルタ行
   一覧ヘッダー直下に配置する GET フォーム。
   構成: キーワード入力 / 公開範囲チェックチップ / クリア・絞り込みボタン
============================================================================== */

.ks-filter-form {
  margin-top: 20px;
  margin-bottom: var(--space-xl);
}

.ks-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}

.ks-filter-search {
  position: relative;
  flex: 1 1 260px;
  min-width: 220px;
}

.ks-filter-search-icon {
  position: absolute;
  /* 2026-04-19: LTR/RTL 両対応のため論理プロパティを使用 */
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: rgba(212, 175, 55, 0.7);
  pointer-events: none;
}

.ks-filter-input {
  width: 100%;
  /* 2026-04-19: タッチ基準達成（min-height 44px）＋ RTL 対応（padding-inline-start） */
  padding: 12px 14px;
  padding-inline-start: 42px;
  min-height: 44px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ks-filter-input::placeholder {
  color: var(--text-tertiary);
}

.ks-filter-input:focus {
  outline: none;
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.ks-filter-visibility {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ks-filter-chip {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.ks-filter-chip-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ks-filter-chip-label {
  /* 2026-04-19: タッチ基準（min-height 44px）＋ 視覚的中央揃えのため inline-flex に変更 */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ks-filter-chip:hover .ks-filter-chip-label {
  color: var(--text-primary);
  border-color: rgba(212, 175, 55, 0.5);
}

.ks-filter-chip-input:checked + .ks-filter-chip-label {
  color: #1a1410;
  background: linear-gradient(135deg, #d4af37 0%, #f4d47a 100%);
  border-color: transparent;
  font-weight: 600;
}

.ks-filter-chip-input:focus-visible + .ks-filter-chip-label {
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.35);
}

.ks-filter-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 2026-04-19: LTR/RTL 両対応のため論理プロパティを使用（LTR=右寄せ, RTL=左寄せ） */
  margin-inline-start: auto;
}

.ks-filter-clear {
  /* 2026-04-19: タッチ基準（min-height 44px）＋ 視覚的中央揃えのため inline-flex に変更 */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  color: var(--text-tertiary);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}

.ks-filter-clear:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.ks-filter-submit {
  /* 2026-04-19: タッチ基準達成（min-height 44px） */
  min-height: 44px;
  padding: 10px 24px;
  font-size: 13px;
}

/* ============================================================================
   2026-05-07 追加: カテゴリピッカー（公開ライブラリ絞り込みフォーム用）
   タイトル検索の短縮版（--compact）と、検索つきドロップダウン UI を提供する。
============================================================================ */

/* [hidden] 属性は本来 display:none と同義だが、後述の display: inline-flex /
   display: flex 指定の方が specificity が高くて打ち消されてしまうため、
   ここで明示的に display:none を返して優先度を担保する（2026-05-08 修正）。 */
.ks-filter-category-dropdown[hidden],
.ks-filter-category-chip[hidden],
.ks-filter-category-placeholder[hidden] {
  display: none !important;
}

/* タイトル検索のコンパクト版: カテゴリピッカーのスペース確保のため flex 比率を縮める */
.ks-filter-search--compact {
  flex: 1 1 200px;
  max-width: 360px;
  min-width: 180px;
}

/* カテゴリピッカー本体（クリックで開閉するボタン + 重ねるドロップダウン） */
.ks-filter-category {
  position: relative;
  flex: 0 0 auto;
  /* ドロップダウンが下のカード（presentation-card 等）の上に重なるように、
     確実にスタッキングコンテキストを作る + z-index を充分に上げる。
     isolation: isolate で「ここから新しい階層」を強制し、子の z-index は
     この階層内でのみ評価される。is-open 時はさらに上げる。 */
  isolation: isolate;
  z-index: 1000;
}

.ks-filter-category.is-open {
  z-index: 1100;
}

.ks-filter-category-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ks-filter-category-trigger:hover {
  border-color: rgba(212, 175, 55, 0.45);
}

.ks-filter-category.is-open > .ks-filter-category-trigger {
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.ks-filter-category-tag-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--lx-gold-text, #ffd700);
  opacity: 0.85;
}

.ks-filter-category-placeholder {
  color: var(--text-tertiary);
}

/* 選択中チップ（ピル状）— カテゴリチップと同じトンマナ */
.ks-filter-category-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  background: rgba(var(--gold-primary-rgb, 255, 215, 0), 0.18);
  border: 1px solid rgba(var(--gold-primary-rgb, 255, 215, 0), 0.45);
  border-radius: var(--radius-full, 999px);
  color: var(--lx-gold-text, #ffd700);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
}

.ks-filter-category-chip-label {
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ks-filter-category-chip-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: rgba(0, 0, 0, 0.25);
  border: none;
  border-radius: 50%;
  color: var(--lx-gold-text, #ffd700);
  cursor: pointer;
  transition: background 0.15s ease;
}

.ks-filter-category-chip-clear svg {
  width: 12px;
  height: 12px;
}

.ks-filter-category-chip-clear:hover {
  background: rgba(0, 0, 0, 0.5);
}

.ks-filter-category-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: transform 0.2s ease;
}

.ks-filter-category.is-open .ks-filter-category-chevron {
  transform: rotate(180deg);
}

/* ドロップダウン: 検索 input + 候補リスト
   2026-05-08 修正: position: absolute だと親側のスタッキングコンテキストの影響で
   下のカードグリッドの後ろに描画されるケースがあったため、position: fixed +
   JS で座標計算 (controller _positionDropdown) に切り替えて、確実に viewport
   レベルの最前面に出す。 */
.ks-filter-category-dropdown {
  position: fixed;
  z-index: 9999;
  min-width: 280px;
  max-width: 360px;
  max-height: 320px;
  background: var(--bg-elevated, #1c1c20);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.5));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ks-filter-category-search {
  position: relative;
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.ks-filter-category-search svg {
  position: absolute;
  inset-inline-start: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: rgba(212, 175, 55, 0.6);
  pointer-events: none;
}

.ks-filter-category-search input {
  width: 100%;
  padding: 8px 10px;
  padding-inline-start: 32px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
}

.ks-filter-category-search input:focus {
  outline: none;
  border-color: rgba(212, 175, 55, 0.45);
}

.ks-filter-category-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  flex: 1 1 auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-primary, #ffd700) transparent;
}

.ks-filter-category-list::-webkit-scrollbar {
  width: 8px;
}

.ks-filter-category-list::-webkit-scrollbar-thumb {
  background: rgba(var(--gold-primary-rgb, 255, 215, 0), 0.5);
  border-radius: 4px;
}

.ks-filter-category-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  text-align: start;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.ks-filter-category-option:hover,
.ks-filter-category-option:focus-visible {
  background: rgba(var(--gold-primary-rgb, 255, 215, 0), 0.12);
  color: var(--lx-gold-text, #ffd700);
  outline: none;
}

.ks-filter-category-option.is-selected {
  background: rgba(var(--gold-primary-rgb, 255, 215, 0), 0.18);
  color: var(--lx-gold-text, #ffd700);
  font-weight: 600;
}

/* 候補ボタン左側のチェックアイコン: 未選択時は非表示、選択時のみ表示 */
.ks-filter-category-option-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  visibility: hidden;
  color: var(--lx-gold-text, #ffd700);
}

.ks-filter-category-option.is-selected .ks-filter-category-option-check {
  visibility: visible;
}

.ks-filter-category-empty {
  padding: 16px;
  margin: 0;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12px;
}

/* トリガーボタン上の選択件数バッジ（複数選択時のみ表示） */
.ks-filter-category-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  background: var(--gold-primary, #ffd700);
  color: var(--bg-primary, #0a0a0a);
  border-radius: var(--radius-full, 999px);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.ks-filter-category-count[hidden] {
  display: none !important;
}

/* ============================================================================
   選択中カテゴリチップエリア（フィルタ行の下）
   - 6 件以上選択時は 5 件 + "+N" 表記に圧縮（JS 側で制御）
============================================================================ */

/* フィルタ枠の中の 2 段目にフル幅で並ぶチップ行（2026-05-08 改修）。
   .ks-filter-row 内で flex-basis: 100% を取り、フィルタ枠の幅いっぱいまで使う。
   横幅が足りないときだけ flex-wrap で折り返す。 */
.ks-filter-selected-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
  flex-basis: 100%;
  /* .ks-filter-row の gap (var(--space-md)) で 1 段目との間に余白が確保されるが、
     視覚的にもう少しほしいので軽く調整 */
  margin-top: 0;
}

.ks-filter-selected-categories[hidden] {
  display: none !important;
}

.ks-filter-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  background: rgba(var(--gold-primary-rgb, 255, 215, 0), 0.18);
  border: 1px solid rgba(var(--gold-primary-rgb, 255, 215, 0), 0.45);
  border-radius: var(--radius-full, 999px);
  color: var(--lx-gold-text, #ffd700);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.ks-filter-selected-chip-label {
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ks-filter-selected-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  border-radius: 50%;
  color: var(--lx-gold-text, #ffd700);
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.ks-filter-selected-chip-remove svg {
  width: 10px;
  height: 10px;
}

.ks-filter-selected-chip-remove:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* 並び替えセレクト（カテゴリと件数表示の間に配置）。2026-05-08 追加。 */
.ks-filter-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ks-filter-sort-label {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.ks-filter-sort-select {
  min-height: 36px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
}

.ks-filter-sort-select:focus {
  outline: none;
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

/* オプションの色を統一（既存 .luxury-select option パターンに合わせる）。
   ブラウザのネイティブドロップダウンは限定的にしかスタイル適用できないが、
   背景色・文字色・選択中色は反映される（青のシステム選択色を抑止）。 */
.ks-filter-sort-select option {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.ks-filter-sort-select option:hover,
.ks-filter-sort-select option:focus {
  background-color: rgba(255, 215, 0, 0.15);
  color: var(--text-primary);
}

.ks-filter-sort-select option:checked,
.ks-filter-sort-select option[selected] {
  background: var(--gold-primary);
  background-color: var(--gold-primary);
  color: #000;
  font-weight: 600;
}

/* "+N" のオーバーフロー表記（6 件目以降を圧縮） */
.ks-filter-selected-more {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-full, 999px);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* モバイル: ドロップダウンが画面幅を超えないように */
@media (max-width: 768px) {
  .ks-filter-category {
    flex: 1 1 auto;
  }
  .ks-filter-category-trigger {
    width: 100%;
    justify-content: space-between;
  }
  .ks-filter-category-dropdown {
    inset-inline: 0;
    max-width: none;
  }
  .ks-filter-search--compact {
    max-width: none;
  }
}

/* モバイル: 縦積みレイアウト
   2026-04-19: ブレークポイント 640px → 768px（プロジェクト標準 max-width: 768px に統一）
               + margin-left → margin-inline-start（RTL 対応） */
@media (max-width: 768px) {
  .ks-filter-row {
    padding: 14px;
  }

  .ks-filter-search {
    flex: 1 1 100%;
  }

  /* 件数表示（2026-04-27 マージ追加）— モバイルで全幅化＋中央寄せで視認性確保 */
  .ks-filter-row .projects-count-display {
    flex: 1 1 100%;
    justify-content: center;
  }

  .ks-filter-actions {
    margin-inline-start: 0;
    width: 100%;
    justify-content: flex-end;
  }
}

/* 小型スマホ: 件数表示のフォントを微縮小（読みやすさ重視） */
@media (max-width: 480px) {
  .ks-filter-row .projects-count-display {
    font-size: 12px;
    height: 44px;
  }

  /* 並び替えセレクト: 狭幅でラベル+セレクトが詰まらないよう微縮小 */
  .ks-filter-sort {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .ks-filter-sort-select {
    min-height: 32px;
    padding: 4px 8px;
    font-size: 12px;
  }
}