/* ================================================================
   IFA Finder — common.css
   全ページ共通スタイル・デザイントークン
   Tailwind CDN (v3) と併用。フォント読み込みの直後、Tailwind CDN より前に読み込むこと。
================================================================ */

/* ----------------------------------------------------------------
   デザイントークン
---------------------------------------------------------------- */
:root {
  /* Primary カラーパレット */
  --color-primary-50:  #eff4ff;
  --color-primary-100: #dce8ff;
  --color-primary-200: #b8d0ff;
  --color-primary-300: #82acff;
  --color-primary-400: #4d7df5;
  --color-primary-500: #2250df;
  --color-primary-600: #1a40b5;
  --color-primary-700: #153390;
  --color-primary-800: #10266b;
  --color-primary-900: #0b1a4a;
  --color-primary-950: #060e2f;

  /* テキスト・ボーダー */
  --color-text-body:      #3d4b5f;
  --color-border-default: #e2e8f0;  /* Tailwind slate-200 */

  /* カードホバー */
  --card-border-hover: var(--color-primary-200);           /* #b8d0ff */
  --card-bg-hover:     #f0f5ff;
  --card-shadow-hover: 0 4px 16px rgba(34, 80, 223, 0.10);

  /* カード内アイコンホバー */
  --card-icon-color-hover: var(--color-primary-500);  /* #2250df */
  --card-icon-bg-hover:    var(--color-primary-100);  /* #dce8ff */
}

/* ----------------------------------------------------------------
   基本タイポグラフィ
---------------------------------------------------------------- */
.text-body     { color: var(--color-text-body); }
body           { line-height: 2.0; letter-spacing: 0.02em; }
h1, h2, h3, h4 { line-height: 1.4; letter-spacing: 0.01em; }

/* ----------------------------------------------------------------
   ナビゲーション — 680px 以上で中央メニューを表示
---------------------------------------------------------------- */
@media (min-width: 680px) {
  #center-nav { display: flex !important; }
}

/* ----------------------------------------------------------------
   サイドバー — スクロールバー非表示
---------------------------------------------------------------- */
aside                    { scrollbar-width: none; }
aside::-webkit-scrollbar { display: none; }

/* ----------------------------------------------------------------
   IFAアバター — 丸い囲み + ローマ字頭文字2文字

   使い方:
     <span class="ifa-avatar" data-first-roman="Taro" data-last-roman="Okamoto"></span>
     または JS から initials を innerHTML/textContent で直接セットする。
   サイズ:
     既定 36px。ページ側で width/height/font-size を上書きできる。
---------------------------------------------------------------- */
.ifa-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background-color: var(--color-primary-50);
  color: var(--color-primary-600);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
}

/* ----------------------------------------------------------------
   カードコンポーネント

   通常時の border / background は Tailwind クラス
   (border, border-slate-200, bg-white) で指定する。
   ホバー時の変化のみここで定義。
---------------------------------------------------------------- */
.card {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

/*
  <button> 要素をカードとして使う場合のリセット。
  border: none は書かない — Tailwind の border クラスを生かすため。
*/
button.card {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  text-align: left;
  width: 100%;
}

/* ホバー時: 枚線・背景・影 */
.card:hover {
  border-color:     var(--card-border-hover);
  box-shadow:       var(--card-shadow-hover);
  background-color: var(--card-bg-hover);
}

/* ホバー時: カード内アイコン
   top.html → .card-ext-icon / securities.html → .card-chevron */
.card:hover .card-ext-icon,
.card:hover .card-chevron {
  color:            var(--card-icon-color-hover);
  background-color: var(--card-icon-bg-hover);
}

/* ----------------------------------------------------------------
   サイドバー — フィルターUI部品

   使い方:
     セクション見出し span に .sidebar-filter-label を付与する。
     リセットボタン button に .sidebar-reset-btn を付与する。
     チェックボックス行 label に .sidebar-checkbox-label を付与する。
     スクロールリスト div に .sidebar-scroll-list を付与する（高さはページ固有で上書き可）。
---------------------------------------------------------------- */

/* セクション見出し（「地域」「提携証券会社」等） */
.sidebar-filter-label {
  display:        flex;
  align-items:    center;
  gap:            0.25rem;     /* gap-1 */
  font-size:      0.75rem;     /* text-xs */
  font-weight:    600;         /* font-semibold */
  color:          #64748b;     /* text-slate-500 */
  text-transform: uppercase;
  letter-spacing: 0.05em;      /* tracking-wider */
}

/* リセットボタン */
.sidebar-reset-btn {
  display:          flex;
  align-items:      center;
  gap:              0.125rem;  /* gap-0.5 */
  font-size:        0.625rem;  /* text-[10px] */
  color:            #94a3b8;   /* text-slate-400 */
  border:           1px solid #e2e8f0; /* border-slate-200 */
  border-radius:    9999px;    /* rounded-full */
  padding:          0.125rem 0.375rem; /* py-0.5 px-1.5 */
  background:       transparent;
  cursor:           pointer;
  transition:       color 0.15s, border-color 0.15s;
}
.sidebar-reset-btn:hover {
  color:         #475569;  /* text-slate-600 */
  border-color:  #cbd5e1;  /* border-slate-300 */
}

/* チェックボックス行 */
.sidebar-checkbox-label {
  display:      flex;
  align-items:  center;
  gap:          0.5rem;    /* gap-2 */
  cursor:       pointer;
  padding:      0.25rem 0.25rem; /* py-1 px-1 */
  border-radius: 0.25rem; /* rounded */
  transition:   background-color 0.15s;
}
.sidebar-checkbox-label:hover { background-color: #f8fafc; } /* hover:bg-slate-50 */

/* スクロールリスト（高さはページ側で上書き） */
.sidebar-scroll-list {
  overflow-y:     auto;
  scrollbar-width: thin;
}

/* ----------------------------------------------------------------
   ソートバー — 結果数 / ページネーション / プルダウン 共通レイアウト
---------------------------------------------------------------- */

/* 「並び順」ラベルテキスト */
.sort-bar-label {
  font-size: 0.75rem; /* text-xs */
  color:     #94a3b8; /* text-slate-400 */
}

/* ----------------------------------------------------------------
   ページネーション — ボタン共通

   JS で innerHTML に埋め込む button/span に対応。
   Tailwind CDN の JIT では動的生成されたクラスが当たらないため
   ここで明示的に定義する。
---------------------------------------------------------------- */

/* 全ボタン共通ベース */
.pg-btn {
  width:           1.75rem;  /* w-7 */
  height:          1.75rem;  /* h-7 */
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   0.25rem;  /* rounded */
  border:          none;
  background:      transparent;
  cursor:          pointer;
  font-size:       0.75rem;  /* text-xs */
  transition:      background-color 0.15s;
}

/* 無効状態（前後端ページ） */
.pg-btn:disabled,
.pg-btn.disabled {
  color:  #cbd5e1; /* text-slate-300 */
  cursor: default;
}

/* アクティブ（現在ページ） */
.pg-btn.active {
  background-color: #2250df; /* bg-primary-500 */
  color:            #ffffff;
  font-weight:      600;     /* font-semibold */
  cursor:           default;
}

/* 通常・アイコンボタン共通ホバー */
.pg-btn:not(:disabled):not(.active):hover {
  background-color: #f1f5f9; /* hover:bg-slate-100 */
}
.pg-btn:not(:disabled):not(.active) { color: #475569; } /* text-slate-600 */

/* 省略記号スパン */
.pg-ellipsis {
  width:           1.75rem;
  height:          1.75rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.75rem;
  color:           #94a3b8; /* text-slate-400 */
}

/* ----------------------------------------------------------------
   モーダル — 全ページ共通

   使い方:
     オーバーレイ div に .modal-overlay を付与する。
     パネル div に .modal-panel を付与する。
     セクション見出し p/span に .modal-section-label を付与する。
     JS で overlay.classList.add('open') / remove('open') で開閉する。
---------------------------------------------------------------- */

/* オーバーレイ: 非表示 → .open で flex 表示 */
.modal-overlay       { display: none; }
.modal-overlay.open  { display: flex; }

/* パネル: 入場アニメーション */
.modal-panel { animation: modal-in 0.18s ease; }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* セクション見出し（「基本情報」「提携証券会社」等） */
.modal-section-label {
  font-size:      0.75rem;   /* text-xs */
  font-weight:    600;       /* font-semibold */
  color:          #64748b;   /* text-slate-500 */
  text-transform: uppercase;
  letter-spacing: 0.05em;    /* tracking-wider */
  margin-bottom:  0.75rem;   /* mb-3 */
}

/* 提携証券会社バッジ（モーダル・管理画面共通） */
.sec-badge {
  display:          inline-flex;
  align-items:      center;
  padding:          0.25rem 0.625rem;  /* py-1 px-2.5 */
  border-radius:    0.25rem;           /* rounded */
  background-color: #f1f5f9;           /* slate-100 */
  font-size:        0.75rem;           /* text-xs */
  color:            #475569;           /* slate-600 */
}

/* ----------------------------------------------------------------
   並び順プルダウン (#sort-select)
   一覧ページ共通。カスタム矢印アイコンを設定。
---------------------------------------------------------------- */
#sort-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding:          0.25rem 1.75rem 0.25rem 0.5rem; /* pr は矢印アイコン分を確保 */
  font-size:        0.75rem;          /* text-xs */
  border:           1px solid #e2e8f0; /* border-slate-200 */
  border-radius:    0.5rem;            /* rounded-lg */
  background-color: #ffffff;
  color:            #475569;           /* text-slate-600 */
  transition:       border-color 0.15s, box-shadow 0.15s;
  cursor:           pointer;
}
#sort-select:hover { border-color: #cbd5e1; /* slate-300 */ }
#sort-select:focus {
  outline:      none;
  border-color: #4d7df5;                       /* primary-400 */
  box-shadow:   0 0 0 3px rgba(34,80,223,0.12); /* primary-500/12 */
}