/* 常設 ⋮ ボタン (menu.attachToTable rowButton) の見た目。
 *
 * 右クリックメニューと同じメニューを開く可視導線。初見ユーザーは行やカードを
 * 右クリックする発想を持たない実測 (複数 pj) への対策として常設する。
 * bootstrap / tailwind 両モード共通のため scripts.html から全 pj に配信される
 * (tailwind 限定の dtu-menu.css には置かない)。グリフは font 依存を避けて
 * テキストの縦三点リーダー (U+22EE) で描く。
 *
 * - 行 (tr): 第1セルの左端・上下中央。業務一覧は横スクロールで右端が隠れる
 *   ため、常に見えている左端に置く。列内容は .dtu-rowbtn-host の padding で
 *   右へ逃がす (ヘッダー th も揃えて縦アライメントを保つ)
 * - ブロック要素 (詳細カード等): 右上
 *
 * 配色は Tailwind トークン (--color-*) があれば追従し、無ければ既定値 (bootstrap
 * pj 含む) にフォールバックする。
 */
:root {
  --dtu-rowbtn-fg: var(--color-neutral-400, #a3a3a3);
  --dtu-rowbtn-fg-hover: var(--color-neutral-600, #525252);
  --dtu-rowbtn-bg-hover: var(--color-neutral-200, #e5e5e5);
}
.dtu-rowbtn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--dtu-rowbtn-fg);
  cursor: pointer;
  line-height: 1;
}
.dtu-rowbtn::before {
  content: "\22EE"; /* 縦三点リーダー (テキストグリフ、フォント同梱不要) */
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.dtu-rowbtn:hover,
.dtu-rowbtn:focus-visible {
  color: var(--dtu-rowbtn-fg-hover);
  background: var(--dtu-rowbtn-bg-hover);
}
/* 行内 (tr): 第1セルを配置基準にして左端・上下中央に浮かせる */
td.dtu-rowbtn-cell,
th.dtu-rowbtn-cell {
  position: relative;
}
.dtu-rowbtn--row {
  left: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
}
/* 第1列にボタン分の左余白を確保 (絶対配置のボタンは padding 領域に浮くため、
 * セル内容やチェックボックスとは重ならない)
 * tbody 側は td だけでなく th も対象にする: _rowBtn.inject() は
 * querySelector("td, th") で第1セルを取るため、行番号列に <th scope="row"> を
 * 使うテーブルではボタンが th に入る (position は th.dtu-rowbtn-cell で
 * 既に手当て済み)。ここで th を落とすとボタンとセル内容が重なる。 */
table.dtu-rowbtn-host thead th:first-child,
table.dtu-rowbtn-host tbody td:first-child,
table.dtu-rowbtn-host tbody th:first-child {
  padding-left: 2rem;
}
/* ブロック要素 (カード等): 右上
 * 行 (tr) 版と同じく padding でボタン分の場所を空ける。空けないと絶対配置の
 * ボタンがカード内容 (右上に置かれたボタン・エディタ等) と重なる。
 * 占有幅 = ボタン幅 1.5rem + right 0.5rem = 2rem。ホスト側の padding が
 * これより大きい場合は pj 側で --dtu-rowbtn-anchor-pad を上書きする。 */
.dtu-rowbtn-anchor {
  position: relative;
  padding-right: var(--dtu-rowbtn-anchor-pad, 2rem);
}
.dtu-rowbtn--block {
  right: 0.5rem;
  top: 0.5rem;
}
/* phone 実効タップ域の底上げ (viewport-sweep VSW-MRS-007)。1.5rem=24px は境界値で
 * 実効タップ域が不足する実測。全 pj の行ボタンに波及するため見た目の密度を保った
 * まま最小限 (24px → 28px) だけ拡大する。 */
@media (max-width: 480px) {
  .dtu-rowbtn {
    width: 1.75rem;
    height: 1.75rem;
  }
  /* ボタンが太る分だけブロック側の確保幅も揃える (1.75rem + right 0.5rem) */
  .dtu-rowbtn-anchor {
    padding-right: var(--dtu-rowbtn-anchor-pad, 2.25rem);
  }
}

/* 行メニューを開いている間だけ行を反転する (menu の `highlightRow`。attachToTable は既定 ON)。
 *
 * 置き場が dtu-menu.css でなくここなのは、menu_assets.html の dtu-menu.css が
 * `{% if ui_framework == "tailwind" %}` の内側にあり **bootstrap 7 pj には届かない**ため
 * (両モードへ配っているのは scripts.html のこのファイル)。menu.js は両モード共通の API を
 * 約束しているので、CSS も両モードに届く側へ置く。
 *
 * 2 つの class を同じ見た目で受ける:
 *   - `.dtu-menu-row-open`   menu.js が両モードで付ける DTU の印
 *   - `.context-menu-active` jquery.contextMenu が bootstrap モードで付ける印。DTU menu を
 *     経由しない生 $.contextMenu の画面 (マニュアル エディタ等) も同じ見た目になる
 *
 * 🚨 **background-color ではなく inset box-shadow で塗る**。bootstrap の table は
 * `.table > :not(caption) > * > *` が `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)`
 * を全セルへ敷いており、background-color はその下に潜って縞・hover に食われる。同じ
 * プロパティで上書きすれば、pj 側に残っている同型のコピペ CSS と二重に濃くもならない
 * (同値なので specificity の勝ち負けに関わらず見た目が一致する)。
 *
 * 🚨 **specificity は (0,2,4)**。`.table-striped > tbody > tr:nth-of-type(odd) > *` と
 * `.table-hover > tbody > tr:hover > *` がどちらも (0,2,3) なので、これを下回ると
 * 縞のある表・hover 中の行で無反転に戻る。セレクタを縮めるときはここを数え直すこと。
 *
 * `.selected` を除くのは、選択行の色 (青) を上書きしないため (three_k 系 13 面の既存意図)。
 *
 * 対象を `tr > td/th` に閉じているのは、`menu.attach` が任意セレクタ (カード等) にも
 * 掛かる汎用基底で、行でないものを塗る当てが無いため。だから `attach` 側の既定は false。 */
table > tbody > tr.dtu-menu-row-open:not(.selected) > td,
table > tbody > tr.dtu-menu-row-open:not(.selected) > th,
table > tbody > tr.context-menu-active:not(.selected) > td,
table > tbody > tr.context-menu-active:not(.selected) > th {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.075);
}
html.dark table > tbody > tr.dtu-menu-row-open:not(.selected) > td,
html.dark table > tbody > tr.dtu-menu-row-open:not(.selected) > th,
html.dark table > tbody > tr.context-menu-active:not(.selected) > td,
html.dark table > tbody > tr.context-menu-active:not(.selected) > th {
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.08);
}