/* 商品ツリー共通デザイン(2026-09-05新設、2026-09-24 ANALYTICSへ移植)。通称「PTツリー」—
   この名前で呼ばれたらこの形式(product-tree.js + このCSS、ブランド初期展開・商品群以下折りたたみ)
   を指す。mall-ops/frontend/staff/shared/product-tree.css の複製(別Cloudflare Pages
   プロジェクトのためimport不可、変更時はmall-ops側にも反映すること)。
   --pt-*以外の変数(--bg/--panel-bg/--text/--text-faint/--border-light/--accent)は
   このapp(frontend/index.html)の:rootに既存のものをそのまま使う。
   設定→商品管理のマスタ管理ツリーと、在庫一覧(warehouse-inventory-list.html)の在庫ツリーで
   同じ階層・同じ配色・同じインデントを使うための共通CSS。画面ごとに似たCSSを増やさないため、
   「階層の見た目」に関わる指定はこのファイルだけに置く(画面固有の列・操作系はページ側)。

   階層:  ブランド → 商品群 → サイズ(区切り見出し) → SKU行
   開閉:  ブランドと商品群だけ。サイズは開閉階層ではなく区切り見出しなので、商品群を開けば
          配下のサイズとSKUがまとめて見える。
   省略:  サイズが無い商品はサイズ見出しを挟まず商品群直下へ置く。カラーが無い場合も
          「カラー未設定」という擬似見出しは作らない(SKU行側で主表示を切り替える)。

   DOM構成は2通りあるが、行に付けるクラス(.pt-brand / .pt-group / .pt-size / .pt-sku)は共通:
     商品管理  <div class="pt-node"><div class="pt-row pt-brand pt-i0">…</div><div class="pt-kids">…
     在庫一覧  <tr class="pt-brand"><td class="pt-i0"><div class="pt-row">…
   tableでは背景・境界線・余白がセル側にしか効かないため、tr用の指定を併記している。

   配色の意味は tokens.css の --tree-* と揃える(赤=不足/競合、オレンジ=チャネル登録あり、
   黄=選択中/数量入力済み、グレー=対象外)。ブランド行は以前濃紺(#1f3a5f)だったが、
   ページ全体が暗く見えて圧迫感があったため、彩度を落とした中間濃度のブルーへ変更した。 */
:root {
  /* 1段あたりのインデント。開閉アイコン(--pt-slot)+gapの分は全階層で共通なので、
     名称・件数の開始位置は階層ごとにきれいに縦に揃う。 */
  --pt-indent: 20px;
  --pt-slot: 12px;
  --pt-gap: 8px;
  --pt-pad-x: 10px;

  /* ブランド: くすみブルー(白文字のコントラスト比 約5:1)。濃紺より明らかに軽い */
  --pt-brand-bg: #54748f;
  --pt-brand-bg-hover: #5e8099;
  --pt-brand-bg-open: #4a687f;
  --pt-brand-text: #fff;
  --pt-brand-text-dim: rgba(255,255,255,.8);
  /* ブランド行同士は背景色で隙間を作り、濃色が壁のように連続しないようにする */
  --pt-brand-gap: 5px;

  /* 商品群: ごく薄い青 + 濃い文字。左のアクセントラインと上下の境界線で必ず区切る */
  --pt-group-bg: #eaf2fa;
  --pt-group-bg-hover: #dfebf7;
  --pt-group-accent: #4f7ba6;
  --pt-group-line: #b8cde0;

  /* サイズ: ほぼ白 + 上側の区切り線だけ。クリックできないので文字は控えめ */
  --pt-size-bg: #fafcfe;
  --pt-size-rule: #ccd8e4;
  --pt-size-text: #4a5a6b;

  /* SKU行 */
  --pt-sku-bg: var(--panel-bg);
  --pt-hover-bg: #f1f7fd;
  --pt-active-bg: var(--tree-edit-row-bg);
  --pt-active-bg-hover: var(--tree-edit-row-bg-hover);
}

/* 縦スクロールバーの有無でコンテンツ幅が動かないようにする(2026-09-06)。
   ツリーの展開・折りたたみやタブ切替でページの高さが大きく変わるため、これが無いと
   スクロールバーが出入りするたびに表全体の幅と左右位置がずれる。 */
html { scrollbar-gutter: stable; }

/* 行の中身(長い商品名など)で親が押し広げられないようにする。あふれる文字は省略記号にし、
   横スクロールが要る場合は表側のラッパーに閉じ込める(bodyには出さない)。 */
.pt-row { min-width: 0; }
.pt-name, .pt-count { min-width: 0; }

/* ---------------------------------------------------------------- 行の共通構造
   [開閉アイコン(12px)][gap][名称][件数][…][右側の操作]
   開閉しない階層でも同じ幅の空スロットを置き、名称の開始位置を階層ごとに揃える。 */
.pt-row { display: flex; align-items: center; gap: var(--pt-gap); }
.pt-caret { flex: 0 0 var(--pt-slot); width: var(--pt-slot); text-align: center; font-size: 10px;
  color: var(--text-faint); transition: transform .12s; }
.pt-caret.pt-empty { visibility: hidden; }
.pt-node.pt-open > .pt-row > .pt-caret, tr.pt-open .pt-caret { transform: rotate(90deg); }
.pt-name { font-weight: 700; }
.pt-count { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-spacer { flex: 1 1 auto; }

/* インデント。子は必ず親より右から始まる(pt-i0 < pt-i1 < pt-i2 < pt-i3) */
.pt-i0 { padding-left: var(--pt-pad-x); }
.pt-i1 { padding-left: calc(var(--pt-pad-x) + var(--pt-indent)); }
.pt-i2 { padding-left: calc(var(--pt-pad-x) + var(--pt-indent) * 2); }
.pt-i3 { padding-left: calc(var(--pt-pad-x) + var(--pt-indent) * 3); }

/* ---------------------------------------------------------------- 階層ごとの見た目 */

/* ブランド */
.pt-brand, tr.pt-brand > td { background: var(--pt-brand-bg); color: var(--pt-brand-text);
  border-top: var(--pt-brand-gap) solid var(--bg); }
.pt-brand { padding-top: 9px; padding-bottom: 9px; cursor: pointer; }
tr.pt-brand { cursor: pointer; }
tr.pt-brand > td { padding-top: 9px; padding-bottom: 9px; }
.pt-brand .pt-name { font-size: 13.5px; }
.pt-brand .pt-caret { color: var(--pt-brand-text); }
.pt-brand .pt-count { color: var(--pt-brand-text-dim); }
.pt-brand:hover, tr.pt-brand:hover > td { background: var(--pt-brand-bg-hover); }
.pt-node.pt-open > .pt-brand, tr.pt-brand.pt-open > td { background: var(--pt-brand-bg-open); }
/* 濃色の上では通常のボタン配色が読めないので、ブランド行の中だけ白基調にする */
.pt-brand .pt-btn { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); color: #fff; }
.pt-brand .pt-btn:hover { background: rgba(255,255,255,.3); border-color: #fff; color: #fff; }
.pt-brand .pt-btn.on { background: #fff; border-color: #fff; color: var(--pt-brand-bg-open); }

/* 商品群。左のアクセントラインと上下の境界線で、薄い背景でも輪郭が消えないようにする */
.pt-group, tr.pt-group > td { background: var(--pt-group-bg); color: var(--text);
  border-top: 2px solid var(--pt-group-line); border-bottom: 2px solid var(--pt-group-line); }
.pt-group { padding-top: 8px; padding-bottom: 8px; cursor: pointer;
  box-shadow: inset 4px 0 0 var(--pt-group-accent); }
tr.pt-group { cursor: pointer; }
tr.pt-group > td { padding-top: 8px; padding-bottom: 8px; }
tr.pt-group > td:first-child { box-shadow: inset 4px 0 0 var(--pt-group-accent); }
.pt-group .pt-name { font-size: 13px; }
.pt-group .pt-caret { color: var(--pt-group-accent); }
.pt-group:hover, tr.pt-group:hover > td { background: var(--pt-group-bg-hover); }

/* サイズ = 区切り見出し(開閉しない) */
.pt-size, tr.pt-size > td { background: var(--pt-size-bg); color: var(--pt-size-text);
  border-top: 2px solid var(--pt-size-rule); }
.pt-size { padding-top: 5px; padding-bottom: 5px; }
tr.pt-size > td { padding-top: 5px; padding-bottom: 5px; }
.pt-size .pt-name { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }

/* SKU行 */
.pt-sku, tr.pt-sku > td { background: var(--pt-sku-bg); border-bottom: 1px solid var(--border-light); }
.pt-sku { padding-top: 6px; padding-bottom: 6px; font-size: 12.5px; cursor: pointer; }
tr.pt-sku { cursor: pointer; }
tr.pt-sku > td { padding-top: 6px; padding-bottom: 6px; }
.pt-sku:hover, tr.pt-sku:hover > td { background: var(--pt-hover-bg); }
/* 選択中・数量入力済みは行全体を薄い黄色にする(警告の赤・チャネルのオレンジと混同しない) */
.pt-sku.pt-active, tr.pt-sku.pt-active > td { background: var(--pt-active-bg); }
.pt-sku.pt-active:hover, tr.pt-sku.pt-active:hover > td { background: var(--pt-active-bg-hover); }

/* 未設定(ブランド/商品群が無い)の見出しは赤系で示す。階層自体は既存どおり最後尾に置く */
.pt-none .pt-name { color: var(--tree-danger-text); }
.pt-brand.pt-none .pt-name, tr.pt-brand.pt-none .pt-name { color: #ffdad5; }

/* 遅延描画: 閉じている間は子DOMを作らない。開いたときだけ中身を生成する */
.pt-node > .pt-kids { display: none; }
.pt-node.pt-open > .pt-kids { display: block; }

/* 共通の小さなボタン(選択など) */
.pt-btn { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--panel-bg); color: var(--text-faint);
  cursor: pointer; white-space: nowrap; }
.pt-btn:hover { border-color: var(--accent); color: var(--accent); }
.pt-btn.on { border-color: var(--tree-select-border); color: var(--tree-select-text); background: var(--tree-select-bg); }

/* 数値列(在庫数など)。桁が揃うよう tabular-nums、0は薄いグレー */
.pt-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-num.pt-zero { color: var(--text-faint); }