/* ════════════════════════════════════════════════════════════════
   fs-parts.css — STEP4：画面の中身の部品（バッジ・ボタン・詰めた表）を第2版の決まりに読み替える
   ─ 効くのは目印 fs-size の画面だけ。fs-size は「STEP4 を済ませた画面」の印でもある
     （大きさ＝fs-size.css と、中身の部品＝このファイルを、同じ目印でいっしょに当てる）。
   ─ 今ある画面は Bootstrap の色のクラス（badge bg-success・btn-outline-warning など）を直接書いている。
     クラス名はそのままで、ここで決まりの形にする。画面ごとの意味（主ボタンはどれか・削除か）は
     テンプレートの側で直す（このファイルは「迷ったら墨の線」の受け皿）。
   ─ 決まり（デザインの決まり 第2版）:
       3. ボタン … 主ボタン＝ロゴの青（1 画面に 1 つ）／普通＝墨の線／取り消し＝灰／削除＝赤
       6. 表     … 見出しは淡い灰＋墨（fs-color.css）
       7. バッジ … 白い地＋色の線＋アイコン＋言葉。面を塗らない
       15. 色    … 赤は削除とエラーだけ。水色・緑・黄の面は使わない
   ─ fs-size.css の後ろに読み込む。fs-color.css の「黄色の地＋黒い文字→白い文字」(.fs-theme .bg-warning.text-dark)
     より強くするため、バッジは .fs-size.fs-theme の 2 つの目印で書く。
   ─ 変更の一覧: docs/DESIGN_SHARED_PARTS.md
   ════════════════════════════════════════════════════════════════ */

/* ── バッジ：白い地＋色の線＋言葉（面を塗らない）──────────────────── */
.fs-size.fs-theme .badge {
  background: var(--fs-surface) !important;
  color: #1F2433 !important;
  border: 1px solid currentColor !important;
  font-weight: 700;
}
/* 意味の色（成功・警告・エラー）。色だけで伝えないよう、テンプレート側でアイコン＋言葉を付ける */
.fs-size.fs-theme .badge.bg-success, .fs-size.fs-theme .badge.text-bg-success,
.fs-size.fs-theme .badge.bg-success-subtle { color: #1F7A44 !important; }
.fs-size.fs-theme .badge.bg-warning, .fs-size.fs-theme .badge.text-bg-warning,
.fs-size.fs-theme .badge.bg-warning-subtle { color: #8A5300 !important; }
.fs-size.fs-theme .badge.bg-danger, .fs-size.fs-theme .badge.text-bg-danger,
.fs-size.fs-theme .badge.bg-danger-subtle { color: #B3261E !important; }
/* 水色（info）は墨（決まり 7.）。これが無いと「bg-info text-dark」の札が fs-color.css の白い文字になり、白い地に白で見えなくなる（2026-10-16） */
.fs-size.fs-theme .badge.bg-info, .fs-size.fs-theme .badge.text-bg-info,
.fs-size.fs-theme .badge.bg-info-subtle { color: #1F2433 !important; }
/* 補足の札（一般・無効・件数など）は灰 */
.fs-size.fs-theme .badge.bg-secondary, .fs-size.fs-theme .badge.text-bg-secondary,
.fs-size.fs-theme .badge.bg-secondary-subtle,
.fs-size.fs-theme .badge.bg-light, .fs-size.fs-theme .badge.text-bg-light { color: #5A6070 !important; }
/* 「未読」だけは墨の塗り（決まり 7.）。使うときは class="badge fs-badge-unread" */
.fs-size.fs-theme .badge.fs-badge-unread { background: #1F2433 !important; color: #fff !important; border-color: #1F2433 !important; }

/* ── ボタン ───────────────────────────────────────────────────── */
/* 緑・黄・水色・青の線のボタン → 墨の線（普通のボタン）。主ボタンにしたいものはテンプレートで btn-primary にする */
.fs-size .btn-success, .fs-size .btn-warning,
.fs-size .btn-outline-success, .fs-size .btn-outline-warning,
.fs-size .btn-outline-info, .fs-size .btn-outline-primary, .fs-size .btn-outline-dark {
  --bs-btn-color: #1F2433; --bs-btn-bg: #fff; --bs-btn-border-color: #B9BDCA;
  --bs-btn-hover-color: #1F2433; --bs-btn-hover-bg: #F1F2F6; --bs-btn-hover-border-color: #1F2433;
  --bs-btn-active-color: #1F2433; --bs-btn-active-bg: #E4E6EE; --bs-btn-active-border-color: #1F2433;
  --bs-btn-disabled-color: #9CA1AF; --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: #E2E4EC;
}
/* 取り消し＝灰 */
.fs-size .btn-secondary {
  --bs-btn-color: #1F2433; --bs-btn-bg: #F1F2F6; --bs-btn-border-color: #E2E4EC;
  --bs-btn-hover-color: #1F2433; --bs-btn-hover-bg: #E4E6EE; --bs-btn-hover-border-color: #C3C7D3;
  --bs-btn-active-color: #1F2433; --bs-btn-active-bg: #E4E6EE; --bs-btn-active-border-color: #C3C7D3;
}
/* 削除＝赤の線（押すと確認を出す）。赤は削除とエラーだけ */
.fs-size .btn-outline-danger {
  --bs-btn-color: #B3261E; --bs-btn-border-color: #B3261E;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #B3261E; --bs-btn-hover-border-color: #B3261E;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #921D17; --bs-btn-active-border-color: #921D17;
}
.fs-size .btn-link { --bs-btn-color: #1F2433; --bs-btn-hover-color: #1F2433; }

/* ── 詰めた表（table-sm）：横に広い表のため、余白だけ小さめ（文字は 16px のまま）──── */
.fs-size .table-sm > thead th, .fs-size .table-sm > tbody > tr > td,
.fs-size .table-sm > tbody > tr > th, .fs-size .table-sm > tfoot > tr > * { padding: .5rem .625rem; }

/* ── ページ送り：押しやすい大きさ ──────────────────────────────── */
.fs-size .page-link { min-height: 40px; display: flex; align-items: center; }

/* ── お知らせ枠：「アイコン＋言葉の箱（<i class="bi …"></i><div>…</div>）」の形のときだけ横に並べる ──
   fs-size.css は .alert を横並び（flex）にしている。今ある画面のお知らせ枠は、アイコン・文字・<strong> などを
   そのまま並べたものが多く、横並びにすると 1 語ずつ別の箱になって崩れる。形が合わないものは今までどおり。 */
.fs-size .alert { display: block; }
.fs-size .alert:has(> .bi:first-child + div) { display: flex; }

/* 小さいボタンの組（btn-group-sm）の中のボタンも、行の中のボタンと同じ 40px */
.fs-size .btn-group-sm > .btn { --bs-btn-padding-y: .375rem; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .9375rem; min-height: 40px; }

/* 文字のように置く小さなボタン（btn-link p-0：表の見出しの並び替えなど）は高さを足さない */
.fs-size .btn-link.p-0 { min-height: 0; }