/* ===========================================================
   B type ― 色と字の組みの補正
   -----------------------------------------------------------
   別PJ（保全作業一覧）のCSSから、トークンと字の組みだけを移したもの。
   向こうの .grid / .ctxbar / .stchip などの部品CSSは、
   こちらのマークアップには当たらないので持ってきていない。

   効き方
     html[data-ui="b"] のときだけ効く。切り替えは theme.js（BIZ_THEME.setUi）。
     この基盤の tokens.css は --vz-* から派生する二階建てなので、
     ここで --vz-* を差し替えると、こちらのトークンも全部追従する。

   読み込む順
     app.min.css → tokens.css → …（各ツールのCSS）→ このファイル
     いちばん後ろに置くこと。

   A との違いは「好み」ではなく「読みやすさ」。
   Velzon の二次色 #878a99 は白地で薄すぎて、注記・単位・説明文が読めない。
   そこを締めるのが主眼。
   =========================================================== */

/* この画面が B に対応しているか、JS から見るための印 */
:root{ --biz-ui-b:1; }

/* ---------- 白 B ---------- */
html[data-ui="b"]{
  /* 文字 ― ここが本題。Velzon の既定は白地で薄すぎる */
  --vz-body-color:#1b202a;
  --vz-heading-color:#232a37;
  --vz-secondary-color:#545b6e;
  --vz-tertiary-color:#626a7d;
  --vz-light-text-emphasis:#3b4252;
  --vz-border-color:#dfe3e8;
  /* サイドバーの文字色はここでは効かない。サイドバー側に
     data-sidebar="dark" の scope があって、そちらが勝つ。
     （--vz-vertical-menu-* をここに書いても、白Bでも黒Bでも値が変わらないのを実測ずみ） */
  --vz-input-placeholder-color:#8a93a6;
  --vz-link-color:#1c7fb8;
  /* Velzon の primary は青紫（#405189）で、薄地もその色味。
     B のリンク色は青寄りなので、札の中で文字と地の色味が食い違う。
     薄地のほうを青に寄せて合わせる。 */
  --vz-primary-bg-subtle:#e3eef5;
  --vz-dropdown-link-color:#1f242e;
  --vz-body-font-size:0.9rem;

  /* 和文の字送りを詰める。同じ文字数でも1〜2行減って読みやすくなる */
  font-feature-settings:"palt" 1;
}
html[data-ui="b"] body{ font-feature-settings:"palt" 1; }

/* 紙 ― 真っ白はまぶしいので少し落とし、白いカードを浮かせる。
   ただし「白のときだけ」。ここを全体にかけると、暗い配色のときに
   紙だけ白くなって文字が読めなくなる（実際そうなっていた）。 */
html[data-ui="b"]:not([data-bs-theme="dark"]){ --vz-body-bg:#f3f6f9; }
html[data-ui="b"]:not([data-bs-theme="dark"]) .table-light{ --vz-table-bg:#eef2f6; }

/* 薄さが残りやすいところを、名指しで締める */
html[data-ui="b"] .text-muted,
html[data-ui="b"] .text-secondary{ color:var(--vz-secondary-color) !important; }
html[data-ui="b"] ::placeholder{ color:#8a93a6 !important; opacity:1; }
html[data-ui="b"] .badge.bg-light{ color:#3b4252 !important; }
html[data-ui="b"] .badge.bg-light.text-muted{ color:#4a5162 !important; }
html[data-ui="b"] .table-light th,
html[data-ui="b"] .table-light td,
html[data-ui="b"] .thead-light th{ color:var(--vz-heading-color); }
html[data-ui="b"] .table{ --vz-table-color:var(--vz-body-color); }
html[data-ui="b"] .nav-link,
html[data-ui="b"] .dropdown-item{ color:var(--vz-body-color); }
html[data-ui="b"] .card-footer{ color:var(--vz-secondary-color); }
html[data-ui="b"] .btn-light{ color:#2f3745; }
html[data-ui="b"] .btn-ghost-secondary{ color:#4a5162; }
html[data-ui="b"] .form-control:disabled,
html[data-ui="b"] .form-control[readonly]{ color:#4b5466; }
html[data-ui="b"] input,
html[data-ui="b"] select,
html[data-ui="b"] textarea,
html[data-ui="b"] option{ color:var(--vz-body-color); }
html[data-ui="b"] a{ color:#1573ad; }
html[data-ui="b"] a:hover{ color:#0f5880; }

/* 意味を持つ色の文字 ― 白地で読める濃さに置き換える */
html[data-ui="b"] .text-success{ color:#16794f !important; }
html[data-ui="b"] .text-warning{ color:#8e6204 !important; }
html[data-ui="b"] .text-info{    color:#0e6f9e !important; }
html[data-ui="b"] .text-danger{  color:#b5331f !important; }
html[data-ui="b"] .text-primary{ color:#17628c !important; }
html[data-ui="b"] .badge.bg-success-subtle.text-success{ color:#16794f !important; }
html[data-ui="b"] .badge.bg-warning-subtle.text-warning{ color:#8e6204 !important; }
html[data-ui="b"] .badge.bg-info-subtle.text-info{       color:#0e6f9e !important; }
html[data-ui="b"] .badge.bg-danger-subtle.text-danger{   color:#b5331f !important; }
html[data-ui="b"] .badge.bg-primary-subtle.text-primary{ color:#17628c !important; }

/* 薄くして区別していたものを、薄くしすぎない */
html[data-ui="b"] .btn:disabled,
html[data-ui="b"] .btn.disabled{ opacity:.6; }

/* ---------- 黒 B ---------- */
/* 上の html[data-ui="b"]{} で差し替えた --vz-* は、**全部ここにも書く**こと。
   片方だけ書くと、白用の値が暗い配色まで効いてくる。
   実際、--vz-primary-bg-subtle を白用だけ足したせいで、黒Bの札の地が
   明るい水色になり、その上の文字が読めなくなった（2度目の同じ失敗）。 */
html[data-ui="b"][data-bs-theme="dark"]{
  --vz-body-color:#dfe4ec;
  --vz-heading-color:#e3e8ef;
  --vz-secondary-color:#9aa3b5;
  --vz-tertiary-color:#8d99a7;
  --vz-light-text-emphasis:#c7cedb;
  --vz-border-color:#3a4149;
  --vz-input-placeholder-color:#7e8799;
  --vz-link-color:#6cb8e8;
  --vz-primary-bg-subtle:rgba(28,127,184,.18);
  --vz-dropdown-link-color:#dfe4ec;
}
html[data-ui="b"][data-bs-theme="dark"] a{ color:#6cb8e8; }
html[data-ui="b"][data-bs-theme="dark"] a:hover{ color:#8fcbf0; }
html[data-ui="b"][data-bs-theme="dark"] .badge.bg-light{ color:#cfd6e2 !important; }
html[data-ui="b"][data-bs-theme="dark"] .btn-light{ color:#dfe4ec; }
html[data-ui="b"][data-bs-theme="dark"] .text-success{ color:#5fcf9b !important; }
html[data-ui="b"][data-bs-theme="dark"] .text-warning{ color:#e8c05a !important; }
html[data-ui="b"][data-bs-theme="dark"] .text-info{    color:#64bce8 !important; }
html[data-ui="b"][data-bs-theme="dark"] .text-danger{  color:#f0806c !important; }
html[data-ui="b"][data-bs-theme="dark"] .text-primary{ color:#6ec0ee !important; }
html[data-ui="b"][data-bs-theme="dark"] .badge.bg-success-subtle.text-success{ color:#5fcf9b !important; }
html[data-ui="b"][data-bs-theme="dark"] .badge.bg-warning-subtle.text-warning{ color:#e8c05a !important; }
html[data-ui="b"][data-bs-theme="dark"] .badge.bg-info-subtle.text-info{       color:#64bce8 !important; }
html[data-ui="b"][data-bs-theme="dark"] .badge.bg-danger-subtle.text-danger{   color:#f0806c !important; }
html[data-ui="b"][data-bs-theme="dark"] .badge.bg-primary-subtle.text-primary{ color:#6ec0ee !important; }

/* ---------- 表 ----------
   ブラウザは table の中で文字を 16px に戻す。本文に揃え直す */
html[data-ui="b"] table{ font-size:var(--vz-body-font-size); }

/* ===========================================================
   B type ― 一覧画面（検索パネル＋表）
   -----------------------------------------------------------
   ここから下は「色と字」ではなく「形」。
   別PJの .grid / .stchip / .cl-leg の作法を、こちらの一覧に移したもの。
   A のときは何も変わらない。
   =========================================================== */

/* ---------- 表 ---------- */
/* 本文より少しだけ小さい程度に留める。12.5px は詰まりすぎていた */
html[data-ui="b"] .tabulator{ font-size:.84rem; }
html[data-ui="b"] .tabulator .tabulator-header .tabulator-col .tabulator-col-title{
  font-size:.73rem; font-weight:700; letter-spacing:.04em; color:var(--vz-secondary-color);
}
html[data-ui="b"] .tabulator .tabulator-row .tabulator-cell{ padding:7px 10px; }
html[data-ui="b"] .tabulator .tabulator-row:hover{ background:var(--surface-2); }

/* 行を詰める ― 一画面に入る件数を増やす。
   行を詰めるには、まず印を小さくする。余白だけ削ると字がぶつかる。 */
html[data-ui="b"] .tabulator .co-thumb{
  width:24px; height:24px; flex:0 0 24px; border-radius:5px;
}
html[data-ui="b"] .tabulator .co-thumb span{ font-size:11px; }
html[data-ui="b"] .tabulator .co-cell{ gap:8px; }
/* 製品名は、この表でいちばん見る欄。他より少し強くする */
html[data-ui="b"] .tabulator .co-cell .nm b{ font-weight:600; }
html[data-ui="b"] .tabulator .co-cell .nm small{ font-size:.68rem; }

/* 見出しの下の絞り込み欄。字が大きいと見出しと同じ重さに見える */
html[data-ui="b"] .tabulator .tabulator-header .tabulator-header-filter input,
html[data-ui="b"] .tabulator .tabulator-header .tabulator-header-filter select{
  font-size:.72rem; padding:2px 6px;
}

/* 行の左の帯 ― 調べた日の古さ。
   どの列を見ていても目に入るので、列の中のバッジより気づける。 */
html[data-ui="b"] .tabulator .tabulator-row{
  border-left:3px solid transparent;
}
html[data-ui="b"] .tabulator .tabulator-row.age-warn{ border-left-color:var(--vz-warning); }
html[data-ui="b"] .tabulator .tabulator-row.age-over{ border-left-color:var(--vz-danger); }
html[data-ui="b"] .tabulator .tabulator-row.age-over{
  background:color-mix(in srgb, var(--vz-danger) 4%, transparent);
}
html[data-ui="b"] .tabulator .tabulator-row.age-none{ border-left-color:var(--line-strong); }

/* 札の幅をそろえる ― 文字数で列が揺れないように */
html[data-ui="b"] .tabulator .badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:4.2rem; padding:.22rem .4rem; font-size:.74rem; font-weight:600;
  letter-spacing:.02em;
}

/* 空のとき */
html[data-ui="b"] .biz-empty i{ font-size:2rem; color:var(--vz-border-color); }

/* ---------- 検索パネル ---------- */
html[data-ui="b"] .biz-search{ padding:12px 14px; }
html[data-ui="b"] .biz-search label{
  font-size:.7rem; font-weight:700; letter-spacing:.04em; color:var(--vz-secondary-color);
}
html[data-ui="b"] .biz-search .form-control,
html[data-ui="b"] .biz-search .form-select{ font-size:.82rem; }

/* ---------- 上のバー ---------- */
/* 「追加」「表示モード」「書き出し」は役割が違う。間に仕切りを入れて group を見せる */
html[data-ui="b"] .biz-listbar .sp{ gap:6px; }
html[data-ui="b"] .biz-listbar .biz-modes{
  position:relative; padding-right:10px; margin-right:4px;
}
html[data-ui="b"] .biz-listbar .biz-modes::after{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:1px; height:18px; background:var(--vz-border-color);
}
html[data-ui="b"] .biz-listbar .count{ font-size:.8rem; }

/* ---------- 表の下の、色の意味 ---------- */
html[data-ui="b"] .biz-agelegend{
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  font-size:.72rem; color:var(--vz-secondary-color);
  padding:.45rem .25rem 0;
}
html[data-ui="b"] .biz-agelegend .lg{ display:inline-flex; align-items:center; gap:.3rem; }
html[data-ui="b"] .biz-agelegend .bar{
  display:inline-block; width:3px; height:.85rem; border-radius:2px;
}
html[data-ui="b"] .biz-agelegend .bar.warn{ background:var(--vz-warning); }
html[data-ui="b"] .biz-agelegend .bar.over{ background:var(--vz-danger); }
html[data-ui="b"] .biz-agelegend .bar.none{ background:var(--line-strong); }
/* A のときは帯を出していないので、意味の説明も出さない。
   概要モードにも表が無いので、同じく出さない */
html:not([data-ui="b"]) .biz-agelegend,
#listRoot:not([data-mode="std"]) .biz-agelegend{ display:none; }