/* ============================================
   BC共通ヘッダー v3.16 — A案階層型 + 固有アクセントカラー + フォント/サイズ/文字色/背景/入力欄/等幅/ゼブラ行/明細表/BV再現表/入力フォーム/フォーム枠/モーダル見出し 統一
   v3.16.0 (2026-08-03): **モーダルのタイトルを全システムで揃えた**（社長指示「全モーダルには必ず
   タイトル付けて／タイトルは大きく」）。--bc-modal-title-font(20px) / --bc-modal-title-weight(700) の
   2変数を新設し、フォーム枠の --bc-form-title-font もこれを読むようにした（1箇所で全部動く）。
   従来は 14〜18px の6種類にばらけていた。セレクタは共通に置かない（タイトルの書き方が
   .modal-title / .modal-header h3 / .modal-hd h2 / インライン<h3> の4系統に割れているため）。
   v3.15.0 (2026-08-02): **入力・編集フォームの標準枠 bc-form-* を新設**（社長指示「新規・編集・入力ページを
   もっといいデザインに。キャンセル・登録ボタンは上下につけて。前・後、レコードの移動ボタン付けて」）。
   対象=保存を伴う新規・編集・入力フォーム（検索/選択/参照専用モーダルは対象外）。
   モーダルは **flex縦3分割**（bc-form-head固定＋bc-form-bodyスクロール＋bc-form-foot固定）。
   position:sticky は使わない——祖先の overflow-x:hidden で死ぬ既知の罠に加え、各システムの
   モーダル padding が 20〜24px でバラバラなため sticky 帯に個別の負マージン補正が要るから
   （経費精算の旧実装 top:-20px がその実例）。flex3分割なら容器 padding:0 で構造的に消える。
   ◀▶前後レコード移動の描画は shared/bc-form-nav.js（bc-header.js が自動注入・v1.0.0）。
   ボタンは bc-btn / bc-btn-primary（主色=--bc-accent連動）/ bc-btn-danger。
   一覧=bc-zebra / 明細=bc-detail / 入力項目=v3.13.0変数 / **フォーム枠=bc-form-*** の4本立て。
   v3.14.0 (2026-08-02): **区切り行・展開行を挟む一覧に対応**（社長指示「カード型をやめて一覧にする」）。
   縞を nth-child で塗る従来方式は、見出し行や展開した詳細行が混ざると位相がずれる。
   bc-zebra-manual（縞はJSが tr.bc-zebra-even を付ける）／tr.bc-zebra-group（区切り見出し行）／
   tr.bc-zebra-detail（展開した詳細行）の3つを追加。**既存ルールは書き換えず詳細度で上書き**しているので、
   bc-zebra-manual を付けない表はこれまでどおり。カード型で作られていた4つの一覧
   （案件管理3005・業務明細3012・名刺管理3011・稟議管理3007）を表へ移行するための土台。
   v3.13.0 (2026-08-02): **入力フォームの規約**（社長指示「ラベルは左」）。共通CSSは変数だけを持ち、
   セレクタは各システムが持つ（.form-grid/.form-row/.form-group は同名で意味が違うため共通に書けない）。
   あわせて入力欄の角丸(6px)・枠の太さ(1px solid)も !important 群へ追加。
   v3.12.0 (2026-08-02): **一覧(bc-zebra)の文字を揃える**（社長指示）。
   これまで bc-zebra が標準化していたのは**色と罫線だけ**で、font の指定は1行も無かった。
   その結果、同じ「一覧の見出し」なのに 10〜14px の**7種類**・太さ**4種類**にばらけ、
   総合管理/設定管理の14px と 案件管理ほか16システムの11px で**約1.3倍の差**が出ていた。
   （入力欄は v3.8.0 で 12px に揃えてあったが、一覧の文字だけ手つかずだった）
   値は横断調査の**最頻値**: 見出し 11px/600（16・24システム）／明細 13px/400（10システム）。
   **見出しが明細より小さいのは意図的**——ラベルは控えめにという設計で、BV実画面も同じ逆転。
   変数4つ（--bc-list-th-font / -th-weight / -font / -weight）で全274本に効く。
   強調したいセルは各システム側で上書きできる（インライン or クラス2つ以上のセレクタ）。
   v3.11.1 (2026-08-02): **一覧(bc-zebra)の罫線を格子にする**（社長指示「縦横すべてに1px」）。
   v3.9.1 以来「行の下線だけ」だったものを td/th の4辺へ広げ、BV再現表(bc-bv-table)と同じ引き方に揃えた。
   見出し(thead th)にも罫線を入れて本文の格子と列位置が合うようにしている。
   色は従来どおり --bc-row-border(#9AA4BC) の1変数のみ。あわせて table.bc-zebra に
   border-collapse:collapse を保証（separate だと格子が二重線に見えるため）。
   対象は全31システム・274本。各システムのファイルは1行も変えていない（共通CSSの変更だけで反映される）。
   v3.11.0 (2026-08-02): **BV再現表の共通クラス bc-bv-table を新設**（社長指示）。
   ポータル / 業務明細3012 / サポート管理3028 / スケジュール管理3042 の4システムが、
   **同じBVの表を4通りに自前で**書いていた（ポータルとスケジュール管理は同じ .bv-table という
   クラス名なのに中身が別物。片方は変数・片方はハードコード）。それを1本に畳んだ。
   **見出し帯の色だけは表ごとに残す**——BVは画面ごとに帯の色が違い、それはBV側の仕様だから
   （業務明細内容=ピンク/検索=ティール/見出し=黄緑/ToDo=水色）。bc-bv-green|blue|steel|pink|teal のプリセット。
   寄せ・文字サイズ・padding は**ポータルの値へ統一**、ホバーは**一覧標準と同じ --bc-row-hover**（社長選択）。
   従来のBV黄ホバー（#FFFBDE / #FFFBD6 の2種）と、業務明細だけホバーが無い状態は解消。
   一覧＝bc-zebra が「社内で揃える」のに対し、こちらは「BVに揃える」——目的が逆なので別部品にしてある。
   v3.10.0 (2026-08-02): **明細表（ラベル＋値）の標準 bc-detail を新設**（社長指示）。
   一覧の見た目を横断調査したところ、同じ「ラベル＋値」が6通りに実装されていた
   （2列table・mpd-grid・detail-grid・bvs-grid・detail-row・detail-table）。
   一覧には bc-zebra があるのに明細には標準が無く、各システムが毎回自作していたため。
   **一覧＝`table.bc-zebra` / 明細＝`dl.bc-detail`** の対で覚える。
   使い方: <dl class="bc-detail"><dt>ラベル</dt><dd>値</dd>…</dl>。ゼブラと同じオプトイン方式。
   マークアップは <dl>/<dt>/<dd> に一本化（社長選択）。table.bc-detail は用意しない。
   ラベル列は**主色ではなく中立グレー**（--bc-detail-label-bg = --bc-zebra-even）。
   一覧ヘッダーと違いラベルが縦に長く続くため、主色ベタだと重くなる（社長選択）。
   ラベル幅は --bc-detail-label-w を要素側で上書きして画面ごとに調整する。
   v3.9.4 (2026-07-30): **一覧ヘッダーに各システムの主色を当てる**（社長指示「一覧のヘッドに
   はっきりとした色を付けて」）。bc-zebra の thead th を --bc-thead-bg（既定=var(--bc-accent)
   ＝そのシステムの主色）＋白文字に。全37色は2026-07-28の監査で白文字コントラスト4.5:1を
   クリア済みのため、どのシステムでも読める。
   v3.9.3 (2026-07-30): 行の区切り線をもう一段濃く（社長指示「もう少し濃く」）。
   --bc-row-border #B9C1D3 → **#9AA4BC**。
   v3.9.2 (2026-07-30): 行の区切り線をさらに濃く（社長指示「もっと濃くして」）。
   --bc-row-border #D5DAE6 → #B9C1D3。
   v3.9.1 (2026-07-30): ゼブラ行の**区切り線を一段はっきり**（社長指示「もう少し行がはっきり
   わかるように、薄い枠の罫線を入れて」）。bc-zebra の td 下線を --bc-row-border で
   共通側から当てる（各システムの薄い #e5e7eb を上書き。変更はこの1変数のみ）。
   v3.9.0 (2026-07-30): **一覧のゼブラ行（交互のグレー/白）を全システム標準に**（社長指示
   「一覧の行を区別するため、各行ごとに交互にグレー・白の濃淡をつけて。今後、他システムでも
   行表示する場合はこれを基準にして」）。
   使い方: 一覧の <table> に **bc-zebra クラスを付けるだけ**（オプトイン。汎用クラス名への
   共通指定禁止ルール(v3.6.2の教訓)に従い、素の table には一切当てない）。
   偶数行= --bc-zebra-even / ホバー= --bc-row-hover の2変数で一元管理。ホバーは td レベルで
   当てるため、各システム側の tr:hover td 指定より必ず強い（採用時は自前のhover行は削除推奨）。
   初出=支払管理3032 v1.11.4。行背景を意味色（エラー赤等）で塗る行がある表は、その行側の
   td に背景を持たせれば従来どおり優先される。
   v3.8.0 (2026-07-30): **入力欄の密度を全システム統一**（社長指示「このサイズ感を全システム共通にして」）。
   サポート管理3028のBV再現で確定した値 — input/select は padding 2px 5px・文字12px（高さ22px・1行28px）、
   textarea は padding 4px 6px — を --bc-input-pad / --bc-textarea-pad / --bc-input-font に集約し、
   背景(--bc-input-bg v3.4.2)・枠(--bc-input-border)と同じセレクタで全システムへ当てる。
   従来は各システムが 4px〜10px でばらばらに書いており、同じ社内システムでも画面ごとに
   入力欄の高さが 24〜40px と揃っていなかった。
   ※ 入力フォームデザイン規約(2026-07-14)の「縦padding 5px・高さ約29px」はこの値に置き換わる。
   v3.7.0 (2026-07-28): **等幅フォントを --bc-font-mono に集約**（横断監査）。
   基本フォントは v3.1.0 で統一済みだったが等幅は code/pre/kbd/samp しか押さえておらず、
   金額・コードの等幅指定が各システム独自で3系統（素のmonospace＝Courier New / Consolas,monospace /
   var(--bc-font-mono)）に割れていた。**同じ .mono クラスがシステムによって別の字形**で出ていた。
   .mono/.num/.tabular ほか実使用中のクラスと、インラインの style="font-family:monospace" を
   中央で正規化し、数字系クラスには tabular-nums（桁揃え）も付与。
   （キャッシュバスターを全 html で v3.6.3 → v3.7.0 に更新）
   v3.6.3 (2026-07-27): 入力欄背景の統一(v3.4.2)の除外リストから **.toolbar を外した**（社長指示）。
   一覧上部の検索・絞り込み欄だけ白のままで、同じ画面の登録フォーム（グレー）と不揃いだった。
   併せて型リストの漏れ **[type=month] / [type=week]** を追加（月選択欄が10箇所で白のままだった。
   経費3023・工数3017・支払3032・設定3033・サポート3028・マーケ3038・固定資産3039・予定3042）。
   （キャッシュバスターを全 html で v3.6.2 → v3.6.3 に更新）
   v3.6.2 (2026-07-27): 「body .panel / body .view を display:none にする」共通指定を撤去（社長報告
   「親会社、新規登録できない」の原因）。.panel をカード枠として使う10システムで画面の中身が
   丸ごと消えていた。タブとして使う側は全て自前定義を持っており、この指定は元から不要だった。
   詳細は下の該当箇所のコメントを参照。（キャッシュバスターを全 html で v3.6.1 → v3.6.2 に更新）
   v3.6.0 (2026-07-27): 2段目ナビをレスポンシブ化（社長指示「右サイドが切れる」）。
   38システムに増えて右端のpillが隠れたままだったのを、
   「◀ スクローラ ▶ ＋ 部署セレクト（スクロール領域の外）」の固定レイアウトに変更。
   続きがある側だけ ◀▶ とフェードが出る（can-left/can-right は bc-header.js が付与）。
   併せて狭い画面で1段目の担当セレクトが右を押し出す分を max-width で抑えた。
   （キャッシュバスター文字列を全 index.html で v3.5.0 → v3.6.0 に更新済み）
   v3.5.0 (2026-07-27): 全システムの地の背景色を --bc-bg(#E8E8F7 ラベンダー) に集約（社長指示）。
   ポータルのBVスキン --bv-lavender と同色。変更はこの1変数のみで全システムに反映される。
   （キャッシュバスター文字列を全 index.html で v3.4.3 → v3.5.0 に更新済み。
     見た目が変わる更新なので識別子の更新は必須。版数ラベルのみの更新時は据え置いてよい）
   v3.4.2 (2026-07-03): 素朴な入力欄(input/select/textarea)の背景を --bc-input-bg(#e5e7eb) に統一
   v3.3.0 (2026-06-14): body基準の文字色を --bc-text(#1a1a18) に集約・全システム統一
   v3.2.0 (2026-06-14): 文字サイズを --bc-font-size(14px) に集約 + zoom全廃(等倍統一)
   v3.1.0 (2026-06-14): 全システムのフォントを --bc-font に集約し html body で完全統一
   v3.0 (2026-04-25): 3段階層リデザイン + 13システムごとの固有色
     1段目 (48px): .bc-global-bar  ブランド + システム名 + utility
     2段目 (44px): .bc-global-nav   13システムpills
     3段目 (56px): .bc-page-actions 既存topbarが該当
     4段目 (46px): .bc-tabnav        既存tabsが該当
   ============================================ */

/* --- CSS変数 (グローバル) --- */
:root {
  /* === フォント統一 (single source of truth / v3.1.0) ===
     全システムのフォントはこの2変数で一元管理する。変更はここだけ。 */
  --bc-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Meiryo', 'Noto Sans JP', sans-serif;
  --bc-font-mono: 'SF Mono', SFMono-Regular, Consolas, 'Courier New', monospace;
  --bc-font-size: 14px;   /* 全システム共通の基準文字サイズ (v3.2.0) */
  --bc-text: #1a1a18;     /* 全システム共通の基準文字色 (v3.3.0) */
  /* 全システム共通の地の背景色 (v3.5.0 / 2026-07-27 社長指示)。
     ポータルのBVスキン --bv-lavender (#E8E8F7) を全システムの背景に展開する。
     変更はこの1変数のみ。各システムの body{background} は html body の詳細度で上書きされる。 */
  --bc-bg: #E8E8F7;

  --bc-bg-primary: #ffffff;
  --bc-bg-secondary: #f9fafb;
  --bc-bg-tertiary: #f3f4f6;
  --bc-text-primary: #1a1a18;
  --bc-text-secondary: #5f5e5a;
  --bc-text-tertiary: #6b7280;
  --bc-text-muted: #888780;
  --bc-border: #e5e7eb;
  --bc-border-strong: #d1d5db;
  --bc-input-bg: #e5e7eb;        /* 入力欄の背景 (v3.4.2) — 未入力時から「ここが入力欄」と分かるように */
  --bc-input-border: #9ca3af;
  /* 入力欄の密度 (v3.8.0 / 2026-07-30 社長指示「このサイズ感を全システム共通にして」)。
     サポート管理3028 のBV再現で確定した値。input/select は高さ22px・1行28pxに揃う。
     textarea だけは 2px だと本文が窮屈なので少し広い。変更はこの3変数のみで全システムに反映される。 */
  --bc-input-pad: 2px 5px;
  --bc-textarea-pad: 4px 6px;
  --bc-input-font: 12px;
  /* 一覧のゼブラ行 (v3.9.0 / 2026-07-30 社長指示・全システム標準)。
     使う側は table に bc-zebra を付ける。色の変更はこの3変数のみ。 */
  --bc-zebra-even: #F1F2F7;   /* 偶数行のグレー（地のラベンダー #E8E8F7 と調和する寒色寄り） */
  --bc-row-hover: #E4E9F5;    /* ホバー行（ゼブラより一段濃く・どの行でも視認できる） */
  --bc-row-border: #9AA4BC;   /* 行の区切り線 (v3.9.1新設・v3.9.2〜3で段階的に濃色化) — 行がくっきり区別できる濃さ */
  --bc-thead-bg: var(--bc-accent);  /* 一覧ヘッダーの背景 (v3.9.4) — 既定はそのシステムの主色 */
  --bc-thead-text: #ffffff;         /* 一覧ヘッダーの文字色 (v3.9.4) — 全主色が白文字4.5:1クリア済み */
  /* 一覧の文字 (v3.12.0 / 2026-08-02 社長指示)。従来は色と罫線しか揃えておらず、
     見出しが 10〜14px の7種類・太さ4種類にばらけていた（同じ役割なのに1.3倍の差）。
     値は横断調査の最頻値。**見出しが明細より小さいのは意図的**（ラベルは控えめに・BV実画面も同じ） */
  --bc-list-th-font: 11px;    /* 一覧の見出しの文字サイズ（実測16システムがこの値） */
  --bc-list-th-weight: 600;   /* 同・太さ（実測24システムがこの値） */
  --bc-list-font: 13px;       /* 一覧の明細の文字サイズ（実測10システムがこの値） */
  --bc-list-weight: 400;      /* 同・太さ。強調したいセルは各システム側で上書きする */
  /* 明細表（ラベル＋値）(v3.10.0 / 2026-08-02 社長指示・全システム標準)。
     使う側は <dl> に bc-detail を付ける。一覧=bc-zebra と対になる部品。
     ラベル列は主色ではなく中立グレー（社長選択）——一覧のヘッダーと違い
     ラベルが縦に長く続くため、主色ベタだと画面の左3割が塗り潰されて重くなる。 */
  --bc-detail-label-bg: var(--bc-zebra-even);  /* ラベル列の背景＝ゼブラ偶数行と同色 #F1F2F7 */
  --bc-detail-label-w: 140px;                  /* ラベル列の幅（画面ごとに要素側で上書きする） */
  --bc-detail-font: 13px;                      /* 値の文字サイズ */
  --bc-detail-label-font: 12px;                /* ラベルの文字サイズ */
  /* BV(BusicomVisor)再現表 (v3.11.0 / 2026-08-02 社長指示)。
     BVは画面ごとに見出し帯の色が違う（＝BV側の仕様）ので、帯色だけは表ごとに変える。
     残り（格子罫線・行の地・padding・文字サイズ・ホバー）は全BV表で共通にする。 */
  --bc-bv-line: #A9A9C4;      /* 外枠と見出しの罫線（BVの table border=1 の見え方） */
  --bc-bv-cell: #d6d6e6;      /* 明細セルの罫線（見出しより薄い） */
  --bc-bv-row: #F8F8FD;       /* 行の地（BVのラベンダー系） */
  --bc-bv-row-alt: #EFEFFA;   /* 交互行 */
  --bc-bv-th-bg: #A8E4A0;     /* 見出し帯の既定＝BVの黄緑。表ごとにプリセットクラスで変える */
  --bc-bv-th-text: #16321a;
  --bc-bv-font: 12.5px;       /* 明細の文字サイズ（ポータルの値へ統一・2026-08-02 社長選択） */
  --bc-bv-th-font: 11.5px;    /* 見出しの文字サイズ（同上） */
  --bc-bv-pad: 4px 7px;       /* セルの余白（同上） */
  /* 入力フォーム (v3.13.0 / 2026-08-02 社長指示・全システム標準)。
     一覧=bc-zebra / 明細=bc-detail に続く3つ目の軸。**ラベルは入力欄の左**（社長選択）＝
     明細 dl.bc-detail と同じ並びにして「見る画面」と「入れる画面」を揃える。
     ⚠ 共通CSSは**変数だけ**を持ち、.form-grid / .form-row 等のセレクタは書かない
       （汎用クラス名禁止ルール＝v3.6.2 の .panel 事故。各システムが自分のCSSで
        この変数を読む「標準ブロック」を持つ形にした＝2026-08-02 社長選択の移行方式）。
     値の変更はここだけ。画面ごとに変えたい時は要素側で変数を上書きする
       例) <div class="form-grid" style="--bc-label-w:150px"> */
  --bc-label-w: 110px;        /* ラベル列の幅（長いラベルの画面は要素側で上書き） */
  --bc-label-font: 11px;      /* ラベルの文字サイズ（実測の最頻値・一覧見出しと同じ11px） */
  --bc-label-weight: 600;     /* 同・太さ（一覧見出し --bc-list-th-weight と揃える） */
  --bc-label-color: var(--bc-text-secondary);  /* ラベルの文字色 #5f5e5a */
  --bc-form-cols: 1fr 1fr;    /* フォーム全体の列数（1項目=ラベル+欄で1セル） */
  --bc-form-gap: 8px 18px;    /* 項目どうしの間隔（行 列） */
  --bc-field-gap: 8px;        /* ラベルと入力欄の間隔 */
  --bc-input-radius: 6px;     /* 入力欄の角丸（従来 5〜10px の6種類に割れていた） */
  /* モーダルのタイトル (v3.16.0 / 2026-08-03 社長指示「全モーダルには必ずタイトル付けて／タイトルは大きく」)。
     ⚠ 共通CSSは**変数だけ**を持つ。.modal-title 等のセレクタは書かない——
       タイトル要素の書き方がシステムごとに違い（.modal-title / .modal-header h3 / .modal-hd h2 /
       インラインstyleの <h3> の4系統・実測）、共通に1本のセレクタを置けないため
       （汎用クラス名禁止ルール＝v3.6.2 の .panel 事故）。各システムが自分のCSSでこの変数を読む。
     従来は 14〜18px の**6種類**にばらけ、同じ「モーダルの見出し」が画面ごとに別の大きさだった。
     変更はこの2変数だけ。画面ごとに変えたい時は要素側で上書きする
       例) <div class="modal" style="--bc-modal-title-font:16px"> */
  --bc-modal-title-font: 20px;    /* 地の文14px・明細13px・一覧見出し11px に対して明確に大きく */
  --bc-modal-title-weight: 700;
  /* フォーム枠 bc-form-* (v3.15.0 / 2026-08-02 社長指示「キャンセル・登録ボタンは上下に。
     前・後、レコードの移動ボタン付けて」)。保存を伴う新規・編集・入力フォームの標準枠。
     モーダル=flex縦3分割（head固定＋bodyスクロール＋foot固定）。画面ごとの調整は
     要素側で変数を上書きする（例: <div class="modal bc-form-modal" style="--bc-form-maxh:85vh">） */
  --bc-form-maxh: calc(100vh - 48px);  /* モーダルの最大高さ */
  --bc-form-head-pad: 10px 16px;       /* ヘッダー帯の余白 */
  --bc-form-body-pad: 14px 20px;       /* 本文の余白（容器はpadding:0、余白はここが持つ） */
  --bc-form-foot-pad: 10px 16px;       /* フッター帯の余白 */
  --bc-form-head-bg: var(--bc-bg-primary);     /* ヘッダー帯の背景（白） */
  --bc-form-foot-bg: var(--bc-bg-secondary);   /* フッター帯の背景（薄グレー） */
  --bc-form-head-border: var(--bc-border-strong);  /* head下線/foot上線の色 */
  --bc-form-title-font: var(--bc-modal-title-font);   /* フォーム枠のタイトルもモーダルと同じ大きさ（v3.16.0） */
  --bc-form-title-weight: var(--bc-modal-title-weight);
  --bc-form-nav-size: 26px;            /* ◀▶前後移動ボタンの直径 */
  --bc-form-pos-font: 11px;            /* 「3/47」位置表示の文字サイズ */
  --bc-btn-pad: 5px 14px;              /* 標準ボタン bc-btn の余白 */
  --bc-btn-font: 13px;
  --bc-radius-sm: 6px;
  --bc-radius-md: 8px;
  --bc-radius-lg: 12px;
  --bc-radius-pill: 999px;

  /* デフォルトアクセント = ポータルのnavy。各システムは body または .bc-global-bar に
     style="--bc-accent:#xxxxxx" を JS で動的セットする */
  --bc-accent: #003B8E;
  --bc-brand-navy: #003B8E;
  --bc-brand-blue: #0056D2;

  /* ビジコムロゴ専用色 (コーポレートグリーン) */
  --bc-logo-green: #00A040;
  --bc-logo-green-dark: #006B2C;
}

/* ============================================
   フォント完全統一 (v3.1.0)
   各システムの index.html が個別に body { font-family } を定義していても、
   html body の詳細度 (0,0,2) で確実に上書きする (!important 不要・後勝ち順序にも非依存)。
   フォーム部品 (input/select/textarea/button) は継承しないブラウザがあるため明示指定。
   クラスやインライン style での monospace 指定はそのまま維持される。
   ============================================ */
html body,
html body input,
html body select,
html body textarea,
html body button {
  font-family: var(--bc-font);
  font-size: var(--bc-font-size);
}

/* 地の文(body基準)の文字色を全システムで統一 (v3.3.0)。
   各システムの body{color} を html body の詳細度で上書きする。
   見出し・バッジ等が個別指定する色はそのまま維持。 */
html body {
  color: var(--bc-text);
}

/* 地の背景色を全システムで統一 (v3.5.0)。ポータルのラベンダー(#E8E8F7)に合わせる。
   各システムの body{background:var(--bg)} 等を html body の詳細度 (0,0,2) で上書きする
   (!important 不要・後勝ち順序にも非依存)。カード/パネル/表の白背景はそのまま維持。 */
html body {
  background: var(--bc-bg);
}

/* 文字サイズ統一の補助 (v3.2.0):
   各システムの html{zoom:0.8} を中央で無効化し全システムを等倍(100%)に統一。
   これにより --bc-font-size の 14px が見た目どおりに揃う。 */
html {
  zoom: 1 !important;
}
html body code,
html body pre,
html body kbd,
html body samp {
  font-family: var(--bc-font-mono);
}

/* ============================================
   等幅フォントの統一 (v3.7.0 / 2026-07-28 横断監査)

   基本フォントは v3.1.0 で html body に集約したが、**等幅だけは code/pre/kbd/samp しか
   押さえていなかった**ため、金額やコードを等幅にする指定が各システム独自で3系統に割れていた:
     ・素の `monospace`                        → Windowsでは Courier New で描画（商品管理の金額列など）
     ・`Consolas, monospace`                   → Consolas（在庫管理 .mono・顧客管理 .bvid など）
     ・`var(--bc-font-mono, Consolas, …)`      → SF Mono→Consolas（システム監視・サポート管理 .mono）
   同じ `.mono` クラスがシステムによって別の字形で出ており、金額列を並べると揃わなかった。

   ここで --bc-font-mono に寄せて字形を統一し、あわせて **tabular-nums（等幅数字）** を効かせる。
   桁が縦に揃うので金額表・件数表の見栄えが改善する。

   ⚠️ CLAUDE.md の「共通CSSに汎用的なクラス名を書かない」ルールの**明示的な例外**。
   かつて `.panel{display:none}` で10システムの画面が消えた事故があるため原則は維持しつつ、
   ここは font-family / font-variant-numeric しか触らない（レイアウトも表示/非表示も変えない）ため
   例外として許容する。各システムが上書きしたい時は
   `.mono` より詳細度の高いセレクタ（例 `#wrap .mono`）を自分のCSSに書けばよい。
   ============================================ */
/* ここに挙げるのは「元から等幅で描かれていた」クラスだけ。
   ⚠️ .num / .tabular は**入れない**。経費精算・総合管理・売上管理・営業管理の .num は
   もともと「右寄せ＋tabular-nums の"ゴシックの"金額列」であって等幅指定ではない。
   ここに入れると4システムの金額欄が突然ゴシック→等幅に化ける（統一ではなく改変になる）。
   桁揃えだけは下のブロックで揃える。 */
html body .mono,
html body .amount-cell,
html body .bvid,
html body .slug-code,
html body .utm-box,
html body .var-chip,
html body .bar-cnt {
  font-family: var(--bc-font-mono);
}

/* 各システムが要素に直接 style="font-family:monospace" と書いている分。
   インラインstyleは詳細度でセレクタに勝てないため、ここだけ !important で拾う。
   （2026-07-28 時点で 総合管理・設定管理・商品管理 に計10箇所以上。個別に直すと
     編集箇所が多く事故りやすいので中央で正規化する） */
html body [style*="font-family:monospace"],
html body [style*="font-family: monospace"] {
  font-family: var(--bc-font-mono) !important;
}

/* 数字の桁揃え。金額・件数・数量の列で桁が縦に揃う。フォントは変えない。
   .num は既に4システム(経費精算・総合管理・売上管理・営業管理)が tabular-nums 付きで
   定義しているが、持っていないシステムもあるのでここで揃える。
   .mono は「コード・ID」にも使われるため対象に含めない（等幅字形だけ効かせる）。 */
html body .num,
html body .tabular,
html body .amount-cell,
html body .bar-cnt {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ============================================
   入力欄の背景統一 (v3.4.2)
   未入力の状態から「ここが入力欄」と分かるよう、素朴なフォーム部品の背景をグレーにする。
   各システムの .form-row / .form-group 等(クラス+無指定input/select/textarea)は
   詳細度が本ファイル内の個別デザイン済みコンポーネントと数値上「同点」になり得るため、
   数値の詳細度勝負ではなく明示的な除外リストで線引きする。
   !important は各システム側(別スタイルシートで後から読み込まれる)の無指定な
   input/select/textareaの背景指定に確実に勝つために付与している。
   除外対象(意図的にデザインされた入力欄・そのまま維持):
     .bc-topbar / .topbar / .bc-search-shortcut (囲み内の入力欄)
     ※ v3.6.3 (2026-07-27 社長指示) で **.toolbar を除外から外した**。
       一覧上部の検索・絞り込み欄（.toolbar）だけ白のままで、同じ画面の登録フォーム（グレー）と
       不揃いだったため。各システムの `.toolbar input/select` は padding・枠・フォントのみで
       背景を指定していないので、統一しても既存デザインは壊れない（実コード確認済み）。
     .bc-assignee-pill / .bc-global-assignee (ピル型セレクト、独自の矢印アイコン背景を使用)
     .status-select / .stage-chip-select (案件管理: ステータス・業種で動的に色を変える inline style)
     .name-input (見積管理: 枠なし・透明背景のセル内編集欄)
   除外対象(対象外の型): checkbox/radio/submit/button/file/color/range/hidden
   readonly欄は下の専用ルールで別扱い(編集不可と分かるよう区別する)。
   ============================================ */
html body input:is([type="text"],[type="search"],[type="number"],[type="email"],[type="tel"],[type="url"],[type="password"],[type="date"],[type="datetime-local"],[type="time"],[type="month"],[type="week"]):not(.bc-topbar *):not(.topbar *):not(.bc-search-shortcut *):not(.name-input):not([readonly]),
html body input:not([type]):not(.bc-topbar *):not(.topbar *):not(.bc-search-shortcut *):not(.name-input):not([readonly]),
html body textarea:not([disabled]):not([readonly]),
html body select:not([disabled]):not(.bc-assignee-pill):not(.bc-global-assignee):not(.status-select):not(.stage-chip-select) {
  background: var(--bc-input-bg) !important;
  border-color: var(--bc-input-border) !important;
}

/* ============================================
   入力欄の密度 (v3.8.0 / 2026-07-30 社長指示「このサイズ感を全システム共通にして」)
   サポート管理3028 のBV再現で確定した値を全システムへ展開する。
   input/select は高さ22px・1行28px。各システムが自前で書いた padding / font-size を
   上書きするため !important を付ける（背景・枠と同じ扱い）。
   textarea は本文が窮屈になるので少し広い専用値。
   ⚠ 除外リストは背景ルールより広い。**共通ヘッダー自身の部品(.bc-global-bar / .bc-global-nav 配下)を外す**：
     背景色だけなら巻き込んでも見た目の問題で済むが、padding と文字サイズはヘッダーの高さを直接変える。
     実際 v3.8.0 の適用時に 2段目ナビの部署セレクト(.bc-nav-dept)が 28px に縮んだ。
   ⚠ 変更はこの3変数(--bc-input-pad / --bc-textarea-pad / --bc-input-font)のみで全システムに反映される。
     局所的に戻したいときは、対象の親要素でその変数を上書きする（詳細度で殴り返さない）。
   ============================================ */
html body input:is([type="text"],[type="search"],[type="number"],[type="email"],[type="tel"],[type="url"],[type="password"],[type="date"],[type="datetime-local"],[type="time"],[type="month"],[type="week"]):not(.bc-topbar *):not(.topbar *):not(.bc-search-shortcut *):not(.bc-global-bar *):not(.bc-global-nav *):not(.name-input):not([readonly]),
html body input:not([type]):not(.bc-topbar *):not(.topbar *):not(.bc-search-shortcut *):not(.bc-global-bar *):not(.bc-global-nav *):not(.name-input):not([readonly]),
html body select:not([disabled]):not(.bc-global-bar *):not(.bc-global-nav *):not(.bc-assignee-pill):not(.bc-global-assignee):not(.status-select):not(.stage-chip-select) {
  padding: var(--bc-input-pad) !important;
  font-size: var(--bc-input-font) !important;
  border-radius: var(--bc-input-radius) !important;   /* v3.13.0: 各システムで 5/6/7/8/9/10px に割れていた角丸を統一 */
  /* v3.13.0: 枠の太さ・線種もここで確定させる。色(--bc-input-border)だけ共通で太さは各システム任せ
     （1px / 1.5px / UA既定が混在）だったため。各システムのフォームCSSを標準ブロックへ
     置き換えた際に border 宣言ごと消えるので、その受け皿も兼ねる。 */
  border-width: 1px !important;
  border-style: solid !important;
}
html body textarea:not([disabled]):not([readonly]):not(.bc-global-bar *):not(.bc-global-nav *) {
  padding: var(--bc-textarea-pad) !important;
  font-size: var(--bc-input-font) !important;
  border-radius: var(--bc-input-radius) !important;
}

html body input:is([type="text"],[type="search"],[type="number"],[type="email"],[type="tel"],[type="url"],[type="password"],[type="date"],[type="datetime-local"],[type="time"],[type="month"],[type="week"]):not(.bc-topbar *):not(.topbar *):not(.bc-search-shortcut *):not(.name-input):not([readonly]):focus,
html body input:not([type]):not(.bc-topbar *):not(.topbar *):not(.bc-search-shortcut *):not(.name-input):not([readonly]):focus,
html body textarea:not([disabled]):not([readonly]):focus,
html body select:not([disabled]):not(.bc-assignee-pill):not(.bc-global-assignee):not(.status-select):not(.stage-chip-select):focus {
  background: var(--bc-bg-primary) !important;
  border-color: var(--bc-accent) !important;
}

/* readonly入力欄: 編集不可と分かるよう、通常の入力欄よりさらに淡いグレー+not-allowedカーソルで区別する。
   経費精算(#f5f5f5)・発注管理(#f1f5f9)・採用管理②(#f8f9fa)など、各システムでバラバラだった
   readonly色をここに集約する。 */
html body input[readonly]:is([type="text"],[type="search"],[type="number"],[type="email"],[type="tel"],[type="url"],[type="password"],[type="date"],[type="datetime-local"],[type="time"],[type="month"],[type="week"]),
html body input[readonly]:not([type]),
html body textarea[readonly] {
  background: var(--bc-bg-tertiary) !important;
  border-color: var(--bc-border) !important;
  color: var(--bc-text-secondary) !important;
  cursor: not-allowed;
}

/* ============================================
   1段目: .bc-global-bar (48px)
   ブランド + システム名 + パンくず + utility
   ============================================ */
.bc-global-bar {
  height: 56px;
  background: var(--bc-bg-primary);
  border-bottom: 1px solid var(--bc-border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 14px;
  position: relative;
  font-family: var(--bc-font);
  font-size: 15px;
  user-select: none;
  box-sizing: border-box;
}

/* システム固有カラーの上端帯 */
.bc-global-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--bc-accent);
}

.bc-bar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--bc-logo-green);
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}

.bc-bar-brand:hover { opacity: 0.85; }

.bc-bar-brand .bc-logo-mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--bc-logo-green) 0%, var(--bc-logo-green-dark) 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.bc-bar-brand img,
.bc-bar-brand .bc-logo {
  height: 30px;
  width: auto;
  display: block;
}

.bc-bar-divider {
  width: 1px;
  height: 26px;
  background: var(--bc-border);
  flex-shrink: 0;
}

/* v3.6.0: flex-shrink:0 のままだと狭い画面でシステム名が右側（🔔/担当/アバター）を
   画面外へ押し出していた（実測: 375px幅でアバターが右に21px はみ出す）。
   縮む側をここに一本化し、溢れる分は「…」で省略する。右端の操作系は必ず残す。 */
.bc-bar-systitle {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--bc-accent);
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bc-bar-systitle .bc-bar-icon {
  font-size: 19px;
  margin-right: 2px;
}

.bc-bar-version {
  font-size: 12px;
  font-weight: 600;
  color: var(--bc-text-muted);
  padding: 3px 8px;
  background: var(--bc-bg-tertiary);
  border-radius: 5px;
  letter-spacing: 0.3px;
}

.bc-bar-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--bc-text-tertiary);
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bc-bar-breadcrumb .sep { color: var(--bc-border-strong); }
.bc-bar-breadcrumb .current { color: var(--bc-text-primary); font-weight: 600; }

.bc-bar-spacer { margin-left: auto; }

.bc-bar-utils {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.bc-icon-btn {
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--bc-text-secondary);
  transition: all 0.15s;
  position: relative;
  font-family: inherit;
}

.bc-icon-btn:hover {
  background: var(--bc-bg-tertiary);
  color: var(--bc-text-primary);
}

.bc-icon-btn .badge-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid var(--bc-bg-primary);
}

.bc-assignee-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  background: var(--bc-bg-tertiary);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-pill);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--bc-text-primary);
  transition: all 0.15s;
}

.bc-assignee-pill:hover {
  border-color: var(--bc-accent);
  background: var(--bc-bg-primary);
}

.bc-assignee-pill .av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bc-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.bc-assignee-pill .arrow {
  color: #9ca3af;
  font-size: 11px;
  margin-left: 2px;
}

/* ネイティブselectをpill風に見せる */
select.bc-assignee-pill,
select.bc-global-assignee {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--bc-text-tertiary) 50%),
                    linear-gradient(135deg, var(--bc-text-tertiary) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 30px;
  padding-left: 14px;
  height: 38px;
  border-radius: var(--bc-radius-pill);
  border: 1px solid var(--bc-border);
  background-color: var(--bc-bg-tertiary);
  color: var(--bc-text-primary);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

select.bc-global-assignee:hover {
  border-color: var(--bc-accent);
  background-color: var(--bc-bg-primary);
}

select.bc-global-assignee:focus {
  outline: none;
  border-color: var(--bc-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bc-accent) 18%, transparent);
}

/* 部署 → 担当者の2段セレクト（v3.12.0 / 2026-07-29 社長指示）。
   部署側は担当者側より控えめな幅にし、2つ並んでもバーの右端を圧迫しない */
select.bc-global-assignee-dept { max-width: 150px; margin-right: 2px; }

.bc-user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6b7280, #374151);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-left: 4px;
  flex-shrink: 0;
}

/* ============================================
   2段目: .bc-global-nav (44px)
   13システムpills (active = 固有色塗りつぶし)
   ============================================ */
/* v3.6.0（2026-07-27 社長指示「右サイドが切れる」）:
   従来は .bc-global-nav 自身が overflow-x:auto の1本スクロールで、システムが38個に
   増えた結果 **右端のpillが画面外に隠れたまま気づけない**（スクロールバーも非表示）状態だった。
   → 中身を #bc-nav-scroller に入れ、外枠は「◀ スクローラ ▶ 部署セレクト」の固定レイアウトにする。
     ・部署セレクトはスクロール領域の外なので**絶対に切れない**
     ・続きがある側だけ ◀▶ ボタンとフェードが出る（can-left / can-right は JS が付与） */
.bc-global-nav {
  min-height: 44px;
  background: var(--bc-bg-secondary);
  border-bottom: 1px solid var(--bc-border);
  display: flex;
  align-items: center;
  padding: 0 10px 0 14px;
  gap: 4px;
  font-family: var(--bc-font);
  user-select: none;
  box-sizing: border-box;
}

#bc-nav-scroller {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;              /* これが無いと flex 子が縮まず外枠を押し広げる */
  height: 44px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

#bc-nav-scroller::-webkit-scrollbar { display: none; }
.bc-global-nav::-webkit-scrollbar { display: none; }

/* 続きがある側を淡くフェードさせて「まだ先がある」と分かるようにする */
.bc-global-nav.can-right #bc-nav-scroller {
  mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
}
.bc-global-nav.can-left #bc-nav-scroller {
  mask-image: linear-gradient(to right, transparent 0, #000 26px);
}
.bc-global-nav.can-left.can-right #bc-nav-scroller {
  mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}

.bc-nav-edge {
  display: none;             /* 溢れている側だけ JS が can-* を付けて出す */
  width: 24px;
  height: 28px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--bc-border);
  border-radius: 7px;
  background: var(--bc-bg-primary);
  color: var(--bc-text-secondary);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.bc-nav-edge:hover { border-color: var(--bc-accent); color: var(--bc-accent); }
.bc-global-nav.can-left  .bc-nav-edge.left  { display: inline-flex; }
.bc-global-nav.can-right .bc-nav-edge.right { display: inline-flex; }

/* 部署フィルタ（v3.10.0）。スクロール領域の外に置くので常に見える */
select.bc-nav-dept {
  flex-shrink: 0;
  height: 28px;
  max-width: 200px;
  padding: 0 6px;
  border: 1px solid var(--bc-border);
  border-radius: 8px;
  background: var(--bc-bg-primary);
  color: var(--bc-text-secondary);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
select.bc-nav-dept:hover { border-color: var(--bc-accent); color: var(--bc-accent); }
select.bc-nav-dept:focus { outline: none; border-color: var(--bc-accent); }

/* 部署フィルタで対象外になったシステム（アクセス制限ではなく表示の絞り込み） */
.bc-nav-pill.bc-nav-hidden { display: none !important; }

.bc-global-links {
  display: contents;
}

.bc-nav-pill,
.bc-global-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bc-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s;
  border: 1px solid transparent;
  flex-shrink: 0;
  background: transparent;
}

.bc-nav-pill:hover,
.bc-global-link:hover {
  background: var(--bc-bg-primary);
  color: var(--bc-text-primary);
  border-color: var(--bc-border);
}

.bc-nav-pill.active,
.bc-global-link.active {
  background: var(--bc-accent);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  border-color: transparent;
}

.bc-nav-pill .pill-icon,
.bc-global-link .link-icon {
  font-size: 14px;
}

/* ============================================
   3段目: .bc-page-actions / .bc-topbar / .topbar (56px・帯型)
   .toolbar は別ルール (社員管理風カード型) で扱うので除外
   ============================================ */
.bc-page-actions,
.bc-topbar,
.topbar {
  min-height: 56px;
  background: var(--bc-bg-primary);
  border-bottom: 1px solid var(--bc-border);
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  box-sizing: border-box;
  color: var(--bc-text-primary);
  font-family: var(--bc-font);
}

/* ============================================
   社員管理風ヘッダー (3段目): <header> または .bc-app-header
   システム固有色のグラデーション + 白文字
   各システムの既存 <header> にも自動的に適用される
   ============================================ */
body > header:not(.bc-global-bar):not(.bc-global-nav):not([class*="bc-global"]),
body .bc-app-header {
  background: linear-gradient(135deg,
    var(--bc-accent) 0%,
    rgba(var(--bc-accent-rgb, 0, 59, 142), 0.78) 100%) !important;
  color: #ffffff !important;
  height: 44px !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  border-bottom: none !important;
  box-sizing: border-box !important;
  font-family: var(--bc-font);
}

body > header:not(.bc-global-bar):not(.bc-global-nav):not([class*="bc-global"]) h1,
body .bc-app-header h1 {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

body > header .version,
body .bc-app-header .version {
  font-size: 11px !important;
  opacity: 0.9 !important;
  margin-left: 4px !important;
  font-weight: 600;
  padding: 2px 7px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  letter-spacing: 0.3px;
}

/* 担当者pill (バージョンの右) */
body > header .bc-assignee-display,
body .bc-app-header .bc-assignee-display {
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
body > header .bc-assignee-display::before,
body .bc-app-header .bc-assignee-display::before {
  content: '👤';
  font-size: 10px;
}

body > header .right,
body .bc-app-header .right {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

body > header .home-link,
body .bc-app-header .home-link {
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 4px 10px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600;
}
body > header .home-link:hover,
body .bc-app-header .home-link:hover { background: rgba(255, 255, 255, 0.25) !important; }

body > header .freemode-badge,
body .bc-app-header .freemode-badge {
  background: #FFE082 !important;
  color: #5D4037 !important;
  padding: 2px 9px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================
   .panel / .view (タブ切替コンテンツ) — v3.6.2 で撤去（2026-07-27）
   ============================================
   かつてここに以下があった:
       body .panel, body .view { display: none; }
       body .panel.active, body .view.active { display: block; }
   これは「.panel はタブの中身」という前提の共通指定だったが、**前提が成り立っていない**:
   ① .panel を「カード枠」として使うシステム（親会社3043・固定資産3039・要望3040・バグ3041・
      予定3042・カルテ3027・リード3029・在庫3030・経営3031・支払3032）では、.active が
      付かないため **画面の中身が丸ごと消える**。実際に親会社管理3043 で一覧も新規登録フォームも
      出ない状態になっていた（QA管理3019 は以前 `body main .panel` で個別に回避していた）。
   ② タブとして使う5システム（経費3023・総合3024・設定3033・売上3014・社員3021）と
      .view の2システム（採用②3026・営業3010）は **全て自前で display:none/.active を定義済み**
      なので、この共通指定は元から不要だった。
   ③ むしろ有害で、営業管理の `.view.active{display:flex}` を `body .view.active{display:block}`
      （specificity が上）が上書きし、flexレイアウトを壊していた。
   → 汎用的すぎるクラス名を共通CSSが横取りしない方針とし、各システムの自前定義に委ねる。 */

/* 検索ショートカット (⌘K風) */
.bc-search-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px 0 32px;
  background: var(--bc-bg-secondary);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-md);
  width: 280px;
  position: relative;
  cursor: text;
  font-size: 13px;
  color: var(--bc-text-tertiary);
  transition: border-color 0.15s;
}

.bc-search-shortcut:hover { border-color: var(--bc-border-strong); }
.bc-search-shortcut:focus-within {
  border-color: var(--bc-accent);
  background: var(--bc-bg-primary);
}

.bc-search-shortcut::before {
  content: '🔍';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  pointer-events: none;
}

.bc-search-shortcut input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-family: inherit;
  color: var(--bc-text-primary);
}

.bc-search-shortcut .kbd {
  margin-left: auto;
  font-family: var(--bc-font-mono);
  font-size: 10px;
  padding: 2px 6px;
  background: var(--bc-bg-primary);
  border: 1px solid var(--bc-border);
  border-radius: 4px;
  color: var(--bc-text-tertiary);
  white-space: nowrap;
}

/* .bc-topbar / .topbar 内の汎用入力 (.toolbar の入力スタイルは下部の専用ブロックで定義済み) */
.bc-topbar input[type="search"],
.bc-topbar input[type="text"],
.topbar input[type="search"],
.topbar input[type="text"] {
  height: 36px;
  padding: 0 10px 0 30px;
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-md);
  font-size: 13px;
  background: var(--bc-bg-secondary);
  color: var(--bc-text-primary);
  font-family: inherit;
}

.bc-topbar input:focus,
.topbar input:focus {
  outline: none;
  border-color: var(--bc-accent);
  background: var(--bc-bg-primary);
}

/* 件数表示 */
.bc-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--bc-text-tertiary);
}

.bc-count strong {
  color: var(--bc-accent);
  font-weight: 700;
}

/* ============================================
   ボタン (固有色対応)
   ============================================ */
.bc-btn-primary,
.bc-btn-blue,
.bc-btn-green {
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: var(--bc-radius-md);
  background: var(--bc-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.15s, transform 0.1s;
  font-family: inherit;
  white-space: nowrap;
}

.bc-btn-primary:hover,
.bc-btn-blue:hover,
.bc-btn-green:hover {
  opacity: 0.88;
}

.bc-btn-primary:active,
.bc-btn-blue:active,
.bc-btn-green:active {
  transform: translateY(1px);
}

.bc-btn-ghost,
.bc-btn {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-md);
  background: var(--bc-bg-primary);
  font-size: 13px;
  font-weight: 600;
  color: var(--bc-text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}

.bc-btn-ghost:hover,
.bc-btn:hover {
  background: var(--bc-bg-secondary);
  border-color: var(--bc-border-strong);
}

/* ============================================
   4段目: .bc-tabnav (46px・正式名称)
   別名(全て等価): .tab-nav / .tab-bar / .tabs / .nav.tabs / nav.nav
   active = 固有色下線 + 固有色文字。sticky で画面上部に追従。
   (旧「社員管理風タブナビ」ブロックと重複定義されていたため統合。
    旧ブロックでのみ効いていた sticky をここに引き継ぎ復活)
   ============================================ */
.bc-tabnav,
.bc-tab-nav,
.nav.tabs,
.tabs,
.tab-bar,
body > nav.nav {
  height: 46px;
  background: var(--bc-bg-primary) !important;
  border-bottom: 2px solid var(--bc-border) !important;
  padding: 0 20px !important;
  display: flex !important;
  gap: 0 !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  position: sticky;
  top: 0;
  z-index: 10;
  box-sizing: border-box;
  align-items: center;
}

.bc-tab,
.nav-item,
.tab,
.tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px;
  height: 46px !important;
  padding: 0 18px !important;
  border: none !important;
  background: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bc-text-tertiary) !important;
  cursor: pointer !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
  font-family: inherit;
  text-decoration: none;
}

.bc-tab:hover,
.nav-item:hover,
.tab:hover,
.tab-btn:hover {
  color: var(--bc-text-primary) !important;
  background: var(--bc-bg-secondary) !important;
}

.bc-tab.active,
.nav-item.active,
.tab.active,
.tab-btn.active {
  color: var(--bc-accent) !important;
  background: transparent !important;
  border-bottom-color: var(--bc-accent) !important;
}

/* ============================================
   サマリーバー (旧) — 後方互換
   ============================================ */
.bc-summary-bar {
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bc-bg-primary);
  border-bottom: 1px solid var(--bc-border);
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
}
.bc-sum-card {
  background: var(--bc-bg-secondary);
  border-radius: var(--bc-radius-md);
  padding: 8px 14px;
  min-width: 100px;
  flex: 1;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s;
}
.bc-sum-card.active { border-color: var(--bc-accent); }
.bc-sum-card:hover { border-color: var(--bc-border-strong); }
.bc-sum-label { font-size: 10px; color: var(--bc-text-muted); margin-bottom: 2px; }
.bc-sum-value { font-size: 18px; font-weight: 700; color: var(--bc-accent); }
.bc-sum-sub { font-size: 10px; color: var(--bc-text-secondary); margin-top: 1px; }

/* ============================================
   レスポンシブ
   ============================================ */
@media (max-width: 1280px) {
  .bc-bar-breadcrumb { display: none; }
  .bc-search-shortcut { width: 220px; }
}

@media (max-width: 1100px) {
  .bc-nav-pill,
  .bc-global-link { padding: 0 10px; font-size: 12px; }
}

@media (max-width: 900px) {
  .bc-bar-brand span:not(.bc-logo-mark) { display: none; }
  .bc-bar-divider { display: none; }
  .bc-bar-version { display: none; }
  .bc-search-shortcut { width: 160px; }
  .bc-nav-pill,
  .bc-global-link { padding: 0 8px; font-size: 11px; }
  .bc-global-bar { padding: 0 10px; gap: 8px; }
  .bc-global-nav { padding: 0 6px 0 8px; }
  select.bc-nav-dept { max-width: 130px; font-size: 11px; }
  /* 1段目も同じ理由で右が詰まる。担当セレクトを縮めてアバターを守る */
  select.bc-global-assignee { max-width: 150px; padding-left: 10px; }
}

@media (max-width: 700px) {
  .bc-bar-systitle .bc-bar-version { display: none; }
  .bc-icon-btn { width: 28px; height: 28px; font-size: 14px; }
  .bc-assignee-pill span:not(.av):not(.arrow) { display: none; }
  /* 指でスワイプできるので ◀▶ は出さない（フェードは残す） */
  .bc-global-nav.can-left  .bc-nav-edge.left,
  .bc-global-nav.can-right .bc-nav-edge.right { display: none; }
  select.bc-nav-dept { max-width: 104px; }
  select.bc-global-assignee { max-width: 116px; font-size: 12px; }
  /* v3.12.0: 狭い画面では部署セレクトを畳む（担当者セレクト自体は全件で機能する） */
  select.bc-global-assignee-dept { display: none; }
  /* ヘルプは3段目・各画面にもある。右端の担当/操作者を守るためここでは畳む */
  .bc-bar-utils .bc-icon-btn[title="ヘルプ"] { display: none; }
  .bc-global-bar { padding: 0 8px; gap: 6px; }
}

/* ============================================
   3段目 共通ベースライン (B案 / v3.0.2〜)
   3段目(56px帯)の正式名称は .bc-page-actions（別名 .topbar / .bc-topbar）。
   カード型の濃色系ツールバーは別物で .bc-toolbar（別名 .toolbar）→ 後方の専用ブロック参照。
   :where() でゼロ詳細度なので、各システムの既存ルールは一切上書きされず、
   定義の無いプロパティだけ適用される。
   ⚠️ .app-header は本ベースラインの対象外（予約管理vehicle.html等で実際には
      グラデーション見出し帯として使われており、本ベースラインとは別役割のため）。
      グラデーション見出し帯は body > header / .bc-app-header の専用ブロックで定義済み。
   .header は portal/稟議/売上 の最上位ヘッダーに使われており、
   ネスト用途も多いため対象外。
   ============================================ */
:where(.topbar, .toolbar, .bc-page-actions) {
  background: var(--bc-bg-primary);
  border-bottom: 1px solid var(--bc-border);
  font-family: var(--bc-font);
  color: var(--bc-text-primary);
  box-sizing: border-box;
}

/* 3段目の右端にあるアクション群を共通スタイルに揃える */
:where(.topbar-right, .toolbar-right, .bc-page-actions-right) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

:where(.topbar-left, .toolbar-left, .bc-page-actions-left) {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* page-header (稟議で多用される見出し帯) のベースライン */
:where(.page-header) {
  font-family: var(--bc-font);
  color: var(--bc-text-primary);
}

/* ============================================
   .toolbar 共通デザイン (社員管理スタイルに統一 / v3.0.4〜)
   ポータル(:3000) は .toolbar を使用していないため影響なし。
   各システムの内部 <style> より specificity を上げて確実に上書き。
   ============================================ */
body .toolbar {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  /* システム固有色の薄いティント (RGB変数 - bc-header.js が設定) */
  background: rgba(var(--bc-accent-rgb, 0, 59, 142), 0.08) !important;
  /* 左端 4px アクセント帯 + 全周 1px の薄い色枠 */
  border-left: 4px solid var(--bc-accent) !important;
  border-top: 1px solid rgba(var(--bc-accent-rgb, 0, 59, 142), 0.2) !important;
  border-right: 1px solid rgba(var(--bc-accent-rgb, 0, 59, 142), 0.2) !important;
  border-bottom: 1px solid rgba(var(--bc-accent-rgb, 0, 59, 142), 0.2) !important;
  padding: 12px 14px !important;
  border-radius: 8px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  min-height: 0 !important;
  justify-content: flex-start;
  font-family: var(--bc-font);
  color: var(--bc-text-primary);
  box-sizing: border-box;
}

body .toolbar input,
body .toolbar select,
body .toolbar textarea,
body .toolbar input[type="text"],
body .toolbar input[type="search"],
body .toolbar input[type="date"],
body .toolbar input[type="number"],
body .toolbar input[type="email"],
body .toolbar input[type="tel"] {
  padding: 7px 10px;
  border: 1px solid var(--bc-border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: #ffffff;
  color: var(--bc-text-primary);
  box-sizing: border-box;
}

body .toolbar input:focus,
body .toolbar select:focus,
body .toolbar textarea:focus {
  outline: 2px solid var(--bc-accent);
  outline-offset: -1px;
  border-color: var(--bc-accent);
}

/* toolbar 内ボタンも社員管理のサイズに揃える (但しシステムの色は維持) */
body .toolbar .btn,
body .toolbar button {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.15s;
}

body .toolbar .btn-small {
  padding: 4px 10px;
  font-size: 12px;
}

/* toolbar-left / toolbar-right は社員管理には無いが既存システム用に揃える */
body .toolbar > .toolbar-left,
body .toolbar > .toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
body .toolbar > .toolbar-right {
  margin-left: auto;
}

/* ============================================
   .bc-toolbar-title — toolbar 左端に差し込まれる「システム名 + バージョン」
   配色は中性スレート (#37474F) 系で、13システム全ての固有色とかち合わない。
   ============================================ */
body .bc-toolbar-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 10px;
  background: linear-gradient(135deg, #ECEFF1 0%, #CFD8DC 100%);
  color: #263238;
  border: 1px solid #B0BEC5;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 4px;
  box-shadow: 0 1px 2px rgba(55, 71, 79, 0.08);
  font-family: var(--bc-font);
}

body .bc-toolbar-title-icon {
  font-size: 15px;
  line-height: 1;
}

body .bc-toolbar-title-text {
  color: #263238;
}

body .bc-toolbar-title-ver {
  font-size: 10px;
  font-weight: 600;
  color: #546E7A;
  background: #ffffff;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  border: 1px solid #CFD8DC;
}

@media (max-width: 700px) {
  body .bc-toolbar-title-ver { display: none; }
  body .bc-toolbar-title { font-size: 12px; padding: 4px 10px 4px 8px; }
}

/* ============================================
   .bc-auto-toolbar — .toolbar を持たないシステム用に自動生成される toolbar
   タイトル + 担当者 select を含み、bc-global-nav の直後に配置される
   ============================================ */
body .toolbar.bc-auto-toolbar {
  margin: 12px 16px 14px;
}

body .bc-auto-assignee {
  padding: 7px 28px 7px 12px !important;
  border: 1px solid #B0BEC5 !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23546E7A' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer;
  min-width: 160px;
  color: #263238;
  transition: border-color 0.15s, box-shadow 0.15s;
}

body .bc-auto-assignee:hover {
  border-color: #78909C !important;
}

body .bc-auto-assignee:focus {
  outline: none !important;
  border-color: var(--bc-accent) !important;
  box-shadow: 0 0 0 3px rgba(55, 71, 79, 0.15);
}

/* ============================================
   一覧のゼブラ行 (v3.9.0 / 2026-07-30 社長指示・全システム標準)
   「一覧の行を区別するため、各行ごとに交互にグレー・白の濃淡をつけて。
    今後、他システムでも行表示する場合はこれを基準にして」
   - オプトイン方式: 一覧の <table> に bc-zebra を付けた表だけに当たる。
     素の table / .grid など汎用名には一切当てない（v3.6.2 の .panel 事故の教訓）。
   - 色は :root の --bc-zebra-even / --bc-row-hover の2変数で一元管理。
   - ホバーは td レベル(0,2,4)で当てるため、各システム自前の
     `table.grid tr:hover td`(0,1,3) より必ず強い。採用時は自前hover行を削除してよい。
   - 意味色の行（エラー赤・警告等）はその行の td に背景を書けば従来どおり優先される。
   ============================================ */
table.bc-zebra tbody tr:nth-child(odd) td { background: #ffffff; }
table.bc-zebra tbody tr:nth-child(even) td { background: var(--bc-zebra-even); }
table.bc-zebra tbody tr:hover td { background: var(--bc-row-hover); }
/* v3.11.1: 罫線を**格子**にする（社長指示「縦横すべてに1px」）。BV再現表(bc-bv-table)と同じ引き方に揃えた。
   v3.9.1 で下線だけ引いていたものを4辺へ広げたもの。色は従来どおり --bc-row-border の1変数。
   (0,1,3) で各システムの table.xxx td (0,1,2) より強いので、自前の罫線は書かなくてよい */
table.bc-zebra tbody td { border: 1px solid var(--bc-row-border); }
/* v3.12.0: 文字も揃える（社長指示）。従来は色と罫線だけで、見出しが10〜14pxの7種類・
   太さ4種類にばらけていた。**強調したいセルは各システム側で上書きできる**——
   インラインの font-weight や、クラスを2つ以上使ったセレクタ(0,2,1)なら
   このルール(0,1,3)に勝つ（例: 経費精算の申請番号セル・売上管理の合計行） */
table.bc-zebra tbody td { font-size: var(--bc-list-font); font-weight: var(--bc-list-weight); }
/* v3.9.4: 一覧ヘッダー=そのシステムの主色＋白文字（--bc-accent は bc-header.js が各システムに動的セット）。
   各システムの table.xxx th { color: var(--muted); background: ... } を (0,1,3) で上書きする。
   v3.11.1: 見出しにも縦罫線を入れて本文の格子と列位置を合わせる */
table.bc-zebra thead th { background: var(--bc-thead-bg); color: var(--bc-thead-text);
                          border: 1px solid var(--bc-row-border);
                          font-size: var(--bc-list-th-font); font-weight: var(--bc-list-th-weight); }
/* v3.11.1: 格子は border-collapse:collapse が前提（separate だと線が二重に見える）。
   実測では全274本が collapse だったが、付け忘れても崩れないよう共通側で保証しておく */
table.bc-zebra { border-collapse: collapse; }

/* ============================================
   区切り行・展開行を挟む一覧 (v3.14.0 / 2026-08-02 社長指示「カード型をやめて一覧にする」)

   上の縞は `tbody tr:nth-child(odd/even) td` で塗るため、**データ行以外の <tr> が混ざる表では成立しない**:
     - 区切り見出し行（業務明細3012の活動一覧＝グループごとの見出し）
     - 行をクリックして開く詳細行（案件管理3005の案件一覧・リード管理3029のリード一覧）
   どちらも「見出し／詳細も1行として数えられ、以降のデータ行の縞の位相がずれる」。
   実際リード管理は詳細を開くと下のデータ行の位相がずれていた（挿入行数が偶数のため気づきにくかった）。

   使い方: <table class="bc-zebra bc-zebra-manual"> にして、**縞はJS側で <tr> に bc-zebra-even を付ける**
   （データ行だけを数えた index の奇数行に付ける。業務明細が以前から log-item-even でやっていた方式を共通化したもの）。
   ⚠ 既存のルールは書き換えず、より強い詳細度 (0,3,3) で上書きする形にしてある。
     bc-zebra-manual を付けない表はこれまでどおり nth-child で塗られる。
   ============================================ */
table.bc-zebra.bc-zebra-manual tbody tr td { background: var(--bc-bg-primary); }
table.bc-zebra.bc-zebra-manual tbody tr.bc-zebra-even td { background: var(--bc-zebra-even); }
/* 区切り見出しの行（<tr class="bc-zebra-group"><td colspan="N">）。
   列見出し(thead th)とは別物なので主色ベタにはせず、中立グレー＋一覧見出しと同じ文字にする。
   縦に長い一覧で見出しを見失わないよう sticky。**背景はここで持つので各システム側で書かない** */
table.bc-zebra tbody tr.bc-zebra-group td {
  background: var(--bc-zebra-even);
  font-size: var(--bc-list-th-font);
  font-weight: var(--bc-list-th-weight);
  position: sticky; top: 0; z-index: 2;
}
/* 行を開いたときに差し込む詳細行（<tr class="bc-zebra-detail"><td colspan="N">） */
table.bc-zebra tbody tr.bc-zebra-detail td { background: var(--bc-bg-secondary); }
/* 区切り・詳細の行はデータ行ではないのでホバーで反応させない（クリック対象は行そのものではないため） */
table.bc-zebra tbody tr.bc-zebra-group:hover td { background: var(--bc-zebra-even); }
table.bc-zebra tbody tr.bc-zebra-detail:hover td { background: var(--bc-bg-secondary); }

/* ============================================
   明細表（ラベル＋値） (v3.10.0 / 2026-08-02 社長指示・全システム標準)
   一覧の bc-zebra と対になる部品。「1件の中身を見せる」画面のための枠。
   - オプトイン方式: <dl> に bc-detail を付けたものだけに当たる。
     素の <dl> には一切当てない（v3.6.2 の .panel 事故＝汎用名への共通指定禁止）。
   - ⚠ `dl.bc-detail` は「<dl>タグ＋class」の意味。稟議管理が `.dl` を
     **クラス名**として使っている（<div class="dl">）が、そちらには当たらない。
   - ラベル列は主色ではなく中立グレー（--bc-detail-label-bg）。一覧ヘッダーと違い
     ラベルが縦に長く続くので、主色ベタだと重くなるため（社長選択）。
   - ラベル幅を変えたい画面は要素側で style="--bc-detail-label-w:90px" と
     **変数を上書きする**（詳細度で殴り返さない＝--bc-input-bg と同じ運用）。
   - 2組を横に並べたいときは bc-detail-2col、値を残り全部へ伸ばすときは
     dd に bc-detail-wide を付ける。
   ============================================ */
dl.bc-detail {
  display: grid;
  grid-template-columns: var(--bc-detail-label-w) minmax(0, 1fr);
  margin: 0;
  border-top: 1px solid var(--bc-row-border);
  border-left: 1px solid var(--bc-row-border);
}
dl.bc-detail > dt {
  background: var(--bc-detail-label-bg);
  color: var(--bc-text-secondary);
  font-size: var(--bc-detail-label-font);
  font-weight: 500;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--bc-row-border);
  border-right: 1px solid var(--bc-row-border);
}
dl.bc-detail > dd {
  margin: 0;
  background: var(--bc-bg-primary);
  color: var(--bc-text-primary);
  font-size: var(--bc-detail-font);
  padding: 6px 10px;
  min-width: 0;
  word-break: break-word;
  border-bottom: 1px solid var(--bc-row-border);
  border-right: 1px solid var(--bc-row-border);
}
dl.bc-detail.bc-detail-2col {
  grid-template-columns: var(--bc-detail-label-w) minmax(0, 1fr) var(--bc-detail-label-w) minmax(0, 1fr);
}
dl.bc-detail > dd.bc-detail-wide { grid-column: 2 / -1; }
/* 値が空のときは「—」を出す。JSが後から textContent を入れる欄でも、
   入るまでの間セルが潰れて見えないのを防ぐ */
dl.bc-detail > dd:empty::after { content: '—'; color: var(--bc-text-muted); }
/* 700px以下=2組でも1組に折る／480px以下=ラベルを値の上に積む */
@media (max-width: 700px) {
  dl.bc-detail, dl.bc-detail.bc-detail-2col {
    grid-template-columns: var(--bc-detail-label-w) minmax(0, 1fr);
  }
}
@media (max-width: 480px) {
  dl.bc-detail, dl.bc-detail.bc-detail-2col { grid-template-columns: 1fr; }
  dl.bc-detail > dt { border-right: none; }
  dl.bc-detail > dd.bc-detail-wide { grid-column: 1 / -1; }
}

/* ============================================
   BV(BusicomVisor)再現表 (v3.11.0 / 2026-08-02 社長指示)
   BVの実画面を写した表のための共通枠。一覧標準(bc-zebra)とは目的が違う——
   bc-zebra は「社内システム同士で揃える」、こちらは「BVに揃える」。
   BVを見ながら使う人が違和感なく乗り換えられることが目的なので、
   格子罫線・ラベンダーの行・帯の見出しという BV の見た目はそのまま残す。

   従来は ポータル / 業務明細3012 / サポート管理3028 / スケジュール管理3042 の
   4システムが **同じものを4通りに自前で** 書いていた（ポータルとスケジュール管理に
   至っては同じ .bv-table というクラス名で中身が別物だった）。それを1本に畳んだもの。

   - 見出し帯の色だけは表ごとに変える。**BVは画面ごとに帯の色が違う**（業務明細内容＝ピンク／
     検索フォーム＝ティール／見出し＝黄緑／ToDo＝水色）ので、これはBV側の仕様。
     下のプリセットクラスを使うか、--bc-bv-th-bg / --bc-bv-th-text を要素側で上書きする。
   - 寄せ・文字サイズ・padding はポータルの値へ統一（2026-08-02 社長選択）。
   - ホバーは一覧標準と同じ --bc-row-hover（同上。従来のBV黄 #FFFBDE / #FFFBD6 は廃止）。

   使い分け:
     <table class="bc-bv-table bc-bv-zebra">  一覧。1行=1件で交互に縞
     <table class="bc-bv-table">              一覧だが縞なし。グループ単位で縞にしたい表は
                                              tr に bc-bv-alt を付ける（スケジュール管理が
                                              日付グループ単位で使っている＝BVと同じ挙動）
     <table class="bc-bv-table bc-bv-form">   ラベル＋入力欄の格子。th が行ラベルになる。
                                              幅を詰め、ホバーもしない（業務明細の検索/入力枠）
   ============================================ */
table.bc-bv-table { width: 100%; border-collapse: collapse; font-size: var(--bc-bv-font); }
table.bc-bv-table th {
  background: var(--bc-bv-th-bg);
  color: var(--bc-bv-th-text);
  font-size: var(--bc-bv-th-font);
  font-weight: 700;
  text-align: left;
  padding: var(--bc-bv-pad);
  border: 1px solid var(--bc-bv-line);
  white-space: nowrap;
}
table.bc-bv-table td {
  background: var(--bc-bv-row);
  padding: var(--bc-bv-pad);
  border: 1px solid var(--bc-bv-cell);
  vertical-align: top;
}
/* 交互行。thead を持たない表（ポータル）は見出し行が1行目=odd に来るので、
   どちらの書き方でもデータ行の縞は同じ位置から始まる */
table.bc-bv-table.bc-bv-zebra > tbody > tr:nth-child(even) > td { background: var(--bc-bv-row-alt); }
/* グループ単位で縞にしたいときは行側に付ける（nth-child では表せないため） */
table.bc-bv-table tr.bc-bv-alt > td { background: var(--bc-bv-row-alt); }
/* ホバー = 一覧標準と同色 */
table.bc-bv-table tbody tr:hover td { background: var(--bc-row-hover); }
/* ラベル＋入力欄の格子。th は列見出しではなく行ラベルなので幅を詰める。
   フォームなので行ホバーはしない */
table.bc-bv-table.bc-bv-form th { width: 1%; }
table.bc-bv-table.bc-bv-form tbody tr:hover td { background: var(--bc-bv-row); }

/* 見出し帯のプリセット（BVの実画面で使われている5色）。
   表に付けるか、要素側で --bc-bv-th-bg / --bc-bv-th-text を直接上書きしてもよい */
table.bc-bv-green { --bc-bv-th-bg: #A8E4A0; --bc-bv-th-text: #16321a; }  /* 見出し（既定） */
table.bc-bv-blue  { --bc-bv-th-bg: #BBD9F5; --bc-bv-th-text: #16264a; }  /* ToDo */
table.bc-bv-steel { --bc-bv-th-bg: #A0C0E0; --bc-bv-th-text: #12233a; }  /* サポート明細 */
table.bc-bv-pink  { --bc-bv-th-bg: #E3A7E3; --bc-bv-th-text: #2b2b52; }  /* 業務明細内容 */
table.bc-bv-teal  { --bc-bv-th-bg: #A5D6D6; --bc-bv-th-text: #123434; }  /* 業務明細の検索 */

/* ============================================
   入力・編集フォームの標準枠 bc-form-* (v3.15.0 / 2026-08-02 社長指示)
   「新規・編集・入力ページをもっといいデザインに。キャンセル、登録、ボタンは上下につけて。
    前・後、レコードの移動ボタン付けて」

   対象＝**保存を伴う**新規・編集・入力フォーム（約120個）。検索/選択/参照専用モーダルは対象外。
   一覧=bc-zebra / 明細=bc-detail / 入力項目=v3.13.0変数 に続く**4つ目の軸＝フォームの枠**。
   ゼブラと同じ**オプトイン方式**（クラスを付けた要素にだけ当たる。汎用名 .modal 等には書かない）。

   構造（モーダルは flex縦3分割）:
     <div class="modal bc-form-modal">
       <div class="bc-form-head">                              ← 固定（スクロールしない）
         <span class="bc-form-nav" data-bcnav="xxx"></span>    ← ◀▶n/N は bc-form-nav.js が描画
         <div class="bc-form-title">タイトル</div>
         <div class="bc-form-actions">
           （固有ボタン…削除/下書き保存等はここに維持）
           <button type="button" class="bc-btn">キャンセル</button>
           <button type="button" class="bc-btn bc-btn-primary">登録</button>
         </div>
       </div>
       <div class="bc-form-body"> …既存の中身をそのままラップ… </div>   ← ここだけスクロール
       <div class="bc-form-foot">                              ← 固定。キャンセル/登録を再掲
         <button type="button" class="bc-btn">キャンセル</button>
         <button type="button" class="bc-btn bc-btn-primary">登録</button>
       </div>
     </div>

   - **position:sticky は使わない**。祖先の overflow-x:hidden で死ぬ既知の罠と、各モーダルの
     padding 差（20〜24px）による負マージン補正（経費の旧 top:-20px ハック）を構造的に排除する。
   - **ボタンは必ず type="button"**（QA管理3019のようなページ内 <form> で暗黙submitを防ぐ）。
   - モーダルでないページ内フォーム（B群）は容器に .bc-form-inline を付け、
     head を先頭・foot を末尾に置くだけ（bodyラップ不要・ページごとスクロール）。
   - 画面ごとの調整は要素側で変数上書き（--bc-form-maxh 等）。詳細度で殴り返さない。
   - セレクタを .bc-form-modal.bc-form-modal (0,2,1) と重ねているのは、
     .modal-overlay-bg .modal (0,2,0) のような各システムの2段指定に読み込み順に関係なく
     勝つため（bc-zebra-manual が (0,3,3) で上書きしているのと同じ手法・!important は使わない）。
   ============================================ */
div.bc-form-modal.bc-form-modal {
  display: flex;
  flex-direction: column;
  padding: 0;                     /* 余白は bc-form-body 側が持つ */
  overflow: hidden;               /* 角丸のクリップ。スクロールは body に限定 */
  max-height: var(--bc-form-maxh);
}
.bc-form-head, .bc-form-foot { flex: 0 0 auto; box-sizing: border-box; }
.bc-form-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: var(--bc-form-head-pad);
  background: var(--bc-form-head-bg);
  border-bottom: 1px solid var(--bc-form-head-border);
}
.bc-form-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--bc-form-title-font);
  font-weight: var(--bc-form-title-weight);
  color: var(--bc-text-primary);
}
div.bc-form-modal.bc-form-modal > .bc-form-body {
  flex: 1 1 auto; min-height: 0;  /* min-height:0 は flex子を overflow させる必須条件 */
  overflow-y: auto;
  padding: var(--bc-form-body-pad);
}
.bc-form-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  padding: var(--bc-form-foot-pad);
  background: var(--bc-form-foot-bg);
  border-top: 1px solid var(--bc-form-head-border);
}
/* head 内のボタン行は右寄せ（title が flex:1 で残りを取るが、wrap 時も右端に付くように） */
.bc-form-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.bc-form-foot .bc-form-actions { margin-left: 0; }

/* ◀▶前後レコード移動（中身は bc-form-nav.js が描画。新規モード・一覧外では自動で空になる） */
.bc-form-nav { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.bc-form-nav-btn {
  width: var(--bc-form-nav-size); height: var(--bc-form-nav-size);
  border: 1px solid var(--bc-border-strong);
  border-radius: 50%;
  background: var(--bc-bg-primary);
  color: var(--bc-text-primary);
  cursor: pointer; font-size: 12px; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.bc-form-nav-btn:hover:not(:disabled) { background: var(--bc-row-hover); }
.bc-form-nav-btn:disabled { opacity: .35; cursor: default; }
.bc-form-nav-pos {
  font-size: var(--bc-form-pos-font);
  color: var(--bc-text-muted);
  font-variant-numeric: tabular-nums;   /* 3/47 → 4/47 で幅が揺れない */
  white-space: nowrap; margin-left: 2px;
}

/* 標準ボタン（bc-form-head / bc-form-foot 内で使う）。
   主色ボタンは --bc-accent 連動＝各システムの色に自動で馴染む。
   既存の onclick / id / ラベルはそのまま、class だけ bc-btn 系に替える運用 */
.bc-btn {
  padding: var(--bc-btn-pad);
  border-radius: var(--bc-radius-sm);
  border: 1px solid var(--bc-border-strong);
  background: var(--bc-bg-primary);
  color: var(--bc-text-primary);
  font-size: var(--bc-btn-font); font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  line-height: 1.4; white-space: nowrap; font-family: inherit;
}
.bc-btn:hover { background: var(--bc-bg-tertiary); }
.bc-btn:active { transform: translateY(1px); }
.bc-btn:disabled { opacity: .5; cursor: default; transform: none; }
.bc-btn.bc-btn-primary { background: var(--bc-accent); border-color: var(--bc-accent); color: #fff; }
.bc-btn.bc-btn-primary:hover { filter: brightness(.92); background: var(--bc-accent); }
.bc-btn.bc-btn-danger { background: #C62828; border-color: #C62828; color: #fff; }
.bc-btn.bc-btn-danger:hover { filter: brightness(.92); background: #C62828; }

/* ページ内フォーム（モーダルでないB群）。head/foot を上下の帯として使う */
.bc-form-inline { border: 1px solid var(--bc-border); border-radius: var(--bc-radius-md); overflow: hidden; }
.bc-form-inline > .bc-form-head { border-radius: var(--bc-radius-md) var(--bc-radius-md) 0 0; }
.bc-form-inline > .bc-form-foot { border-radius: 0 0 var(--bc-radius-md) var(--bc-radius-md); }