/**
 * BizFlo UI — ボタンシステム v2
 *
 * 目的:
 *   Bootstrap の意味色（success / danger / info / warning / secondary）を
 *   「装飾」として使ってきた結果、1画面に5色のボタンが並ぶ状態になっている。
 *   このファイルはその置き換え先。
 *
 * ── v2 で変えたこと（実システムの実測にもとづく） ──────────────
 *   参照: Vercel Geist(32px/14px/w500/r6px)、shadcn/ui(32px/14px/w500)、
 *         SmartHR UI（Primary/Secondary/Tertiary/Danger/Text の5種）、
 *         Shopify Polaris（variant × tone モデル）、デジタル庁DS（Small 36 / X-Small 28）
 *
 *   1. 寸法を 34px/13px/w600 → 32px/14px/w500 に。太字＋小文字＋高めの箱は「詰まって古い」
 *   2. tone を variant から分離（Polaris方式）。--critical はどの variant とも合成できる
 *      → 表の行では控えめな赤、確認ダイアログでは塗りの赤、を同じ語彙で書ける
 *   3. :active の translateY(1px) を廃止。押すと動くのは旧世代の表現で、
 *      ツールバーでは1pxのガタつきになる。色を沈める方式に変更
 *   4. フォーカスリングを「白ハロー + ブランド色2px」の二重に。
 *      色付き背景やグレー地の上でも必ず見える（Primer/Polaris と同方式）
 *   5. secondary の枠線を細く淡く。濃い枠が全ボタンに付くとツールバーが箱だらけになる
 *   6. --tonal を追加（薄いブランド地・枠なし）。「選択中/実行済み」を色を増やさず表せる
 *
 * ── 設計原則 ────────────────────────────────────────
 *   1. Bootstrap非依存。`.bf-` prefix なので `.btn` と衝突しない（併存中も安全）
 *   2. 色は「意味」にだけ使う。装飾に色を使わない
 *   3. 階層は3段 ── primary（1画面1つ） / secondary（既定） / ghost（三次）
 *      + tone（default / critical）の掛け合わせ
 *   4. 赤は「取り消せない操作」専用。PDF出力・エクスポートに赤や緑を使わない
 *
 * ── 使い分け早見表 ───────────────────────────────────
 *   新規作成 / 保存 / 送信          → .bf-btn--primary   （1画面に1つ）
 *   検索 / エクスポート / 設定を開く → .bf-btn--secondary （既定。迷ったらこれ）
 *   ツールバーの補助操作 / 閉じる    → .bf-btn--ghost
 *   表の行の削除                    → .bf-btn--ghost.bf-btn--critical
 *   詳細画面の削除                  → .bf-btn--secondary.bf-btn--critical
 *   確認ダイアログの最終確定         → .bf-btn--primary.bf-btn--critical
 *   選択中 / 実行済み               → .bf-btn--tonal（または .is-active）
 *   本文中のリンク的操作             → .bf-btn--plain
 * ────────────────────────────────────────────────
 */

/* ==========================================================================
   命名の方針
   --------------------------------------------------------------------------
   このファイルにあるものが「全画面で使ってよい共通クラス」。
   ページ固有のスタイルは、そのページの <style> に書く。

   ⚠ 現状、ページ固有なのに bf- を付けてしまっているものがある:
       .bf-seat-meter        （会社設定のユーザー枠メーター）
       .bf-legend / .bf-legend-item / .bf-legend-swatch （稼働分析の区分凡例）
       .bf-optional-section  （受注伝票の折りたたみ）
       .bf-cell-default      （会社設定の既定値セル）
     これらは各ページの <style> にしか定義が無いため、他画面で使っても効かない。
     共通化したくなったらこのファイルへ移し、そうでなければページ固有の接頭辞に直すこと。
   ========================================================================== */

/* ============================================================
   Design Tokens
   ============================================================ */
:root {
    --bf-surface:        #ffffff;
    --bf-gray-50:        #f7f9fc;
    --bf-gray-100:       #eef2f7;
    --bf-gray-200:       #dfe3ea;
    --bf-gray-300:       #c5cdd9;
    --bf-gray-400:       #98a2b3;
    --bf-gray-500:       #667085;
    --bf-gray-600:       #475467;
    --bf-gray-700:       #344054;
    --bf-gray-800:       #1d2939;

    /* 枠線は「あるとわかる」程度まで淡く。濃いとツールバーが箱だらけに見える */
    --bf-border:         #e3e8ef;
    --bf-border-hover:   #cdd5e0;

    --bf-red-50:         #fef3f2;
    --bf-red-100:        #fee4e2;
    --bf-red-300:        #fda29b;
    --bf-red-500:        #d92d20;
    --bf-red-600:        #b42318;
    --bf-red-700:        #912018;

    --bf-r-md:           6px;
    --bf-r-pill:         999px;

    /* 高さ: Geist / shadcn の実測に合わせて 28 / 32 / 40 */
    --bf-btn-h-xs:       22px;   /* 表の行に2段で入るような極小コントロール用 */
    --bf-btn-h-sm:       28px;
    --bf-btn-h-md:       32px;
    --bf-btn-h-lg:       40px;

    --bf-ease:           cubic-bezier(.4, 0, .2, 1);
}

/* テーマ色のエイリアスは :root だけでなく各コンポーネントでも解決させる。
   こうしておくと「この範囲だけテーマ色を変える」（OEMプレビュー、埋め込み画面など）が効く。
   :root だけで宣言すると値が :root で確定し、子孫での --primary-color 上書きが無視される。 */
.bf-btn,
.bf-segmented {
    --bf-primary:       var(--primary-color, #2563eb);
    --bf-primary-hover: var(--primary-hover, #1d4ed8);
    --bf-primary-soft:  var(--primary-bg-light, rgba(37, 99, 235, .12));
    --bf-primary-ring:  var(--primary-color, #2563eb);

    /* tone。--critical を付けるとこの3変数だけが赤に差し替わり、
       variant 側のCSSは一切書き換えずに済む */
    --bf-tone:          var(--bf-primary);
    --bf-tone-hover:    var(--bf-primary-hover);
    --bf-tone-soft:     var(--bf-primary-soft);
    --bf-tone-ring:     var(--bf-primary-ring);
    --bf-tone-text:     var(--bf-gray-800);
}

.bf-btn--critical {
    --bf-tone:        var(--bf-red-500);
    --bf-tone-hover:  var(--bf-red-600);
    --bf-tone-soft:   var(--bf-red-50);
    --bf-tone-ring:   var(--bf-red-500);
    --bf-tone-text:   var(--bf-red-600);
}

/* ============================================================
   Base
   ============================================================ */

/* display を指定すると、ブラウザ既定の [hidden] { display: none } を
   打ち消してしまう。hidden を付けた（あるいは JS で .hidden = true にした）
   ボタンが消えずに出たままになるので、ここで戻しておく。
   使う側で毎回 [hidden] を書き直すのは、忘れたところだけ壊れる。 */
.bf-btn[hidden] { display: none; }

.bf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    height: var(--bf-btn-h-md);
    padding: 0 12px;

    border: 1px solid transparent;
    border-radius: var(--bf-r-md);

    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;

    background: var(--bf-surface);
    color: var(--bf-gray-800);

    cursor: pointer;
    user-select: none;
    transition: background .15s var(--bf-ease),
                border-color .15s var(--bf-ease),
                color .15s var(--bf-ease),
                box-shadow .15s var(--bf-ease);
}

.bf-btn:hover { text-decoration: none; }

/* 押しても動かさない。色を沈めるだけ。
   translate すると押すたびにツールバーが1pxガタつき、文字も滲む */
.bf-btn:active:not(:disabled) { transition-duration: 0s; }

/* キーボード操作時のみリングを出す。
   白ハローを内側に敷くことで、グレー地・色付き地の上でもリングが埋もれない */
.bf-btn:focus { outline: none; }
.bf-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bf-surface),
                0 0 0 4px var(--bf-tone-ring);
}

/* 無効状態。半透明にすると primary が「読み込み中」に見えるので、
   色そのものをニュートラルに落として「今は押せない」を明示する */
.bf-btn:disabled,
.bf-btn[aria-disabled="true"],
.bf-btn.is-disabled {
    background: var(--bf-gray-100);
    border-color: transparent;
    color: var(--bf-gray-400);
    cursor: not-allowed;
    box-shadow: none;
}
.bf-btn:disabled .bf-btn__count {
    background: var(--bf-gray-200);
    color: var(--bf-gray-400);
}

/* アイコン（Font Awesome / Material Icons 両対応） */
.bf-btn > i,
.bf-btn > .fa,
.bf-btn > .fas,
.bf-btn > .far {
    font-size: 13px;
    line-height: 1;
}
.bf-btn > .material-icons {
    font-size: 16px;
    line-height: 1;
}

/* ============================================================
   Variants
   すべて --bf-tone を参照するので、--critical を足すだけで赤版になる
   ============================================================ */

/* 主アクション。1画面に1つが原則 */
.bf-btn--primary {
    background: var(--bf-tone);
    border-color: var(--bf-tone);
    color: #fff;
}
.bf-btn--primary:hover {
    background: var(--bf-tone-hover);
    border-color: var(--bf-tone-hover);
    color: #fff;
}
.bf-btn--primary:active:not(:disabled) {
    background: var(--bf-tone-hover);
    filter: brightness(.92);
}

/* 既定。迷ったらこれ。エクスポート・設定・検索などはすべてここ */
.bf-btn--secondary {
    background: var(--bf-surface);
    border-color: var(--bf-border);
    color: var(--bf-tone-text);
}
.bf-btn--secondary:hover {
    background: var(--bf-gray-50);
    border-color: var(--bf-border-hover);
    color: var(--bf-tone-text);
}
.bf-btn--secondary:active:not(:disabled) { background: var(--bf-gray-100); }
.bf-btn--secondary.bf-btn--critical { border-color: var(--bf-red-300); }
.bf-btn--secondary.bf-btn--critical:hover {
    background: var(--bf-red-50);
    border-color: var(--bf-red-500);
}

/* 三次。枠が無いぶん一覧に並べてもうるさくならない */
.bf-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--bf-gray-600);
}
.bf-btn--ghost:hover {
    background: var(--bf-gray-100);
    color: var(--bf-gray-800);
}
.bf-btn--ghost:active:not(:disabled) { background: var(--bf-gray-200); }
.bf-btn--ghost.bf-btn--critical { color: var(--bf-red-600); }
.bf-btn--ghost.bf-btn--critical:hover {
    background: var(--bf-red-50);
    color: var(--bf-red-700);
}

/* 薄いブランド地。「選択中」「実行済み」を新しい色を増やさずに表せる */
.bf-btn--tonal,
.bf-btn.is-active,
.bf-btn[aria-pressed="true"] {
    background: var(--bf-tone-soft);
    border-color: transparent;
    color: var(--bf-tone);
}
.bf-btn--tonal:hover,
.bf-btn.is-active:hover,
.bf-btn[aria-pressed="true"]:hover {
    background: var(--bf-tone-soft);
    border-color: var(--bf-tone);
    color: var(--bf-tone);
}

/* テキストリンク風 */
.bf-btn--plain,
.bf-btn--link {          /* --link は v1 の名前。互換のため残す */
    background: transparent;
    border-color: transparent;
    color: var(--bf-tone);
    padding: 0 4px;
    height: auto;
}
.bf-btn--plain:hover,
.bf-btn--link:hover {
    color: var(--bf-tone-hover);
    text-decoration: underline;
}

/* ---- v1 互換エイリアス（新規コードでは使わない） ----------------
   .bf-btn--danger        → .bf-btn--ghost.bf-btn--critical と同じ見た目
   .bf-btn--danger--solid → .bf-btn--primary.bf-btn--critical と同じ見た目
   既に移行済みの画面を壊さないために残している。順次置き換えること。 */
.bf-btn--danger {
    background: transparent;
    border-color: transparent;
    color: var(--bf-red-600);
}
.bf-btn--danger:hover {
    background: var(--bf-red-50);
    color: var(--bf-red-700);
}
.bf-btn--danger:focus-visible {
    box-shadow: 0 0 0 2px var(--bf-surface), 0 0 0 4px var(--bf-red-500);
}
.bf-btn--danger.bf-btn--solid {
    background: var(--bf-red-500);
    border-color: var(--bf-red-500);
    color: #fff;
}
.bf-btn--danger.bf-btn--solid:hover {
    background: var(--bf-red-600);
    border-color: var(--bf-red-600);
    color: #fff;
}

/* ============================================================
   Sizes / Modifiers
   ============================================================ */
.bf-btn--xs { height: var(--bf-btn-h-xs); padding: 0 6px; font-size: 11px; gap: 4px; }
.bf-btn--xs > i { font-size: 10px; }
.bf-btn--xs.bf-btn--icon { width: var(--bf-btn-h-xs); }

.bf-btn--sm { height: var(--bf-btn-h-sm); padding: 0 9px; font-size: 12px; gap: 5px; }
.bf-btn--sm > .material-icons { font-size: 14px; }
.bf-btn--sm > i { font-size: 11px; }

.bf-btn--lg { height: var(--bf-btn-h-lg); padding: 0 18px; font-size: 14px; }
.bf-btn--lg > .material-icons { font-size: 18px; }

.bf-btn--block { display: flex; width: 100%; }

/* 見出し＋補足説明を縦に積むボタン（選択肢を提示する確認ダイアログ用） */
.bf-btn--stacked {
    height: auto;
    min-height: var(--bf-btn-h-lg);
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 10px 14px;
    text-align: left;
    white-space: normal;
}
.bf-btn--stacked > small,
.bf-btn--stacked > .bf-btn__desc {
    font-size: 11px;
    font-weight: 400;
    opacity: .75;
    line-height: 1.4;
}

/* アイコンのみ。title か aria-label を必ず付けること */
.bf-btn--icon { width: var(--bf-btn-h-md); padding: 0; }
.bf-btn--icon.bf-btn--sm { width: var(--bf-btn-h-sm); }
.bf-btn--icon.bf-btn--lg { width: var(--bf-btn-h-lg); }

/* ボタン内カウンタ（例: 選択0件） */
.bf-btn__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--bf-r-pill);
    background: var(--bf-gray-200);
    color: var(--bf-gray-600);
    font-size: 11px;
    font-weight: 600;
}
.bf-btn--primary .bf-btn__count { background: rgba(255, 255, 255, .25); color: #fff; }
.bf-btn--tonal .bf-btn__count,
.bf-btn.is-active .bf-btn__count { background: var(--bf-surface); color: var(--bf-tone); }

/* 処理中。aria-busy="true" を付けると自動でスピナーになる */
.bf-btn[aria-busy="true"] { pointer-events: none; opacity: .7; }
.bf-btn[aria-busy="true"]::before {
    content: "";
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: bf-spin .6s linear infinite;
}
@keyframes bf-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Group（連結ボタン / スプリットボタン）
   ============================================================ */
.bf-btn-group {
    display: inline-flex;
    align-items: stretch;
    /* Bootstrap の dropdown JS が .dropdown-menu を絶対配置するときの基準になる */
    position: relative;
}
.bf-btn-group > .bf-btn { border-radius: 0; }
.bf-btn-group > .bf-btn:first-child { border-top-left-radius: var(--bf-r-md); border-bottom-left-radius: var(--bf-r-md); }
.bf-btn-group > .bf-btn:last-child  { border-top-right-radius: var(--bf-r-md); border-bottom-right-radius: var(--bf-r-md); }
.bf-btn-group > .bf-btn + .bf-btn   { margin-left: -1px; }
.bf-btn-group > .bf-btn:hover,
.bf-btn-group > .bf-btn:focus-visible { z-index: 1; }

/* スプリットボタンの右側（キャレットのみ） */
.bf-btn--split { padding: 0 7px; }
.bf-btn--split::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .7;
}

/* ============================================================
   Segmented control（排他選択トグル）
   「日/週/月」「未入金/入金済」「PDF/Excel」など、アプリ全体で
   btn-group + btn-check / btn-group-toggle として散らばっている物の置き換え先。

   使い方:
     <div class="bf-segmented">
       <input type="radio" name="x" id="a" checked><label for="a">日</label>
       <input type="radio" name="x" id="b"><label for="b">週</label>
     </div>
   ============================================================ */
.bf-segmented {
    display: inline-flex;
    padding: 3px;
    border-radius: var(--bf-r-md);
    background: var(--bf-gray-100);
}
.bf-segmented > input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.bf-segmented > label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 26px;
    padding: 0 14px;
    margin: 0;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: var(--bf-gray-600);
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s var(--bf-ease), color .15s var(--bf-ease), box-shadow .15s var(--bf-ease);
}
.bf-segmented > label:hover { color: var(--bf-gray-800); }
.bf-segmented > input:checked + label {
    background: var(--bf-surface);
    color: var(--bf-primary);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.bf-segmented > input:focus-visible + label {
    box-shadow: 0 0 0 2px var(--bf-gray-100), 0 0 0 4px var(--bf-primary);
}
.bf-segmented > input:disabled + label { opacity: .45; cursor: not-allowed; }

@media (max-width: 768px) {
    .bf-segmented > label { height: 32px; font-size: 13px; }
}

/* ============================================================
   フォームの保存バー
   長いフォームで「最下部まで下げないと保存できない」を解消する。
   画面下に貼り付き、スクロール中もいつでも保存できる。
   ============================================================ */
.bf-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 24px -16px 0;
    padding: 12px 16px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--bf-border);
}
/* 削除など「右端に離して置きたい」ものに付ける */
.bf-form-actions__end { margin-left: auto; }

@media (max-width: 768px) {
    .bf-form-actions {
        /* モバイルは下タブバーの上に載せる */
        bottom: calc(env(safe-area-inset-bottom, 0px) + 56px);
        margin-left: -12px;
        margin-right: -12px;
    }
    .bf-form-actions > .bf-btn { flex: 1 1 auto; }
    .bf-form-actions__end { flex: 0 0 auto; }
}

/* ============================================================
   ツールバー（アクションバー行）
   ============================================================ */
.bf-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ツールバー内でセレクトとボタンをくっつける（例: 期間基準 + PDF出力） */
.bf-field-group {
    display: inline-flex;
    align-items: stretch;
}
.bf-field-group > .bf-select {
    height: var(--bf-btn-h-md);
    padding: 0 26px 0 10px;
    border: 1px solid var(--bf-border);
    border-right: none;
    border-radius: var(--bf-r-md) 0 0 var(--bf-r-md);
    background: var(--bf-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23667085' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 7px center / 13px;
    font-family: inherit;
    font-size: 14px;
    color: var(--bf-gray-800);
    appearance: none;
    cursor: pointer;
}
.bf-field-group > .bf-select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bf-surface), 0 0 0 4px var(--primary-color, #2563eb);
    position: relative;
    z-index: 1;
}
.bf-field-group > .bf-btn { border-radius: 0 var(--bf-r-md) var(--bf-r-md) 0; }

/* ============================================================
   モバイル
   タップ領域を 40px 以上に広げる（Appleの推奨44ptに寄せる）
   ============================================================ */
@media (max-width: 768px) {
    .bf-btn     { height: 40px; }
    .bf-btn--sm { height: 34px; font-size: 13px; }
    .bf-btn--lg { height: 46px; }
    .bf-btn--icon    { width: 40px; }
    .bf-btn--icon.bf-btn--sm { width: 34px; }
    .bf-toolbar > .bf-btn,
    .bf-toolbar > .bf-btn-group,
    .bf-toolbar > .bf-field-group { flex: 1 1 auto; }
}

/* ============================================================
   Bootstrap 互換シム（移行期間中のみ）

   169ファイル・約1100箇所の .btn を一度に書き換えるのは危険なので、
   Bootstrap のボタンクラスを bf トークンに写像して「見た目だけ先に」揃える。
   マークアップの本移行が済んだ画面から、この層は不要になっていく。

   写像の考え方 ── 装飾として使われていた意味色を潰す:
     btn-primary / btn-outline-primary  → primary / secondary
     btn-secondary / btn-outline-secondary / btn-light / btn-dark → secondary
     btn-success / btn-info / btn-warning とその outline → secondary
       （CSV出力=緑、PDF出力=赤、詳細=水色 のような装飾使いを無効化する）
     btn-danger        → critical の塗り（確認系で使われている想定）
     btn-outline-danger → critical の控えめ（一覧の削除で使われている想定）
     btn-link          → plain

   除外:
     .btn-close  … Bootstrap のモーダル×ボタン。別物なので触らない
     .dropdown-item, .nav-link, .page-link … .btn ではないので元から対象外
     accounting/ 配下 … acc_layout.html が bf_ui.css を読まないため影響しない
   ============================================================ */

.btn:not(.btn-close) {
    --bf-primary:       var(--primary-color, #2563eb);
    --bf-primary-hover: var(--primary-hover, #1d4ed8);
    --bf-primary-soft:  var(--primary-bg-light, rgba(37, 99, 235, .12));

    --bf-tone:          var(--bf-primary);
    --bf-tone-hover:    var(--bf-primary-hover);
    --bf-tone-soft:     var(--bf-primary-soft);
    --bf-tone-ring:     var(--bf-primary);
    --bf-tone-text:     var(--bf-gray-800);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    /* シムは中身が未知の1100箇所に当たるので、height ではなく min-height を使う。
       複数行ラベルや <small> 入りのボタンが潰れないようにするため */
    min-height: var(--bf-btn-h-md);
    height: auto;
    padding: 5px 12px;

    border: 1px solid transparent;
    border-radius: var(--bf-r-md);

    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;

    background: var(--bf-surface);
    color: var(--bf-gray-800);

    transition: background .15s var(--bf-ease),
                border-color .15s var(--bf-ease),
                color .15s var(--bf-ease),
                box-shadow .15s var(--bf-ease);
}
/* 幅指定・全幅指定が入っているボタンは元のレイアウトを尊重する */
.btn:not(.btn-close).w-100,
.btn:not(.btn-close).btn-block,
.d-grid > .btn:not(.btn-close) { width: 100%; }

.btn:not(.btn-close):focus { outline: none; box-shadow: none; }
.btn:not(.btn-close):focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bf-surface), 0 0 0 4px var(--bf-tone-ring);
}
.btn:not(.btn-close):disabled,
.btn:not(.btn-close).disabled {
    background: var(--bf-gray-100);
    border-color: transparent;
    color: var(--bf-gray-400);
    opacity: 1;
    cursor: not-allowed;
}

/* ---- 主アクション ---- */
.btn.btn-primary {
    background: var(--bf-tone); border-color: var(--bf-tone); color: #fff;
}
.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus {
    background: var(--bf-tone-hover); border-color: var(--bf-tone-hover); color: #fff;
}

/* ---- 既定（装飾色の意味色をここに全部集約する） ---- */
.btn.btn-secondary,
.btn.btn-light,
.btn.btn-dark,
.btn.btn-success,
.btn.btn-info,
.btn.btn-warning,
.btn.btn-outline-primary,
.btn.btn-outline-secondary,
.btn.btn-outline-success,
.btn.btn-outline-info,
.btn.btn-outline-warning,
.btn.btn-outline-light,
.btn.btn-outline-dark {
    background: var(--bf-surface);
    border-color: var(--bf-border);
    color: var(--bf-gray-800);
}
.btn.btn-secondary:hover,
.btn.btn-light:hover,
.btn.btn-dark:hover,
.btn.btn-success:hover,
.btn.btn-info:hover,
.btn.btn-warning:hover,
.btn.btn-outline-primary:hover,
.btn.btn-outline-secondary:hover,
.btn.btn-outline-success:hover,
.btn.btn-outline-info:hover,
.btn.btn-outline-warning:hover,
.btn.btn-outline-light:hover,
.btn.btn-outline-dark:hover {
    background: var(--bf-gray-50);
    border-color: var(--bf-border-hover);
    color: var(--bf-gray-800);
}

/* ---- 破壊的操作だけは critical を残す ---- */
.btn.btn-danger {
    background: var(--bf-red-500); border-color: var(--bf-red-500); color: #fff;
}
.btn.btn-danger:hover {
    background: var(--bf-red-600); border-color: var(--bf-red-600); color: #fff;
}
.btn.btn-outline-danger {
    background: var(--bf-surface); border-color: var(--bf-red-300); color: var(--bf-red-600);
}
.btn.btn-outline-danger:hover {
    background: var(--bf-red-50); border-color: var(--bf-red-500); color: var(--bf-red-700);
}
.btn.btn-danger:focus-visible,
.btn.btn-outline-danger:focus-visible {
    box-shadow: 0 0 0 2px var(--bf-surface), 0 0 0 4px var(--bf-red-500);
}

/* ---- リンク風 ---- */
.btn.btn-link {
    background: transparent; border-color: transparent;
    color: var(--bf-primary); height: auto; padding: 0 4px;
}
.btn.btn-link:hover { color: var(--bf-primary-hover); text-decoration: underline; }

/* ---- サイズ ---- */
.btn.btn-sm { min-height: var(--bf-btn-h-sm); height: auto; padding: 4px 9px; font-size: 12px; gap: 5px; }
.btn.btn-lg { min-height: var(--bf-btn-h-lg); height: auto; padding: 8px 18px; font-size: 14px; }

/* 選択状態（btn-check / btn-group-toggle を使っている画面） */
.btn-check:checked + .btn,
.btn.active {
    background: var(--bf-primary-soft) !important;
    border-color: var(--bf-primary) !important;
    color: var(--bf-primary) !important;
}

/* .btn-group は Bootstrap の角丸処理をそのまま活かす */
.btn-group > .btn:not(:first-child) { margin-left: -1px; }

/* Bootstrap の .btn-group は角丸を 0 にする独自ルールを持っている。
   詳細度は Bootstrap 側が上なのでそのまま効くが、明示しておく */
.btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; }

/* ---- .bf-btn を Bootstrap のコンテナの中で使ったときの補正 --------------
   マークアップを段階移行すると、親は .btn-group / .input-group のままで
   中身だけ .bf-btn になる期間が生まれる。その組み合わせを成立させる。 */
.btn-group > .bf-btn,
.input-group > .bf-btn { border-radius: 0; }
.btn-group > .bf-btn:first-child,
.input-group > .bf-btn:first-child {
    border-top-left-radius: var(--bf-r-md); border-bottom-left-radius: var(--bf-r-md);
}
.btn-group > .bf-btn:last-child,
.input-group > .bf-btn:last-child {
    border-top-right-radius: var(--bf-r-md); border-bottom-right-radius: var(--bf-r-md);
}
.btn-group > .bf-btn + .bf-btn,
.input-group > .bf-btn + .bf-btn { margin-left: -1px; }
.btn-group > .bf-btn:hover,
.btn-group > .bf-btn:focus-visible { z-index: 1; }

/* 縦積みグループ（.btn-group-vertical）の中で .bf-btn を使った場合 */
.btn-group-vertical > .bf-btn { border-radius: 0; }
.btn-group-vertical > .bf-btn:first-child {
    border-top-left-radius: var(--bf-r-md); border-top-right-radius: var(--bf-r-md);
}
.btn-group-vertical > .bf-btn:last-child {
    border-bottom-left-radius: var(--bf-r-md); border-bottom-right-radius: var(--bf-r-md);
}
.btn-group-vertical > .bf-btn + .bf-btn { margin-top: -1px; }

/* btn-check（ラジオ/チェックをボタン見た目にする Bootstrap の仕組み）で
   ラベルだけ .bf-btn に置き換えた場合 */
.btn-check:checked + .bf-btn {
    background: var(--bf-primary-soft);
    border-color: var(--bf-primary);
    color: var(--bf-primary);
}
.btn-check:focus-visible + .bf-btn {
    box-shadow: 0 0 0 2px var(--bf-surface), 0 0 0 4px var(--bf-primary);
}

/* Bootstrap のユーティリティで並べているときのマージン打ち消し */
.bf-btn.me-1, .bf-btn.me-2, .bf-btn.ms-1, .bf-btn.ms-2 { vertical-align: middle; }

@media (max-width: 768px) {
    .btn:not(.btn-close)        { min-height: 40px; }
    .btn:not(.btn-close).btn-sm { min-height: 34px; font-size: 13px; }
    .btn:not(.btn-close).btn-lg { min-height: 46px; }
}

/* ============================================================
   Badge（ステータス表示）

   問題:
     Bootstrap の .badge は既定が白文字。そこに .bg-warning(#ffc107) や
     .bg-info(#0dcaf0) を重ねると、白文字とのコントラスト比が 1.6〜2:1 しかなく
     WCAG AA (4.5:1) を大きく下回る。実際に案件一覧のステータスや
     会社設定の「閲覧不可」が読めない状態になっていた。
     独自の .status-label も同様（#EAB308 に白文字 = 1.9:1）。

   方針:
     Linear / Stripe / Polaris / GitHub と同じ「ソフトバッジ」に統一する。
     淡い地色 + 同系の濃い文字。これで
       - コントラストが構造的に確保される（全 tone で 7:1 以上）
       - 色相は保たれるのでステータスの識別性は落ちない
       - 一覧に何十個並んでも画面が原色で埋まらない
     塗り（--solid）は「1画面に1つだけ強調したい」場合の例外として残す。
   ============================================================ */

.bf-badge {
    --bf-badge-bg:     var(--bf-gray-100);
    --bf-badge-fg:     var(--bf-gray-700);
    --bf-badge-border: rgba(16, 24, 40, .08);

    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--bf-badge-border);
    border-radius: var(--bf-r-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--bf-badge-bg);
    color: var(--bf-badge-fg);
}
.bf-badge > i, .bf-badge > .fa, .bf-badge > .fas { font-size: 10px; }

/* 先頭に置く小さな丸。色だけに頼らず形でも区別できるようにする補助 */
.bf-badge--dot::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.bf-badge--neutral  { --bf-badge-bg: #eef2f7; --bf-badge-fg: #344054; --bf-badge-border: #dfe3ea; }
.bf-badge--brand    { --bf-badge-bg: var(--primary-bg-light, #eff6ff); --bf-badge-fg: var(--primary-color, #1849a9); --bf-badge-border: var(--primary-border, #b2ccff); }
.bf-badge--info     { --bf-badge-bg: #eff6ff; --bf-badge-fg: #1849a9; --bf-badge-border: #c7d9fe; }
.bf-badge--success  { --bf-badge-bg: #ecfdf3; --bf-badge-fg: #027a48; --bf-badge-border: #abefc6; }
.bf-badge--warning  { --bf-badge-bg: #fffaeb; --bf-badge-fg: #b54708; --bf-badge-border: #fedf89; }
.bf-badge--critical { --bf-badge-bg: #fef3f2; --bf-badge-fg: #b42318; --bf-badge-border: #fecdca; }
.bf-badge--accent   { --bf-badge-bg: #f4f3ff; --bf-badge-fg: #5925dc; --bf-badge-border: #d9d6fe; }

/* 例外: 1画面で1つだけ強く見せたいとき。一覧では使わない */
.bf-badge--solid            { color: #fff; border-color: transparent; }
.bf-badge--solid.bf-badge--neutral  { background: #475467; }
.bf-badge--solid.bf-badge--brand    { background: var(--primary-color, #2563eb); }
.bf-badge--solid.bf-badge--info     { background: #175cd3; }
.bf-badge--solid.bf-badge--success  { background: #027a48; }
.bf-badge--solid.bf-badge--warning  { background: #b54708; }
.bf-badge--solid.bf-badge--critical { background: #b42318; }
.bf-badge--solid.bf-badge--accent   { background: #5925dc; }

/* 押せるバッジ（ステータス変更のトグルなど） */
.bf-badge--button { cursor: pointer; transition: filter .15s var(--bf-ease); }
.bf-badge--button:hover { filter: brightness(.97); }
.bf-badge--button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bf-surface), 0 0 0 4px var(--bf-badge-fg);
}

/* ============================================================
   Bootstrap .badge / 独自 .status-label の互換シム

   811箇所の .badge と 42箇所の .status-label を一度に書き換えるのは
   危険なので、見た目だけ先に揃える。マークアップの本移行が済んだ
   画面からこの層は不要になる。
   ※ .bg-light などは非バッジ要素でも多用されているため、
     必ず .badge / .status-label とセットの時だけ効かせる。
   ============================================================ */

/* 形だけを整える。色（background / color）はここでは触らない。
   .badge.bg-in-progress のようなプロジェクト独自の濃い背景に暗い文字を当てると
   かえってコントラストが悪化するため、色は下の既知クラスに対してのみ指定する。 */
.badge:not(.bf-badge) {
    padding: 2px 8px;
    border-radius: var(--bf-r-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}
/* 色指定のない素の .badge（Bootstrap の既定は白文字・背景なし）だけ中立色にする */
.badge:not(.bf-badge):not([class*="bg-"]) {
    border: 1px solid #dfe3ea;
    background: #eef2f7;
    color: #344054;
}
.badge.bg-secondary, .badge.bg-light, .badge.bg-dark {
    background: #eef2f7 !important; color: #344054 !important; border-color: #dfe3ea;
}
.badge.bg-primary  { background: #eff6ff !important; color: #1849a9 !important; border-color: #c7d9fe; }
.badge.bg-info     { background: #eff6ff !important; color: #1849a9 !important; border-color: #c7d9fe; }
.badge.bg-success  { background: #ecfdf3 !important; color: #027a48 !important; border-color: #abefc6; }
.badge.bg-warning  { background: #fffaeb !important; color: #b54708 !important; border-color: #fedf89; }
.badge.bg-danger   { background: #fef3f2 !important; color: #b42318 !important; border-color: #fecdca; }

/* 独自ステータス（受注/発注のワークフロー）。色相は残して可読性だけ直す */
.status-label {
    padding: 2px 8px !important;
    border: 1px solid rgba(16, 24, 40, .08);
    border-radius: var(--bf-r-pill) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    background: #eef2f7 !important;
    color: #344054 !important;
}
.status-label.data_created,
.status-label.cancelled { background: #eef2f7 !important; color: #344054 !important; border-color: #dfe3ea; }
.status-label.quoted    { background: #fffaeb !important; color: #b54708 !important; border-color: #fedf89; }
.status-label.order,
.status-label.received  { background: #ecfdf3 !important; color: #027a48 !important; border-color: #abefc6; }
.status-label.invoice,
.status-label.ordered   { background: #eff6ff !important; color: #1849a9 !important; border-color: #c7d9fe; }
.status-label.receipt   { background: #f4f3ff !important; color: #5925dc !important; border-color: #d9d6fe; }
.status-label.paid      { background: #ecfdf3 !important; color: #05603a !important; border-color: #75e0a7; }

/* .status-toggle の「押すと浮く」表現はボタンと同じ理由で廃止し、
   代わりに地色をわずかに沈める */
.status-toggle:hover {
    filter: brightness(.97) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ============================================================
   ページヘッダー（A-6-1）

   タイトルがある画面と無い画面が混在していて、どの機能を開いているのか
   分からない状態だった。全画面で同じ形の見出しを出す。
   ============================================================ */
.bf-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 20px;
}
.bf-page-header__main { min-width: 0; }
.bf-page-header h1 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--bf-gray-800);
}
.bf-page-header h1 > i,
.bf-page-header h1 > .material-icons {
    font-size: 20px;
    color: var(--primary-color, #2563eb);
}
.bf-page-header__desc {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--bf-gray-500);
}
.bf-page-header__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* ページ見出しは既定で視覚的に隠す（利用者判断・2026-07-28）。
   「タイトルを読まずにいきなり中身を見たい」という使い方に合わせたもの。
   - 画面名はパンくずに出ているので、どこにいるかは分かる。
   - 説明文は捨てず、パンくずの「?」から読める（layout.html が拾う）。
   - h1 は要素として残す。見出しの構造を壊さないため。
   戻したいときは .bf-page-header--show を付ける。 */
.bf-page-header {
    margin-bottom: 10px;
}

.bf-page-header__main {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 操作ボタンは隠さない（受領請求書などで使っている） */
.bf-page-header__actions {
    margin-left: auto;
}

/* この画面だけ見出しを出したい場合に付ける。
   今は使っていないが、見出しを戻したくなったときの入口として残している。 */
.bf-page-header--show .bf-page-header__main {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

@media (max-width: 768px) {
    .bf-page-header { margin-bottom: 14px; }
    .bf-page-header h1 { font-size: 17px; }
    .bf-page-header h1 > i,
    .bf-page-header h1 > .material-icons { font-size: 17px; }
}

/* ==========================================================================
   フォーム補助（C-4-7 / C-5-2 / C-8-4）
   画面ごとに書き分けると同じ意味が違う見た目になるので設計システム側に置く
   ========================================================================== */

/* 必須項目。required 属性が付いている欄にだけ添える */
.req-mark {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--bf-red-50, #fef2f2);
    color: var(--bf-red-600, #b91c1c);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

/* 任意項目を明示したいとき（必須が多数派の画面で使う） */
.opt-mark {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--bf-gray-100, #f1f5f9);
    color: var(--bf-gray-500, #64748b);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: middle;
}

/* 未入力セルの「—」。値と同じ濃さだと空欄のほうが目立ってしまう */
.empty-mark {
    color: var(--bf-gray-300, #cbd5e1);
}

/* readonly で、隣のボタンから値を選ぶ欄。
   通常の入力欄と同じ見た目だと「クリックして打てる」と誤解させる */
.form-control.is-picker,
input.is-picker {
    background-color: var(--bf-gray-50, #f8fafc);
    cursor: pointer;
}

.form-control.is-picker::placeholder,
input.is-picker::placeholder {
    color: var(--bf-gray-400, #94a3b8);
    font-style: normal;
}

/* ==========================================================================
   タブ（C-22-1）
   取引履歴＝アイコン付き nav-tabs、会社設定＝nav-tabs＋独自サイズ、
   対応管理＝nav-pills（角丸ベタ塗り）、メール管理＝素の nav-tabs …と
   同じ「タブ」が画面ごとに4通りの見た目になっていた。
   Bootstrap の既定を上書きして1つに揃える。下線タブに寄せているのは、
   ページ内の第1階層ナビとしてサイドバーの選択表現と衝突しないため。
   ========================================================================== */

/* 色は --primary-color（:root にある OEM テーマ変数）を直接参照する。
   --bf-primary は .bf-btn / .bf-segmented スコープでしか定義されていないため、
   タブから参照するとフォールバックが効かず選択中の色が出ない画面があった。 */
.nav-tabs {
    border-bottom: 1px solid var(--bf-border);
    gap: 2px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.nav-tabs .nav-item {
    white-space: nowrap;
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bf-gray-500);
    background: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-tabs .nav-link:hover:not(.active) {
    color: var(--bf-gray-800);
    border-bottom-color: var(--bf-gray-300);
    background: none;
    isolation: auto;
}

.nav-tabs .nav-link.active {
    color: var(--primary-color, #2563eb);
    background: none;
    border-color: transparent;
    border-bottom-color: var(--primary-color, #2563eb);
    font-weight: 600;
}

.nav-tabs .nav-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bf-surface), 0 0 0 4px var(--bf-primary-ring);
    border-radius: 4px;
}

/* pills も同じ見た目に寄せる（モーダル内などで使われている） */
.nav-pills {
    border-bottom: 1px solid var(--bf-border);
    gap: 2px;
}

.nav-pills .nav-link {
    border-radius: 0;
    border-bottom: 2px solid transparent;
    padding: 8px 13px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bf-gray-500);
    background: none;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: none;
    color: var(--primary-color, #2563eb);
    border-bottom-color: var(--primary-color, #2563eb);
    font-weight: 600;
}

/* ==========================================================================
   一覧のページャ（A-7-1 / C-9-5）
   顧客検索のページ内 <style> に定義していたが、取引履歴でも同じものが要るため
   設計システム側に移した。画面ごとに書き分けると見た目がずれる。
   ========================================================================== */

.bf-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 4px 4px;
}

.bf-pager__info {
    font-size: 13px;
    color: var(--bf-gray-600, #475467);
}

.bf-pager__nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bf-pager__size {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--bf-gray-600, #475467);
    margin: 0;
}

.bf-pager__size .bf-select {
    height: 28px;
    padding: 0 26px 0 10px;
    border: 1px solid var(--bf-border, #e3e8ef);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    appearance: none;
    cursor: pointer;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23667085' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 7px center / 13px;
}

.bf-pager__page {
    font-size: 13px;
    color: var(--bf-gray-800, #344054);
    min-width: 5em;
    text-align: center;
}

/* ==========================================================================
   フォーム部品のフォーカスリング（C-2-2）
   ボタンには .bf-btn:focus-visible があるが、input / select / textarea は
   ブラウザ既定のまま（環境によっては黒い太枠）で、キーボード操作時の見た目が
   画面や部品ごとにバラバラだった。ボタンと同じリングに揃える。
   ========================================================================== */

.form-control:focus-visible,
.form-select:focus-visible,
input[type="date"]:focus-visible,
input[type="month"]:focus-visible,
input[type="time"]:focus-visible,
input[type="number"]:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="search"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 0 0 3px var(--bf-primary-ring, rgba(37, 99, 235, 0.25));
}

/* チェックボックス・ラジオは枠が細いので、リングだけ出す */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--bf-primary-ring, rgba(37, 99, 235, 0.25));
}

/* 日付・セレクトの上に置く小さな見出し（C-9-2）
   input[type=date] は placeholder が描画されないため、日付欄が並ぶと
   どちらが開始でどちらが終了か分からなくなる。取引履歴・仕入伝票一覧で共用。 */
.bf-inline-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--bf-gray-500, #94a3b8);
    margin-bottom: 3px;
}

/* ==========================================================================
   現在地表示（A-6-3）
   layout.html がサイドバーの現在地から自動生成する。
   役割は上位への道筋ではなく「今どの画面か」の表示。
   ページ見出しを既定で隠しているため、画面名が出るのはここだけになる。
   - 階層がある画面（例: 顧客管理 > 顧客登録）… .bf-crumb--nested
   - 画面名だけの画面（例: 顧客一覧）        … .bf-crumb--single
     （親メニューの着地点そのものなので、親を出すと同じ場所を2回言うことになる）
   ========================================================================== */

.bf-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--bf-gray-500);
}

.bf-crumb a {
    color: var(--bf-gray-500);
    text-decoration: none;
}

.bf-crumb a:hover {
    color: var(--primary-color, #2563eb);
    text-decoration: underline;
}

.bf-crumb [aria-current="page"] {
    color: var(--bf-gray-800);
    font-weight: 600;
}

.bf-crumb__sep {
    font-size: 8px;
    opacity: 0.5;
}

/* 画面の説明を出す「?」。見出しを隠したぶんの受け皿 */
.bf-crumb__help {
    margin-left: 4px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid var(--bf-border, #e3e8ef);
    border-radius: 50%;
    background: none;
    color: var(--bf-gray-500);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}

.bf-crumb__help:hover {
    border-color: var(--primary-color, #2563eb);
    color: var(--primary-color, #2563eb);
}

.bf-crumb__tip {
    flex: 1 1 100%;
    margin-top: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--bf-gray-50, #f8fafc);
    border: 1px solid var(--bf-border, #e3e8ef);
    color: var(--bf-gray-600, #475467);
    font-size: 12px;
}

@media (max-width: 768px) {
    .bf-crumb { display: none; }
}

/* 検索結果の通知（A-2-2）
   即時反映にすると「本当に反映されたのか」が分からないので、件数を短く知らせる。
   操作の邪魔にならないよう画面下中央に出して自動で消す。 */
.bf-search-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 8px);
    z-index: 1080;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.bf-search-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .bf-search-toast { transition: none; }
}

/* ==========================================================================
   検索バー（A-2-1）
   受領請求書の1行スリムバーを全画面の基準にする。
   よく使う2〜3項目だけを常時表示し、残りは <details> の「詳細条件」に畳む。
   画面ごとに検索条件の数が違っても、検索窓の位置と見た目は揃う。
   ========================================================================== */

.bf-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: var(--bf-surface, #fff);
    border: 1px solid var(--bf-border, #e3e8ef);
    border-radius: 8px;
}

.bf-filterbar__field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* フリーワードは他より広く取る（一番使う） */
.bf-filterbar__field--grow {
    flex: 1 1 220px;
}

.bf-filterbar__field > label {
    font-size: 11px;
    font-weight: 600;
    color: var(--bf-gray-500, #64748b);
    margin-bottom: 3px;
    white-space: nowrap;
}

.bf-filterbar__field > .form-control,
.bf-filterbar__field > .form-select {
    font-size: 13px;
}

/* 右端に寄せる操作（絞り込み解除など） */
.bf-filterbar__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 詳細条件。既定は畳んでおく */
.bf-filterbar__more {
    flex: 1 1 100%;
    margin-top: 2px;
}

.bf-filterbar__more > summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    list-style: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color, #2563eb);
}

.bf-filterbar__more > summary::-webkit-details-marker { display: none; }

.bf-filterbar__more > summary::before {
    content: "B8";
    transition: transform 0.15s ease;
}

.bf-filterbar__more[open] > summary::before { transform: rotate(90deg); }

.bf-filterbar__more-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px solid var(--bf-border, #e3e8ef);
}

@media (max-width: 768px) {
    .bf-filterbar { flex-direction: column; align-items: stretch; }
    .bf-filterbar__actions { margin-left: 0; }
}

/**
 * BizFlo UI — ボタンシステム v2
 *
 * 目的:
 *   Bootstrap の意味色（success / danger / info / warning / secondary）を
 *   「装飾」として使ってきた結果、1画面に5色のボタンが並ぶ状態になっている。
 *   このファイルはその置き換え先。
 *
 * ── v2 で変えたこと（実システムの実測にもとづく） ──────────────
 *   参照: Vercel Geist(32px/14px/w500/r6px)、shadcn/ui(32px/14px/w500)、
 *         SmartHR UI（Primary/Secondary/Tertiary/Danger/Text の5種）、
 *         Shopify Polaris（variant × tone モデル）、デジタル庁DS（Small 36 / X-Small 28）
 *
 *   1. 寸法を 34px/13px/w600 → 32px/14px/w500 に。太字＋小文字＋高めの箱は「詰まって古い」
 *   2. tone を variant から分離（Polaris方式）。--critical はどの variant とも合成できる
 *      → 表の行では控えめな赤、確認ダイアログでは塗りの赤、を同じ語彙で書ける
 *   3. :active の translateY(1px) を廃止。押すと動くのは旧世代の表現で、
 *      ツールバーでは1pxのガタつきになる。色を沈める方式に変更
 *   4. フォーカスリングを「白ハロー + ブランド色2px」の二重に。
 *      色付き背景やグレー地の上でも必ず見える（Primer/Polaris と同方式）
 *   5. secondary の枠線を細く淡く。濃い枠が全ボタンに付くとツールバーが箱だらけになる
 *   6. --tonal を追加（薄いブランド地・枠なし）。「選択中/実行済み」を色を増やさず表せる
 *
 * ── 設計原則 ────────────────────────────────────────
 *   1. Bootstrap非依存。`.bf-` prefix なので `.btn` と衝突しない（併存中も安全）
 *   2. 色は「意味」にだけ使う。装飾に色を使わない
 *   3. 階層は3段 ── primary（1画面1つ） / secondary（既定） / ghost（三次）
 *      + tone（default / critical）の掛け合わせ
 *   4. 赤は「取り消せない操作」専用。PDF出力・エクスポートに赤や緑を使わない
 *
 * ── 使い分け早見表 ───────────────────────────────────
 *   新規作成 / 保存 / 送信          → .bf-btn--primary   （1画面に1つ）
 *   検索 / エクスポート / 設定を開く → .bf-btn--secondary （既定。迷ったらこれ）
 *   ツールバーの補助操作 / 閉じる    → .bf-btn--ghost
 *   表の行の削除                    → .bf-btn--ghost.bf-btn--critical
 *   詳細画面の削除                  → .bf-btn--secondary.bf-btn--critical
 *   確認ダイアログの最終確定         → .bf-btn--primary.bf-btn--critical
 *   選択中 / 実行済み               → .bf-btn--tonal（または .is-active）
 *   本文中のリンク的操作             → .bf-btn--plain
 * ────────────────────────────────────────────────
 */

/* 同じセル内に2つ目の情報を並べるとき（会社名 / 顧客名、件名 / 案件 など）
   2段に積むと行が倍の高さになるので、1行に並べて区切り記号で分ける。 */
.sub-inline {
    color: var(--bf-gray-500, #6b7280);
    font-size: 0.82rem;
}

.cell-sep {
    color: var(--bf-gray-300, #cbd5e1);
    margin: 0 5px;
}

/* 一覧の行を詰める（1画面に見える件数を増やす） */
/* まだ使っていない。行を詰めたい一覧に付けるための受け皿として置いてある。
   （顧客一覧などは画面側で個別に指定しており、そちらを揃えるときに使う） */
.bf-table-compact tbody td {
    padding-top: 7px;
    padding-bottom: 7px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}