/* =====================================================================
   components.css — 共通UI部品（全ページ共通）
   余白・間隔は base.css のトークンを参照。
   個別調整は詳細度を上げて上書き（例: .dashboard .card{ padding:var(--sp-8) }）。
   ===================================================================== */

/* ---------- カード ---------- */
.card {
  background: var(--c-surface);
  padding: var(--card-pad);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.card.dense   { padding: var(--sp-4); }
.card.flush   { padding: 0; }
.card.hover:hover { box-shadow: var(--card-shadow-hover); border-color: var(--c-primary); }
.card + .card { margin-top: var(--card-gap); }   /* 縦に積んだカード間 */

.card-head { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-4); }
.card-sub  { color: var(--c-muted); font-size: var(--fs-sm); }

/* ---------- レイアウト（カードを並べる箱：間隔を共通化） ---------- */
.grid        { display: grid; gap: var(--card-gap); }
.grid--2     { grid-template-columns: repeat(2, 1fr); }
.grid--3     { grid-template-columns: repeat(3, 1fr); }
.grid--4     { grid-template-columns: repeat(4, 1fr); }
.grid--auto  { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.stack       { display: flex; flex-direction: column; gap: var(--card-gap); }
.row         { display: flex; gap: var(--sp-3); align-items: center; }
.row.wrap    { flex-wrap: wrap; }

@media (max-width: 900px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
  transition: all .15s; text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-d); color: #fff; }
.btn-outline { background: #fff; color: var(--c-primary); border-color: var(--c-primary); }
.btn-outline:hover { background: #ecfeff; }
.btn-ghost { background: transparent; color: var(--c-muted); }
.btn-ghost:hover { background: var(--c-border-soft); }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-sm { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- フォーム ---------- */
.form-group { margin-bottom: var(--sp-4); }
.form-group > label { display: block; font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--sp-1); color: var(--c-text); }
.input, input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], input[type=tel], input[type=url],
input[type=time], input[type=search], select, textarea {
  width: 100%; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: #fff; font-size: var(--fs-base);
}
.input:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(0, 169, 211, .15);
}
/* セレクトの矢印（サイト共通・右側に余白を確保）。各ページの個別指定にも勝つよう !important */
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none !important;
  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='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  background-size: 11px 11px !important;
  padding-right: 32px !important;
}
select::-ms-expand { display: none; }
.form-hint { font-size: var(--fs-xs); color: var(--c-faint); margin-top: var(--sp-1); }
/* チェックボックス/ラジオの基準サイズ（iOS Safari で極小化しないよう最低サイズと非縮小を確保）。
   個別に width/height を指定した箇所（.course-select 等）はそちらが優先される。 */
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; flex: none; accent-color: var(--c-primary-d); }

/* ---------- テーブル ---------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
/* データ表の横スクロール用ラッパー（スマホで列潰れ・はみ出しを防ぐ）。office レイアウトが自動付与 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (max-width: 640px) { .table-scroll > table { min-width: 560px; } }
/* スマホで非表示にするユーティリティ（CSV一括登録などPC向け操作に付与） */
@media (max-width: 640px) { .hide-sm { display: none !important; } }
/* スマホの時だけボタン群を全幅・右寄せにするユーティリティ。
   使い方: ボタンを囲む要素に class="actions-end-sm" を付与（PCでは無効）。 */
@media (max-width: 640px) {
  .actions-end-sm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; justify-content: flex-end; }
}
/* スマホ：ページ見出し(.greet)は文章を上・操作ボタンを下（右寄せ）に。各ページの基底指定に勝つよう!important */
@media (max-width: 640px) {
  .greet, .dash-greet { flex-direction: column !important; align-items: stretch !important; }
  .greet-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
  .dash-greet > div:last-child { justify-content: flex-end; }
  /* フォームの提出/保存ボタン群は全幅で右寄せに（アンケート・振り返り・診断等で共通） */
  .submit-actions { width: 100%; justify-content: flex-end; }
}
.table thead th {
  background: var(--c-bg); color: var(--c-muted); text-align: left; font-weight: 700;
  padding: var(--sp-3) var(--sp-4); border-bottom: 2px solid var(--c-border); white-space: nowrap;
}
.table tbody td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border-soft); }
.table tbody tr:hover { background: #fafbfc; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- バッジ / タグ ---------- */
.badge {
  display: inline-block; padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 700;
}
.badge-primary { background: #cdeef7; color: var(--c-primary-d); }
.badge-success { background: #d1fae5; color: var(--c-success-d); }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-danger  { background: #fee2e2; color: var(--c-danger-d); }
.badge-muted   { background: var(--c-border-soft); color: var(--c-muted); }
.badge-quote   { background: #eef2ff; color: #4338ca; }
.badge-consult { background: #dcfce7; color: #166534; }

/* ---------- ユーティリティ（最小限） ---------- */
.muted   { color: var(--c-muted); }
.faint   { color: var(--c-faint); }
.text-right { text-align: right; }
.flex-1  { flex: 1; }
.ml-auto { margin-left: auto; }