/* 全ツール共通の見た目
 *
 *  ツールごとの app.css より「後」に読み込むこと。
 *  ここに書くのは、どのツールでも同じであってほしいものだけ。
 *   ・右上の道具立て（16:9／白黒）
 *   ・お知らせ帯（サンプル表示・デモ表示）
 *   ・ボタンの文字が詰まらないための余白
 *   ・黒い画面で文字が読めなくなるのを防ぐ色
 */

/* 全ツールの箱をまとめて指す。ツールを足したらここにも足す。
   .roi は ROI算定の計器盤（保全・生産管理ほか）。中身は assets/css/roi.css */
#mkt, #lead, #cmp, #pcr, #bnt, .roi, #bes, #hrt, #fin, #mr { --biz-ok: 1; }

/* ===========================================================
   画面名の左の「戻る」
   =========================================================== */
.biz-titlewrap{ display:flex; align-items:center; gap:2px; min-width:0; flex:1 1 auto; }
.biz-titlewrap > h4{ margin:0; min-width:0; }
.biz-back{
  border:0; background:none; padding:0; margin:0 0 0 -6px;
  color:var(--vz-body-color); cursor:pointer; line-height:1;
  border-radius:4px; flex:none; width:26px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
}
/* 三角そのものは字の中では小さめに描かれるので、大きめの字にしてある */
.biz-back i{ font-size:34px; line-height:1; display:inline-block; }
.biz-back:hover{ color:var(--vz-primary); background:var(--vz-tertiary-bg); }
.biz-back:focus-visible{ outline:2px solid var(--vz-primary); outline-offset:1px; }

/* ===========================================================
   右上の道具立て
   =========================================================== */
.biz-toolbar{
  display:flex; justify-content:flex-end; align-items:center; gap:8px;
  margin:0 0 10px; flex-wrap:wrap;
}
/* 画面名の行に入れたときは、見出しのすぐ右。パンくずは右端のまま */
.page-title-box .biz-toolbar.in-title{
  justify-content:flex-start; flex:1 1 auto;
  margin:0 16px 0 20px; min-width:0;
}
@media (max-width:575.98px){
  .page-title-box .biz-toolbar.in-title{ margin:8px 0 0; }
}
.biz-tb{
  font: inherit;
  font-size:13px; line-height:1;
  padding:8px 14px;
  border:1px solid var(--vz-border-color);
  border-radius:6px;
  background:var(--vz-secondary-bg);
  color:var(--vz-body-color);
  cursor:pointer;
  white-space:nowrap;
}
.biz-tb:hover{ border-color:var(--vz-gray-500); }
.biz-tb[aria-pressed="true"]{
  background:var(--vz-primary); border-color:var(--vz-primary); color:#fff;
}

/* ===========================================================
   お知らせ帯（サンプル表示・デモ表示）
   どのツールでも同じ見た目にして、右上の ✕ で閉じられるようにする
   =========================================================== */
.biz-note{
  position:relative;
  background:var(--vz-warning-bg-subtle) !important;
  border:1px solid var(--vz-warning-border-subtle, var(--vz-border-color)) !important;
  border-left:3px solid var(--vz-warning) !important;
  border-radius:6px !important;
  padding:11px 86px 11px 14px !important;
  margin:0 0 14px !important;
  font-size:12.5px !important;
  line-height:1.7 !important;
  color:var(--vz-body-color) !important;
}
.biz-note b, .biz-note strong{ color:var(--vz-body-color); }
/* 閉じるボタン。小さな ✕ だけだと見落とされるので、
   枠と「閉じる」の文字を付けて、帯の右に場所を空けて置く。 */
.biz-note-x{
  position:absolute; top:8px; right:10px;
  height:24px; line-height:1; gap:4px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 9px;
  border:1px solid var(--vz-border-color); border-radius:5px;
  background:var(--vz-secondary-bg);
  color:var(--vz-body-color); font-size:11.5px; cursor:pointer; white-space:nowrap;
}
.biz-note-x::after{ content:"閉じる"; }
.biz-note-x:hover{ background:var(--vz-tertiary-bg); border-color:var(--vz-gray-500); }

/* ===========================================================
   ボタンの文字が端で切れないようにする
   ツールによっては左右の余白が無く、1文字目と最後の文字が詰まっていた
   =========================================================== */
#mkt .btn, #lead .btn, #cmp .btn, #pcr .btn, #bnt .btn,
.roi .btn, #bes .btn, #hrt .btn, #fin .btn, #mr .btn,
#mkt button.tab, #lead button.tab,
#bnt .ghost, #pcr .specbtn, #pcr .run{
  padding-left:max(11px, .75em) !important;
  padding-right:max(11px, .75em) !important;
}
/* 文字そのものの前後にも少し余白を置く（＋ と文字がくっつかないように） */
#mkt .btn, #lead .btn, #cmp .btn, #pcr .btn, #bnt .btn,
.roi .btn, #bes .btn, #hrt .btn, #fin .btn, #mr .btn{
  letter-spacing:.01em;
}

/* ===========================================================
   黒い画面での文字色
   もとのツールは「薄いグレーの文字」を前提に作られているものがあり、
   黒い下地だと読めなくなる。黒のときだけ明るいグレーに寄せる。
   =========================================================== */

/* Bootstrap の薄いグレー文字も、黒のときは持ち上げる */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .biz-note-x{ color:#e6eaee !important; border-color:#454d55; background:#2a2d31; }
html[data-theme="dark"] #mkt .mini, html[data-theme="dark"] #lead .mini,
html[data-theme="dark"] #cmp .mini, html[data-theme="dark"] #pcr .mini,
html[data-theme="dark"] #bnt .mini, html[data-theme="dark"] .roi .mini,
html[data-theme="dark"] #bes .mini, html[data-theme="dark"] #hrt .mini,
html[data-theme="dark"] #fin .mini, html[data-theme="dark"] #mr .mini{ color:var(--biz-muted); }

/* 黒のとき、テーブルの見出しや注記が沈みすぎないように */
/* th はツール側で色を決めているものがある（色付き見出しに白文字など）。
   ここでまとめて薄くすると、その白文字まで潰れるので触らない。 */
html[data-theme="dark"] #mkt .note, html[data-theme="dark"] #lead .note,
html[data-theme="dark"] #cmp .note, html[data-theme="dark"] #pcr .note,
html[data-theme="dark"] #bnt .note, html[data-theme="dark"] .roi .note,
html[data-theme="dark"] #bes .note, html[data-theme="dark"] #hrt .note,
html[data-theme="dark"] #mkt .hint, html[data-theme="dark"] #lead .hint,
html[data-theme="dark"] #cmp .hint, html[data-theme="dark"] #pcr .hint,
html[data-theme="dark"] #bnt .hint, html[data-theme="dark"] .roi .hint,
html[data-theme="dark"] #bes .hint, html[data-theme="dark"] #hrt .hint,
html[data-theme="dark"] #mkt .small, html[data-theme="dark"] #cmp .small,
html[data-theme="dark"] #pcr .small, html[data-theme="dark"] #bes .small{ color:var(--biz-muted); }

/* ===========================================================
   黒い画面でのアクセント色（紫・青緑）
   Velzon の --vz-primary は白黒で色が変わらないため、黒い下地に
   そのまま載せると読めない。文字として使っている箇所だけ明るくする。
   （下地にアクセントそのものを敷いている箇所は白文字が乗るので触らない）
   =========================================================== */
html[data-theme="dark"] #mkt .btn[aria-pressed="true"],
html[data-theme="dark"] #mkt .chip.ac,
html[data-theme="dark"] #mkt .pick[data-on="1"],
html[data-theme="dark"] #mkt .tab[aria-selected="true"],
html[data-theme="dark"] #mkt .tile .lab .kpiname:hover,
html[data-theme="dark"] #lead .btn[aria-pressed="true"],
html[data-theme="dark"] #lead .chip.ac,
html[data-theme="dark"] #lead .tab[aria-selected="true"],
html[data-theme="dark"] #cmp .drop.over,
html[data-theme="dark"] #pcr .btbody .ask b,
html[data-theme="dark"] #pcr .btrow.key .btkey b,
html[data-theme="dark"] #pcr .judge .ev b,
html[data-theme="dark"] #pcr .pill.cmms,
html[data-theme="dark"] #pcr .pill.scada,
html[data-theme="dark"] #pcr .row .link b,
html[data-theme="dark"] #pcr .row.key,
html[data-theme="dark"] #pcr .spec b,
html[data-theme="dark"] #pcr .specbtn[aria-pressed="true"],
html[data-theme="dark"] #pcr .tabs button[aria-selected="true"],
html[data-theme="dark"] #pcr .tag.p2,
html[data-theme="dark"] #bnt .brandmark,
html[data-theme="dark"] #bnt .chip[aria-pressed="true"],
html[data-theme="dark"] #bnt .delta .k,
html[data-theme="dark"] #bnt .gcode,
html[data-theme="dark"] #bnt .ghost:hover,
html[data-theme="dark"] #bnt .pill.core,
html[data-theme="dark"] #bnt .quote .qm,
html[data-theme="dark"] #bnt .tab[aria-selected="true"],
html[data-theme="dark"] #bnt .vis .no,
html[data-theme="dark"] #bnt details.ask>summary,
html[data-theme="dark"] .roi #btip b,
html[data-theme="dark"] .roi #dbState.db-ok,
html[data-theme="dark"] .roi #tip dt,
html[data-theme="dark"] .roi .bnq b,
html[data-theme="dark"] .roi .btn-p:hover,
html[data-theme="dark"] .roi .btn:hover,
html[data-theme="dark"] .roi .chip:hover,
html[data-theme="dark"] .roi .chk .okmark,
html[data-theme="dark"] .roi .ck input,
html[data-theme="dark"] .roi .dark .k,
html[data-theme="dark"] .roi .howto summary,
html[data-theme="dark"] .roi .kpi .v2,
html[data-theme="dark"] .roi .ok,
html[data-theme="dark"] .roi .pill,
html[data-theme="dark"] .roi .ratebar b,
html[data-theme="dark"] .roi .row.key .no,
html[data-theme="dark"] .roi .sc .v,
html[data-theme="dark"] .roi .sc.on,
html[data-theme="dark"] .roi .subtot b,
html[data-theme="dark"] .roi .verdict.yes,
html[data-theme="dark"] .roi .vok,
html[data-theme="dark"] #bes .act-item .n,
html[data-theme="dark"] #bes .btn:hover:not(:disabled),
html[data-theme="dark"] #bes .cellin:focus, html[data-theme="dark"]  #bes .cellsel:focus,
html[data-theme="dark"] #bes .chip.acc,
html[data-theme="dark"] #bes .eyebrow,
html[data-theme="dark"] #bes .li .lt,
html[data-theme="dark"] #bes .o-auto,
html[data-theme="dark"] #bes .pick button:hover,
html[data-theme="dark"] #bes .spin:focus-within,
html[data-theme="dark"] #bes .step[data-st="now"],
html[data-theme="dark"] #hrt .hypo .tag,
html[data-theme="dark"] #hrt .mini:hover,
html[data-theme="dark"] #hrt .step-no,
html[data-theme="dark"] #hrt .todo input{ color:#a78bfa !important; }

/* ===========================================================
   線と面の色。Velzon の --vz-gray-* は白黒で変わらないので、
   黒のときだけ暗い側へ置き換える。
   =========================================================== */

/* 反転パネル（濃い下地に白文字）は、黒のときも濃いままにする。
   --ink は黒だと明るい色になるため、そのままだと白文字が読めなくなる。 */
html[data-theme="dark"] .roi .dark,
html[data-theme="dark"] .roi .scopebar{ background:#0f1215; }

/* ===========================================================
   黄・緑・灰の札に白文字が乗っていて読めない箇所。
   白い画面でも読みにくかったので、両方の明るさで濃い文字にする。
   =========================================================== */
/* 黒いときの下地は鮮やかな黄・緑・灰なので、濃い文字を乗せる */
html[data-theme="dark"] #bnt .cell.c0, html[data-theme="dark"] #bnt .cell.c1,
html[data-theme="dark"] #bnt .cell.c2,
html[data-theme="dark"] #bnt .conf button.c0[aria-pressed="true"],
html[data-theme="dark"] #bnt .conf button.c1[aria-pressed="true"],
html[data-theme="dark"] #bnt .conf button.c2[aria-pressed="true"]{ color:#1a1d21 !important; }
/* 白いときの下地は濃い色に振ってあるので、白い文字でよい */
html[data-theme="light"] #bnt .cell.c0, html[data-theme="light"] #bnt .cell.c1,
html[data-theme="light"] #bnt .cell.c2,
html[data-theme="light"] #bnt .conf button.c0[aria-pressed="true"],
html[data-theme="light"] #bnt .conf button.c1[aria-pressed="true"],
html[data-theme="light"] #bnt .conf button.c2[aria-pressed="true"]{ color:#fff !important; }

/* 製品A・B・Cの色分け。Aに使っている紫は黒い下地だと沈むので明るくする */

/* 保全コスト試算：数値セルと見出しの文字がアクセント色。黒では明るくする */
html[data-theme="dark"] .roi td.r,
html[data-theme="dark"] .roi .B{ color:#a78bfa; }

/* 保全コスト試算は、表の中の数値や強調をJS側が --teal-d で直に塗る。
   この色は白黒で変わらないため、黒のときだけ明るい側に差し替える。
   （下地に使っている箇所は別途、白文字が読めるよう濃いままにする） */

/* 黒地で、濃い紫のボタンにカーソルを乗せると文字まで紫になって消えていた。
   塗りつぶしのボタンだけは白のまま。 */
html[data-theme="dark"] #bes  .btn-primary:hover:not(:disabled),
html[data-theme="dark"] .roi  .btn-p:hover:not(:disabled),
html[data-theme="dark"] #hrt  .btn-primary:hover:not(:disabled){ color:#fff !important; }
html[data-theme="dark"] .roi .btn-p:hover{ background:#4b38b3; border-color:#4b38b3; }

/* 棒グラフの上に乗る白い数値は、色の違う棒を渡り歩くので
   下地の色を選べない。細い影を敷いてどの色の上でも読めるようにする。 */
/* 帯の上に乗る％の文字。帯の色は状態で変わるので、
   どの色の上でも読めるように、文字の後ろに薄い黒を敷く（影だけでは足りない） */
#mkt .blab, #lead .blab{
  text-shadow:0 1px 1px rgba(0,0,0,.5);
  background:rgba(0,0,0,.55); border-radius:3px; padding:0 4px;
}

/* ===========================================================
   白い画面の補助文字
   Velzon の既定（#878a99）は白地に対して薄く、本文の横に並ぶと読みづらい。
   少しだけ濃くする。黒い画面のときは上の指定が優先される。
   =========================================================== */

/* 保存の状態表示。緑は白地だと薄すぎるので、明るさごとに替える */
#mkt #dbState.db-ok, #lead #dbState.db-ok, #cmp #dbState.db-ok, #pcr #dbState.db-ok,
#bnt #dbState.db-ok, .roi #dbState.db-ok, #bes #dbState.db-ok, #hrt #dbState.db-ok, #fin #dbState.db-ok,
#mr #dbState.db-ok{ color:#0b7a43; }
html[data-theme="dark"] #mkt #dbState.db-ok, html[data-theme="dark"] #lead #dbState.db-ok,
html[data-theme="dark"] #cmp #dbState.db-ok, html[data-theme="dark"] #pcr #dbState.db-ok,
html[data-theme="dark"] #bnt #dbState.db-ok, html[data-theme="dark"] .roi #dbState.db-ok,
html[data-theme="dark"] #bes #dbState.db-ok, html[data-theme="dark"] #hrt #dbState.db-ok,
html[data-theme="dark"] #fin #dbState.db-ok, html[data-theme="dark"] #mr #dbState.db-ok{ color:#45CB85; }

/* ===========================================================
   白い画面での「状態の色」
   Velzon の黄・緑・赤は鮮やかで、塗りや印には向くが、
   白地の小さな文字にすると読めない。白のときだけ濃い側に振る。
   （黒い画面では鮮やかなままのほうが読めるので触らない）
   =========================================================== */

/* 保全コスト試算だけの追い直し。
   合計行（.tot）の背景がグレーなので、そこに乗る琥珀色が薄く見える。
   それと、入力チェックの黄色い見出しは濃い茶文字だと読めないので白にする。 */

html[data-theme="light"] .roi .vbox.w .vhd > *{ color:#fff !important; }
/* 黒地では赤がそのままだと沈む。少し明るい朱色にする */

/* ===========================================================
   横幅
   単体ページ前提で作られたツールは、中身の箱に固定幅が入っている。
   基盤の上では画面幅いっぱいに広がってほしいので解除する。
   （読みやすさのための文章幅 .lede / .note はそのまま残す）
   =========================================================== */
.roi .hwrap, .roi .shell, .roi .tabs, .roi footer,
#bes .canvas, #bes .hdr-in, #bes .steps-in{ max-width:none !important; }

/* ===========================================================
   保存の状態（「保存済 1:33」など）
   画面の中ほどに出ていると本文と紛れるので、
   右上の利用者名の左に、どのツールでも同じ場所で出す。
   =========================================================== */
.biz-save{
  font-size:11.5px; line-height:1.4; white-space:nowrap;
  color:var(--vz-gray-600); margin-right:16px;
  font-variant-numeric:tabular-nums;
}
.biz-save:empty{ display:none; }
.biz-save.db-busy{ color:var(--vz-gray-600); }
.biz-save.db-ok{ color:#0b7a43; }
html[data-theme="dark"] .biz-save{ color:#aab4bd; }
html[data-theme="dark"] .biz-save.db-ok{ color:#45CB85; }
.biz-save.db-ng{ color:var(--vz-danger); font-weight:600; }

/* 画面の中にあった保存表示は、もう出さない */
#dbState{ display:none !important; }
#bes .saveflag{ display:none !important; }

/* 黒いときの btn-light は、Velzon の既定だと文字が沈んで読めない */
html[data-theme="dark"] .btn-light{ color:#e6eaee; }
html[data-theme="dark"] .btn-light:hover{ color:#fff; }

/* 訪問前リサーチ：黒のときの「要確認」と、押された絞り込みボタン */

html[data-theme="dark"] #pcr .filters button[aria-pressed="true"]{ color:#0f1215; }

/* ===========================================================
   Velzon が元から持っている薄いグレー文字
   パンくずの現在地・フッタ・説明文が、白でも黒でも基準を下回る。
   どのページにも出るところなので、ここでまとめて直す。
   =========================================================== */
.breadcrumb-item.active,
.footer .col-sm-6,
.text-muted{ color:var(--biz-sub) !important; }
html[data-theme="dark"] .breadcrumb-item.active,
html[data-theme="dark"] .footer .col-sm-6,
html[data-theme="dark"] .text-muted{ color:#aab4bd !important; }

/* ラベル管理：黒のとき、選んでいるタブの紫と、画面名のグレーが沈む */
html[data-theme="dark"] .nav-link.active{ color:#a78bfa !important; }
html[data-theme="dark"] #lbl .who,
html[data-theme="dark"] .who{ color:#aab4bd !important; }
html[data-theme="dark"] .hint,
html[data-theme="dark"] .toolhead,
html[data-theme="dark"] .def{ color:#aab4bd !important; }

/* 白い画面に残っていた薄い文字（システム設定の注記と、BANTCHの小さな印） */
html[data-theme="light"] .def,
html[data-theme="light"] .hint,
html[data-theme="light"] .toolhead{ color:var(--biz-sub) !important; }
html[data-theme="light"] #bnt .k,
html[data-theme="light"] #bnt .num{ color:#077a6a !important; }  /* 中の style="color:var(--accent-text)" を上書きする */

/* まだ作っていないメニュー項目 */
.navbar-nav .biz-soon{ opacity:.55; cursor:default; }
.navbar-nav .biz-soon:hover{ background:transparent; }

/* ===========================================================
   Velzon の淡いバッジ（bg-◯-subtle ＋ text-◯）
   下地も文字も淡く、どちらの明るさでも基準を下回る。
   白のときは文字を濃く、黒のときは明るくする。
   =========================================================== */
html[data-theme="light"] .badge.bg-success-subtle.text-success     { color:#0b6b3c !important; }
html[data-theme="light"] .badge.bg-info-subtle.text-info           { color:#11607f !important; }
html[data-theme="light"] .badge.bg-danger-subtle.text-danger       { color:#b3301d !important; }
html[data-theme="light"] .badge.bg-warning-subtle.text-warning     { color:#8a5e00 !important; }
html[data-theme="light"] .badge.bg-secondary-subtle.text-secondary { color:#1b56c4 !important; }
html[data-theme="light"] .badge.bg-primary-subtle.text-primary     { color:#3d2d91 !important; }
html[data-theme="light"] .btn-outline-danger                       { color:#b3301d; }

/* 黒のときは bg-◯-subtle がほぼ透明になるので、下地も少し付ける */
html[data-theme="dark"] .badge[class*="-subtle"]{ background-color:rgba(255,255,255,.08) !important; }
html[data-theme="dark"] .badge.bg-success-subtle.text-success     { color:#4ddc95 !important; }
html[data-theme="dark"] .badge.bg-info-subtle.text-info           { color:#58c7f3 !important; }
html[data-theme="dark"] .badge.bg-danger-subtle.text-danger       { color:#ff8f78 !important; }
html[data-theme="dark"] .badge.bg-warning-subtle.text-warning     { color:#ffc954 !important; }
html[data-theme="dark"] .badge.bg-secondary-subtle.text-secondary { color:#8fb4ff !important; }
html[data-theme="dark"] .badge.bg-primary-subtle.text-primary     { color:#a78bfa !important; }

/* 訪問前サーチ：黒のときの「最優先」とコピーボタン */
/* 中に style="color:var(--accent-text)" が直書きされている小さな印 */
html[data-theme="dark"] #pcr [style*="--accent"]{ color:#a78bfa !important; }
html[data-theme="dark"] #pcr .copy{ background:#1f72a8; border-color:#1f72a8; }

/* ===== 月次の獲得推移 =====
   グラフは左、凡例は右に縦並び。画面が狭いときだけ、凡例を下に回す。 */
#mkt .mchart{ display:flex; gap:20px; align-items:flex-start; }
#mkt .mchart .mwrap{ flex:1 1 auto; min-width:0; overflow-x:auto; }
#mkt .mchart .mwrap svg{ width:100%; min-width:620px; height:auto; display:block; }
#mkt .legend.vert{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start;
  gap:2px; margin-top:14px; max-width:200px;
}
#mkt .legend.vert .lgb{ padding:4px 8px; text-align:left; white-space:nowrap;
  max-width:200px; overflow:hidden; text-overflow:ellipsis; }
#mkt .legend.vert .lgb i{ width:12px; height:12px; border-radius:3px; margin-right:7px; }
#mkt .legend.vert .lgb.all{ border-color:var(--line-strong); margin-top:6px; }
#mkt .legend.vert .ln{ color:var(--muted); font-size:10.5px; line-height:1.6;
  margin-top:8px; white-space:normal; }
@media (max-width:900px){
  #mkt .mchart{ flex-direction:column; }
  #mkt .legend.vert{ flex-direction:row; flex-wrap:wrap; max-width:none; margin-top:4px; }
  #mkt .legend.vert .ln{ flex:0 0 100%; margin-top:2px; }
}

/* 一覧の行削除。詳細を開かずに消せるように、どの一覧にも出る。
   目立たせると誤爆するので、ふだんは薄い字。マウスを乗せたときだけ赤。 */
.biz-delh{ width:44px; }
/* 削除ボタン。押すと戻せない操作なので、ひと目で分かる赤にする。
   ただし一覧に何十行も並ぶので、普段は「赤枠＋赤文字」にとどめ、
   マウスを乗せたときだけ赤で塗りつぶす。全面を赤で塗ると、
   表のほかの文字が読みにくくなるため。
   色は tokens.css の --bad（白地 5.4:1／黒地 6.7:1）。 */
.biz-del{
  border:1px solid var(--bad); background:transparent; color:var(--bad);
  font-size:11.5px; line-height:1.6; padding:2px 9px; border-radius:var(--r-sm);
  cursor:pointer; white-space:nowrap;
}
.biz-del:hover{ background:var(--bad); color:#fff; border-color:var(--bad); }
.biz-del:focus-visible{ outline:2px solid var(--vz-primary); outline-offset:1px; }
.biz-del:disabled{ opacity:.4; cursor:default; }
.biz-del:disabled:hover{ background:transparent; color:var(--bad); }
/* 黒地では --bad が明るい側（#ff8a73）になるので、塗りつぶしの文字は黒にする */
html[data-theme="dark"] .biz-del:hover{ color:#1a1d20; }

/* 削除など、押すと戻せない操作のボタン。
   btn-soft-danger は白地で 2.7:1 しかなく読めないので、
   どの画面でもこの書き方にそろえる（地は btn-light のまま、文字だけ赤）。 */
.btn.biz-danger{ color:var(--bad); }
.btn.biz-danger:hover{ color:#fff; background:var(--bad); border-color:var(--bad); }

/* ページ見出し。
   Velzon は .page-title-box h4 に text-transform:uppercase を当てている。
   英語のダッシュボード名なら締まるが、ここでは製品名がそのまま見出しになる。
   Teamcenter が TEAMCENTER になってしまうので、正式表記のまま出す。 */
.page-title-box h4{ text-transform:none; }

/* ===========================================================
   KPIタイル。数字を4枚並べる定番の形。
   もとはコスト試算だけのものだったが、ダッシュボードでも使うので
   ここ1箇所に置いた。色は tokens.css の変数しか使わない
   （黒いときの読みやすさを1箇所で面倒みるため）
   =========================================================== */
.biz-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
@media (max-width:991.98px){ .biz-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:575.98px){ .biz-kpis{ grid-template-columns:1fr; } }
.biz-kpi{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--panel-r); padding:13px 15px 14px;
}
.biz-kpi .k{ display:block; font-size:11.5px; color:var(--muted); }
.biz-kpi .v{
  display:block; font-size:21px; font-weight:600; line-height:1.3; margin:3px 0 2px;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.biz-kpi .v.bad{ color:var(--bad); }
.biz-kpi .v.good{ color:var(--ok); }
.biz-kpi .v.warn{ color:var(--warn); }
.biz-kpi .v.cool{ color:var(--cool); }
.biz-kpi .s{ display:block; font-size:11px; color:var(--muted); line-height:1.55; }

/* ===========================================================
   詳細画面・設定画面の共通部品
   （もとは list-page.css にあった。一覧専用ではないので移した）
     .biz-head  題名の行
     .biz-tabs  タブ。button[aria-selected="true"] が選択中。
                これがこのシステム唯一のタブの見た目
     .biz-revs  履歴の抽斗
     .biz-pick  会社を選ぶ小窓
   =========================================================== */
/* ---------- 詳細画面 ---------- */
.biz-head{
  background:var(--vz-secondary-bg);
  border:1px solid var(--vz-border-color);
  border-radius:var(--panel-r);
  padding:13px 16px; margin-bottom:12px;
}
.biz-head .t{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.biz-head h2{ font-size:16px; font-weight:600; margin:0; }
.biz-head .meta{ font-size:11.5px; color:var(--biz-sub); margin-top:3px; }
.biz-head .sp{ flex:1; }

.biz-tabs{
  display:flex; gap:2px; flex-wrap:wrap;
  border-bottom:1px solid var(--vz-border-color); margin-bottom:14px;
}
.biz-tabs button{
  position:relative; font:inherit; font-size:12.5px; line-height:1.4;
  border:0; background:transparent; color:var(--biz-sub);
  padding:9px 14px; cursor:pointer; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.biz-tabs button:hover{ color:var(--vz-body-color); }
.biz-tabs button[aria-selected="true"]{
  color:var(--vz-primary); border-bottom-color:var(--vz-primary); font-weight:600;
}
/* まだ埋まっていないタブの印 */
.biz-tabs button .dot{
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--vz-warning); margin-left:5px; vertical-align:middle;
}

/* 履歴の抽斗 */
.biz-revs{ font-size:12.5px; }
.biz-revs .r{
  display:flex; gap:10px; align-items:baseline;
  padding:8px 2px; border-bottom:1px solid var(--vz-border-color);
}
.biz-revs .r .when{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.biz-revs .r .who{ color:var(--biz-sub); white-space:nowrap; }
.biz-revs .r .note{ flex:1; min-width:0; }

/* 会社を選ぶ小窓 */
.biz-pick .hit{
  display:flex; gap:10px; align-items:center;
  padding:9px 10px; border-bottom:1px solid var(--vz-border-color);
}
.biz-pick .hit:hover{ background:var(--vz-tertiary-bg); }
.biz-pick .hit .nm{ flex:1; min-width:0; }
.biz-pick .hit .nm small{ display:block; color:var(--biz-sub); font-size:11px; }
.biz-pick .newline{ padding:11px 10px; }

/* Velzon の --vz-primary は白黒で値が変わらない（#4b38b3）。
   黒い下地では沈むので、文字に使っている箇所だけ明るい紫に替える。 */
html[data-theme="dark"] .biz-tabs button[aria-selected="true"]{
  color:#a78bfa; border-bottom-color:#a78bfa;
}
html[data-theme="dark"] .tabulator a.subj:hover{ color:#a78bfa; }

/* ===========================================================
   小さな一覧（.biz-slist）と印（.biz-chip）
   ダッシュボードだけでなく設定画面でも使うので、
   どの画面からも読める tool-common.css に置く
   =========================================================== */
/* 小さな一覧（止まっているもの、直近の動きなど） */
.biz-slist{ width:100%; font-size:12.5px; border-collapse:collapse; }
.biz-slist th{
  text-align:left; font-size:11px; font-weight:600; color:var(--muted);
  border-bottom:1px solid var(--line); padding:0 8px 6px 0; white-space:nowrap;
}
.biz-slist td{ padding:7px 8px 7px 0; border-bottom:1px solid var(--line); color:var(--ink); vertical-align:top; }
.biz-slist tr:last-child td{ border-bottom:0; }
.biz-slist a{ color:var(--accent-text); }
.biz-slist .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.biz-slist .sub{ display:block; font-size:11px; color:var(--muted); }
.biz-slist .late{ color:var(--bad); font-weight:600; }

/* グループの印（N/T/H/A/B/C や ステージ） */
.biz-chip{
  display:inline-block; font-size:10.5px; line-height:1.6; padding:0 7px;
  border-radius:999px; border:1px solid var(--line-strong); color:var(--ink-2);
  background:var(--surface-2); margin:0 4px 4px 0; white-space:nowrap;
}
.biz-chip.bad{ border-color:var(--bad); color:var(--bad); background:transparent; }
.biz-chip.ok{ border-color:var(--ok); color:var(--ok); background:transparent; }

/* ===== 一覧の列まわり（assets/js/grid.js）===== */
.gr-wrap{ position:relative; display:inline-block; }
.gr-btn{
  font-size:12px; padding:4px 11px; border-radius:var(--r-sm);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2); cursor:pointer;
}
.gr-btn:hover{ background:var(--surface-2); }
.gr-menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:220px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r);
  box-shadow:0 6px 20px rgba(0,0,0,.14); padding:10px 12px 12px;
}
.gr-menu h4{ font-size:11px; font-weight:600; color:var(--muted); margin:0 0 8px; }
.gr-menu label{
  display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2);
  padding:4px 0; cursor:pointer;
}
.gr-menu label.fix{ color:var(--ink-faint); cursor:default; }
.gr-menu label span{ flex:1; }
.gr-menu label small{ font-size:10.5px; color:var(--ink-faint); }
.gr-menu .ac{ display:flex; gap:8px; margin-top:9px; border-top:1px solid var(--line); padding-top:9px; }
.gr-menu .ac button{
  font-size:11.5px; padding:3px 9px; border-radius:var(--r-sm);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2); cursor:pointer;
}
.gr-menu .ac button:hover{ background:var(--surface-2); }

/* 列の境目をつかむ所。見出しの右端に重ねる */
.gr-rz{
  position:absolute; top:0; right:-3px; width:7px; height:100%;
  cursor:col-resize; user-select:none;
}
.gr-rz:hover::after, body.gr-dragging .gr-rz::after{
  content:''; position:absolute; top:4px; bottom:4px; left:3px; width:2px;
  background:var(--accent); border-radius:1px;
}
body.gr-dragging{ cursor:col-resize; user-select:none; }

/* ===========================================================
   左メニューの字の太さ・色をそろえる

   Velzon は「いまいる場所（.active）」と「開いている（aria-expanded=true）」の
   両方で字を白くする。そのため、一度開いて閉じた大項目が白いまま残り、
   同じ階層なのに白とグレーが混ざって見えていた。

   ここでは白い字を「いまいる場所」の印だけに使い、
   開いているかどうかは矢印の向きだけで示す。
   =========================================================== */
#navbar-nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]:not(.active),
#navbar-nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]:not(.active):after{
  color: var(--vz-vertical-menu-item-color);
}

/* ===== いくつでも選べる絞り込み（assets/js/list-page.js の picks multi）===== */
.mp{ position:relative; }
.mp-btn{
  text-align:left; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mp-btn.on{ border-color:var(--vz-primary); color:var(--vz-primary); font-weight:500; }
.mp-menu{
  position:absolute; left:0; top:calc(100% + 4px); z-index:40; min-width:100%;
  max-height:min(60vh,340px); overflow:auto; white-space:nowrap;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-sm);
  box-shadow:0 6px 20px rgba(0,0,0,.14); padding:8px 10px 10px;
}
.mp-menu label{
  display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2);
  padding:4px 2px; cursor:pointer; margin:0;
}
.mp-menu label span{ flex:1; }
.mp-menu .mp-ac{ display:flex; gap:8px; margin-top:8px; border-top:1px solid var(--line); padding-top:8px; }
.mp-menu .mp-ac button{
  font-size:11.5px; padding:3px 9px; border-radius:var(--r-sm);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2); cursor:pointer;
}
.mp-menu .mp-ac button:hover{ background:var(--surface-2); }

/* 一覧全体にかかる一言（いつ時点の情報か、など） */
.biz-listnote:empty{ display:none; }
.biz-listnote{
  font-size:12px; color:var(--muted); margin:0 0 10px;
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
}
.biz-listnote b{ color:var(--ink-2); font-weight:600; }
.biz-listnote .warn{ color:var(--warn); }
.biz-listnote .bad{ color:var(--bad); }

/* ===== うまく開けなかったときの知らせ（assets/js/tool-db.js の fatal）=====
   以前は background:#fff を直書きしていたので、黒テーマでは
   白地に白文字（1.49:1）になって何も読めなかった。色はテーマに任せる。 */
.biz-fatal{
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:22px 24px; line-height:1.9; font-size:14px;
}
.biz-fatal h2{ margin:0 0 12px; font-size:17px; color:var(--ink); }
.biz-fatal p{ margin:0 0 8px; color:var(--ink-2); }
.biz-fatal code{ color:var(--ink); background:var(--surface-2);
  padding:1px 5px; border-radius:3px; font-size:12.5px; }

/* ===== 失敗の知らせ（右下に少しのあいだ出る）===== */
.biz-toast{
  position:fixed; right:18px; bottom:18px; z-index:2000; max-width:min(420px, calc(100vw - 36px));
  background:var(--bad); color:#fff; font-size:13px; line-height:1.7;
  padding:10px 14px; border-radius:var(--r-sm); box-shadow:0 6px 20px rgba(0,0,0,.2);
  opacity:1; transition:opacity .4s;
}
.biz-toast.out{ opacity:0; }

/* ===== 下の余白をそろえる（担当B B-04）=====
   Bootstrap の .card だけが margin-bottom:1.5rem を持っていて、
   自作のパネルは1つも持っていなかった。そのため画面によって
   本文の最後とフッターの間が 0px だったり 24px だったりした。
   .card に合わせて 24px に寄せる。
   親が flex/grid のものは gap と二重になるので、そちらで打ち消す。 */
.dash-card, .roi, .iv-body, .iv-col, .wk-card, .biz-card,
.in-box, .biz-head, .biz-search, .lg-card, .roi-meta, .kb-card, .iv-qbig{
  margin-bottom:1.5rem;
}
.d-flex > .dash-card, .d-flex > .biz-card, .d-flex > .in-box,
[class*="row"] > [class*="col"] > :last-child.dash-card,
.kb-col .kb-card{ margin-bottom:0; }
.kb-col .kb-card + .kb-card{ margin-top:10px; }

/* ===== キーボードで動かしたときの居場所（担当B B-08）=====
   Velzon の app.min.css がサイドバーのリンクのフォーカス枠を消していて、
   Tab だけで操作するといま どこにいるのか画面から分からなかった。
   .biz-back:focus-visible と同じ書き方に寄せる。 */
#navbar-nav .nav-link:focus-visible,
.navbar-brand-box a:focus-visible,
#page-topbar a:focus-visible,
#page-topbar button:focus-visible{
  outline:2px solid var(--vz-primary); outline-offset:1px; border-radius:4px;
}

/* ===== 画面の上に置く絞り込みの列 ===== */
.biz-pickbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:12px 0 0; padding:10px 12px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
}

/* ヒアリングの数値欄（BANTCH の nums）。
   この欄に入れた値が、そのまま ROI算定の入力になる。 */
.nums{ display:flex; flex-wrap:wrap; gap:10px 16px; margin:8px 0 2px; }
.nums .num{ display:flex; align-items:center; gap:6px; font-size:12.5px; }
.nums .num .nl{ color:var(--muted); white-space:nowrap; }
.nums .num .nu{ color:var(--muted); font-size:11.5px; white-space:nowrap; }
.nums .num input{
  width:110px; font:inherit; font-size:13px; text-align:right;
  padding:5px 8px; border:1px solid var(--line); border-radius:6px;
  background:var(--surface); color:var(--ink);
}
.nums .num input:focus-visible{ outline:2px solid var(--vz-primary); outline-offset:1px; }

/* ヒアリング画面の「この試算に足りないもの」 */
ul.needs{ margin:8px 0 0; padding-left:18px; font-size:12.5px; line-height:1.9; color:var(--ink-2); }
ul.needs b{ font-family:var(--vz-font-monospace, monospace); color:var(--ink); font-size:12px; }

/* 見本データの印。一覧で本物と見分けがつかなかったため（試算40件のうち23件が見本）。
   状態の語彙はツールごとに違うので status は使わず、tags に「見本」を入れた行に出す。 */
.biz-sample{ display:inline-block; margin-left:6px; padding:1px 6px;
  font-size:10px; line-height:1.6; border-radius:99px; white-space:nowrap;
  color:var(--muted); background:var(--surface-2); border:1px solid var(--line); }

/* ===== ツール一覧：仕事の流れで並べる =====
   以前は12枚の同じ大きさのカードが並ぶだけで、どれをどの段で使うのか分からなかった。
   左から右へ マーケ → インサイド → プリセールス → 商談 → 導入後。
   新しい人に渡すとき、画面の並びがそのまま仕事の順番の説明になる。 */
.tool-flow{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.tool-base{ margin-top:14px; }
/* --vz-card-bg はこの基盤に無い。var(--x, #fff) は静かに #fff へ落ちるので、
   暗い配色でもここだけ白く残っていた。紙の色は --panel で持っている。 */
.tf-s{ background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:10px; min-width:0; }
.tool-base .tf-b{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.tf-h{ display:flex; align-items:baseline; gap:7px; font-size:12.5px; font-weight:700;
  margin:0 0 8px; color:var(--vz-primary,#4b38b3); }
.tf-h em{ font-style:normal; font-weight:400; font-size:10.5px;
  color:var(--vz-secondary-color,#878a99); margin-left:auto; }
.tf-h2{ color:var(--vz-secondary-color,#878a99); padding-left:2px; }
.tf-n{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px;
  border-radius:50%; background:var(--vz-primary,#4b38b3); color:#fff;
  font-size:10px; font-weight:700; }
/* 札。1枚の高さをそろえると、段ごとの本数の違いがそのまま見える */
.tf-i{ display:flex; gap:8px; align-items:flex-start; text-decoration:none; color:inherit;
  padding:8px 9px; margin-bottom:5px; border-radius:6px;
  background:var(--vz-light,#f3f6f9); border:1px solid transparent; transition:border-color .12s; }
.tool-base .tf-i{ margin-bottom:0; background:var(--panel);
  border-color:var(--line); }
.tf-i:last-child{ margin-bottom:0; }
.tf-i:hover{ border-color:var(--vz-primary,#4b38b3); }
.tf-i > i{ font-size:15px; line-height:1.4; color:var(--vz-primary,#4b38b3); flex:none; }
.tf-i span{ min-width:0; }
.tf-i b{ display:block; font-size:12px; font-weight:600; line-height:1.45; }
.tf-i em{ display:block; font-style:normal; font-size:10.5px; line-height:1.5;
  color:var(--vz-secondary-color,#878a99); }
@media (max-width:1200px){
  .tool-flow{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:820px){
  .tool-flow{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tool-base .tf-b{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .tool-flow{ grid-template-columns:1fr; }
}

/* ===========================================================
   ダッシュボードの操作の帯（.biz-dashbar）と 表示期間の選び手（.biz-span）

   5つのダッシュボードで期間指定の置き場所がばらばらだったので、
   「見出しのすぐ下、1行だけの帯。その右端が表示期間」に揃えた。
   左側にはその画面の絞り込み（商材・担当・月など）や説明を置く。

   もとは mini-chart.css にあったが、インサイドのダッシュボードは
   mini-chart.css を読み込んでいない。全画面が読む tool-common.css へ移した。
   =========================================================== */
.biz-dashbar{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.biz-dashbar .sp{ flex:1 1 auto; }           /* ここで右端へ押し出す */
/* 帯の中に入れた選び手は、自分の下余白を持たない（帯が持つ） */
.biz-dashbar .biz-span{ margin-bottom:0; }

.biz-span{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.biz-span .lb{ font-size:12px; color:var(--muted); }
.biz-span .seg{ display:inline-flex; border:1px solid var(--line-strong); border-radius:5px;
  overflow:hidden; }
.biz-span .seg button{ background:var(--surface); border:0; border-right:1px solid var(--line);
  padding:5px 12px; cursor:pointer; font-size:12px; color:var(--ink); }
.biz-span .seg button:last-child{ border-right:0; }
.biz-span .seg button:hover{ background:var(--surface-2); }
.biz-span .seg button[aria-pressed="true"]{ background:var(--accent); color:#fff; font-weight:700; }
.biz-span .rg{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.biz-span .cust{ display:inline-flex; align-items:center; gap:6px; }
.biz-span .cust input{ width:auto; }
.biz-span .cust .tl{ color:var(--muted); font-size:12px; }


/* ===========================================================
   サイドバーを畳んだとき、ロゴが画面から消えないようにする
   -----------------------------------------------------------
   Velzon は、サイドバーを畳む（data-sidebar-size="sm"）と
   横長ロゴ（.logo-lg）を隠し、70px幅にアイコンだけを残す。
   上の帯にある .navbar-brand-box.horizontal-logo は、
   横並びレイアウトのときしか出ない作りなので、
   縦レイアウトで畳むとロゴがどこにも無くなる。
   畳んでいるあいだは、上の帯に出す。
   =========================================================== */
html[data-layout="vertical"][data-sidebar-size="sm"] .navbar-brand-box.horizontal-logo{
  /* サイドバー用の濃い地色が付いたままだと、明るい帯の中に黒い箱が浮く */
  display:flex; align-items:center;
  background:transparent; box-shadow:none; border:0;
  width:auto; padding:0 14px 0 4px;
}
html[data-layout="vertical"][data-sidebar-size="sm"] .navbar-brand-box.horizontal-logo .logo-sm{
  display:none;
}
html[data-layout="vertical"][data-sidebar-size="sm"] .navbar-brand-box.horizontal-logo .logo-lg{
  display:inline-block;
}
/* 上の帯は明るいので、暗いほうのロゴを出す（サイドバーの中は逆） */
html[data-layout="vertical"][data-sidebar-size="sm"][data-topbar="light"]
  .navbar-brand-box.horizontal-logo .logo-light{ display:none; }
html[data-layout="vertical"][data-sidebar-size="sm"][data-topbar="light"]
  .navbar-brand-box.horizontal-logo .logo-dark{ display:inline-block; }
html[data-bs-theme="dark"][data-layout="vertical"][data-sidebar-size="sm"]
  .navbar-brand-box.horizontal-logo .logo-dark{ display:none; }
html[data-bs-theme="dark"][data-layout="vertical"][data-sidebar-size="sm"]
  .navbar-brand-box.horizontal-logo .logo-light{ display:inline-block; }