/* ui-kit から配った写し。ここを直さない（正本 key3media/ui-kit tokens/legacy-admin-b.css、版 6495e9a） */
/* legacy-admin-b ― 管理画面の ui-b.css（B type）から「形」だけを残したもの。【やめる予定】
   なぜ：A type をなくし B だけにした（土台の合意 1回目 B3）。ui-b.css の色と字の変数は kit-tokens.css と食い違うので消し、
   色は kit の名前に置き換えた。黒の上書きも kit の名前が白黒で切り替わるので要らなくなった。
   残りの「形」（表の行の詰め方・札の幅・一覧の帯）は、2回目（部品）で kit の部品に移したら、このファイルごと消す。
   kit-tokens.css と legacy-admin.css のあと、アプリの CSS のあとに読む（今の ui-b.css と同じ位置）。 */
/* ===========================================================
   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; }

html[data-ui="b"] body{ font-feature-settings:"palt" 1; }

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

/* 薄さが残りやすいところを、名指しで締める */
html[data-ui="b"] .text-muted,
html[data-ui="b"] .text-secondary{ color:var(--vz-secondary-color) !important; }
html[data-ui="b"] ::placeholder{ color:var(--kit-placeholder) !important; opacity:1; }
html[data-ui="b"] .badge.bg-light{ color:var(--kit-ink-2) !important; }
html[data-ui="b"] .badge.bg-light.text-muted{ color:var(--kit-ink-2) !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:var(--kit-ink-2); }
html[data-ui="b"] .btn-ghost-secondary{ color:var(--kit-ink-2); }
html[data-ui="b"] .form-control:disabled,
html[data-ui="b"] .form-control[readonly]{ color:var(--kit-ink-2); }
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:var(--kit-accent-text); }
html[data-ui="b"] a:hover{ color:var(--kit-accent-text); }

/* 意味を持つ色の文字 ― 白地で読める濃さに置き換える */
html[data-ui="b"] .text-success{ color:var(--kit-ok) !important; }
html[data-ui="b"] .text-warning{ color:var(--kit-warn) !important; }
html[data-ui="b"] .text-info{    color:var(--kit-info) !important; }
html[data-ui="b"] .text-danger{  color:var(--kit-bad) !important; }
html[data-ui="b"] .text-primary{ color:var(--kit-accent-text) !important; }
html[data-ui="b"] .badge.bg-success-subtle.text-success{ color:var(--kit-ok) !important; }
html[data-ui="b"] .badge.bg-warning-subtle.text-warning{ color:var(--kit-warn) !important; }
html[data-ui="b"] .badge.bg-info-subtle.text-info{       color:var(--kit-info) !important; }
html[data-ui="b"] .badge.bg-danger-subtle.text-danger{   color:var(--kit-bad) !important; }
html[data-ui="b"] .badge.bg-primary-subtle.text-primary{ color:var(--kit-accent-text) !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度目の同じ失敗）。 */

/* ---------- 表 ----------
   ブラウザは 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; }