/*
 * v2（Salon Workspace）のテーブル。正は DES-UX-020 §8.5。
 * Gmail の受信トレイに近い「軽い行の連続」。見出し行を青で塗らない。
 * 縦罫は置かない。固定列・固定見出し・横スクロールの構造は v1 から維持する。
 */

/* 表の器。境界と角丸を持つ。

   **月次勤怠の表も同じ器に入れる**（2026-08-14 のオーナー指摘）。初版は
   「表だけのカードを増やさない」としてキャンバスへ直接置いていたが、
   **その 1 画面だけ角が四角く、他の一覧と揃っていなかった。** 器の有無を
   画面ごとに変えない */
.v2-table-card {
  overflow: hidden;
  /* **器の枠は行の罫より濃い**（2026-08-23）。カードと同じ濃さにそろえる */
  border: 1px solid var(--cocpi-v2-border-card);
  border-radius: var(--cocpi-v2-radius-card);
  background: var(--cocpi-v2-bg-canvas);
}

/* 横スクロールは表の内部に限定する（ページ全体を横に溢れさせない） */
.v2-table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.v2-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  /* 桁を揃える（REQ-UX-012）。書体は変えずに等幅数字で揃える */
  font-variant-numeric: tabular-nums;
}

.v2-table th {
  position: sticky;
  z-index: 3;
  top: 0;
  height: 40px;
  padding: 6px 12px;
  color: var(--cocpi-v2-text-secondary);
  background: var(--cocpi-v2-bg-app);
  border-bottom: 1px solid var(--cocpi-v2-border-strong);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.v2-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--cocpi-v2-border);
  text-align: center;
  white-space: nowrap;
  transition: background var(--cocpi-v2-duration-fast) ease-out;
}

.v2-table tbody tr:last-child td { border-bottom: 0; }

/* 揃え: 数値・時刻・札・操作は中央、氏名と文は左（§3.5 の判断を維持。
   インライン要素に text-align は効かないため、セル側のクラスで揃える） */
.v2-table .v2-table__left { text-align: left; }

/* 取り消せない操作の列（DES-ORG-010 §2.3）。**「操作」と並べない。**
   区切り線と余白で離す。色では離れない（隣り合っていること自体が誤操作を誘う） */
.v2-table .v2-table__danger {
  padding-left: 20px;
  border-left: 1px solid var(--cocpi-v2-border);
}

/* 行の走査。hover は淡いローズ（情報を担わない） */
@media (hover: hover) {
  .v2-table tbody tr:hover td { background: var(--cocpi-v2-bg-hover); }
}

/* 行の状態。色だけに頼らない。文言・札を必ず伴う（DES-UX-010 §3.2.1） */
.v2-table tr[data-state="today"] td { background: var(--cocpi-v2-brand-soft); }
.v2-table tr[data-state="missing"] td { background: var(--cocpi-v2-warning-soft); }

/* 当日・未入力の左ライン。角丸の面では inset で描く（§4.7.1 の教訓） */
.v2-table tr[data-state="today"] td:first-child {
  box-shadow: inset 3px 0 0 var(--cocpi-v2-brand);
}

.v2-table tr[data-state="missing"] td:first-child {
  box-shadow: inset 3px 0 0 var(--cocpi-v2-warning);
}

/* 選択行（行選択のある一覧）。チェックボックス + 面 + 一括操作バー */
.v2-table tr[aria-selected="true"] td { background: var(--cocpi-v2-brand-soft); }

/* 退かせる行（非勤務日・停止中など）。背景は変えず文字を弱める。

   **曜日の色を持つセルは弱めない**（2026-08-13 に実測で発覚）。土日はほぼ
   非勤務日であり、この規則が詳細度で `.v2-dow-*` に勝つため、**土日の色は
   一度も画面に出ていなかった**（実測 rgb(111,104,99) = 淡色そのもの）。
   トークンを濃くしても効かない。**負けていたことが原因だった。** */
.v2-table tr[data-state="off"] td:not(.v2-dow-sat):not(.v2-dow-sun) {
  color: var(--cocpi-v2-text-muted);
}

/* 固定列（1 列目）。identity の列を 1 列目に置く（§4.19 の判断を維持） */
.v2-table--sticky-first th:first-child,
.v2-table--sticky-first td:first-child {
  position: sticky;
  z-index: 2;
  left: 0;
  background: var(--cocpi-v2-bg-canvas);
  box-shadow: 1px 0 0 var(--cocpi-v2-border);
}

.v2-table--sticky-first th:first-child {
  z-index: 4;
  background: var(--cocpi-v2-bg-app);
}

/* 先頭 2 列を固定する。スタッフ一覧（社員番号・氏名。DES-ORG-010 §2.0）と
   月次勤怠のタイムカード（日・曜日。§4.13）が使う。**1 列目の幅だけが違う**
   ため、`--v2-sticky-first` で受け取る。

   **番号や日付だけを固定すると、横に送ったとき行が識別できない。** 2 列目
   だけを固定すると 1 列目が下へ潜る（DES-ORG-010 §2.2 の実測） */
.v2-table--sticky-two {
  --v2-sticky-first: 92px;
}

.v2-table--sticky-two th:nth-child(1), .v2-table--sticky-two td:nth-child(1),
.v2-table--sticky-two th:nth-child(2), .v2-table--sticky-two td:nth-child(2) {
  position: sticky;
  z-index: 2;
  background: var(--cocpi-v2-bg-canvas);
}

/* **`width` だけでは足りない。** 列の多い表では自動レイアウトが指定より
   狭く配分し、2 列目の `left` との間に隙間が空く（2026-08-14 に実測。
   指定 92px に対して 73px になり、19px の隙間から本文が透けた） */
.v2-table--sticky-two th:nth-child(1), .v2-table--sticky-two td:nth-child(1) {
  left: 0;
  width: var(--v2-sticky-first);
  min-width: var(--v2-sticky-first);
}

.v2-table--sticky-two th:nth-child(2), .v2-table--sticky-two td:nth-child(2) {
  left: var(--v2-sticky-first);
}

.v2-table--sticky-two td:nth-child(2) { box-shadow: 1px 0 0 var(--cocpi-v2-border); }

.v2-table--sticky-two th:nth-child(1), .v2-table--sticky-two th:nth-child(2) {
  z-index: 4;
  background: var(--cocpi-v2-bg-app);
}

/* 固定列は行の状態の背景を引き継ぐ（v1 で当日の色が固定列に効かなかった教訓） */
.v2-table--sticky-two tr[data-state="today"] td:nth-child(1),
.v2-table--sticky-two tr[data-state="today"] td:nth-child(2) { background: var(--cocpi-v2-brand-soft); }
.v2-table--sticky-two tr[data-state="missing"] td:nth-child(1),
.v2-table--sticky-two tr[data-state="missing"] td:nth-child(2) { background: var(--cocpi-v2-warning-soft); }

@media (hover: hover) {
  .v2-table--sticky-two tbody tr:hover td:nth-child(1),
  .v2-table--sticky-two tbody tr:hover td:nth-child(2) { background: var(--cocpi-v2-bg-hover); }
}

/* 固定列は行の状態の背景を引き継ぐ（v1 で当日の黄が固定列に効かなかった教訓） */
.v2-table--sticky-first tr[data-state="today"] td:first-child {
  background: var(--cocpi-v2-brand-soft);
}

.v2-table--sticky-first tr[data-state="missing"] td:first-child {
  background: var(--cocpi-v2-warning-soft);
}

.v2-table--sticky-first tr[aria-selected="true"] td:first-child {
  background: var(--cocpi-v2-brand-soft);
}

@media (hover: hover) {
  .v2-table--sticky-first tbody tr:hover td:first-child {
    background: var(--cocpi-v2-bg-hover);
  }
}

/* 操作列を右端に固定する（DES-ATT-010 §5.6。2026-08-17、オーナー指示）。

   承認一覧は 7 列あり、390px の端末で 257px はみ出していた。**承認の右端は
   表示領域の 249px 外**にあり、いちばん押すものへ届くのに画面幅とほぼ同じだけ
   横へ送る必要があった（実測）。

   **列を減らさない。** 未入力・欠勤・実働は承認の判断材料であり、隠すと
   中身を見ずに承認させることになる。

   落とし穴は `--sticky-two` と同じ 3 つ（背景・行の状態・見出しの重なり）。

   **`:last-child` を固定する。** 最右が操作列である表にしか使えない。
   組織・マスタの一覧は最右が「削除」であり、当てると**破壊的な操作を
   親指の下に貼り付ける**（DES-ATT-010 §5.6.1.2）。 */
.v2-table--sticky-actions th:last-child,
.v2-table--sticky-actions td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  /* **背景を自前で持つ。** 持たないと下を通る本文が透ける */
  background: var(--cocpi-v2-bg-canvas);
  /* 送っている最中だと分かるように、左端に境を引く */
  box-shadow: -1px 0 0 var(--cocpi-v2-border);
}

.v2-table--sticky-actions th:last-child {
  z-index: 4;
  background: var(--cocpi-v2-bg-app);
}

/* 固定列は行の状態の背景を引き継ぐ（引き継がないと操作列だけ色が抜ける） */
.v2-table--sticky-actions tr[data-state="today"] td:last-child {
  background: var(--cocpi-v2-brand-soft);
}

.v2-table--sticky-actions tr[data-state="missing"] td:last-child {
  background: var(--cocpi-v2-warning-soft);
}

/* 一括選択の行（`bulk-select.js` が `aria-selected` を立てる） */
.v2-table--sticky-actions tr[aria-selected="true"] td:last-child {
  background: var(--cocpi-v2-brand-soft);
}

@media (hover: hover) {
  .v2-table--sticky-actions tbody tr:hover td:last-child {
    background: var(--cocpi-v2-bg-hover);
  }
}

/* 高密度（スマートフォン）。12px を下限とする（DES-UX-010 §5.0.1） */
@media (max-width: 767px) {
  .v2-table--dense { font-size: 12px; }
  .v2-table--dense th { font-size: 11px; }
  .v2-table--dense th, .v2-table--dense td { padding: 6px 8px; }
}

/* 表のフッタ（合計・件数・ページング） */
.v2-table-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--cocpi-v2-border);
  background: var(--cocpi-v2-bg-subtle);
}

/* 一括操作バー。出入りで一覧を上下させない（§4.3 の判断を維持）。
   置く側が高さ 56px の器を確保し、非選択時は中身だけを隠す */
.v2-bulkbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px;
}

.v2-bulkbar__actions { display: flex; gap: 8px; }

/* `hidden` は作者の `display` に負ける。UA の `[hidden] { display: none }` は
   詳細度で `.v2-bulkbar__actions` の下にあり、**属性を立てても画面には出ていた**
   （2026-08-13 に実測。DES-UX-020 §4.3 の「0 件のときは操作を出さない」が
   効いていなかった）。`display` を持つクラスには `[hidden]` を明示する */
.v2-bulkbar__actions[hidden] { display: none; }

/* まとまりの見出し行（店舗ごとの区切りなど）。列を足すより横幅を使わない。
   **同じ役割の繰り返しであり、強調は散らない**（10_tokens.md §3.2.1） */
.v2-table__group td,
.v2-table__group th {
  padding: 6px 12px;
  color: var(--cocpi-v2-brand-text);
  background: var(--cocpi-v2-bg-subtle);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

/* 状態を持つ行の面（v2-table の data-state）を、まとまりの見出しへ波及させない */
.v2-table__group td { border-bottom: 1px solid var(--cocpi-v2-border); }

/* 行の下に開く明細（有給の内訳など）。行を押した先を画面遷移にしない */
.v2-table__detail td {
  padding: 16px;
  background: var(--cocpi-v2-bg-subtle);
  text-align: left;
  white-space: normal;
}

.v2-table__detail-title { margin: 0 0 10px; font-size: 14px; font-weight: 700; }

/* ---- ページング（DES-UX-020 §4.1） --------------------------- */

.v2-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--cocpi-v2-border);
  background: var(--cocpi-v2-bg-subtle);
}

.v2-pager__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--cocpi-v2-border-strong);
  border-radius: 50%;
  color: var(--cocpi-v2-text);
  background: var(--cocpi-v2-bg-canvas);
  cursor: pointer;
}

.v2-pager__arrow svg { width: 18px; height: 18px; }

@media (hover: hover) {
  .v2-pager__arrow:hover:not(:disabled) { background: var(--cocpi-v2-bg-hover); }
}

/* 端では disabled にして消さない。消すと矢印の位置が動く（§4.1） */
.v2-pager__arrow:disabled {
  color: var(--cocpi-v2-text-muted);
  border-color: var(--cocpi-v2-border);
  cursor: not-allowed;
}

/* 控えめに添える。**ページの位置と、カードの添えの文が同じ役割である**
   （DES-UX-020 §8.15）。**書き写さず 1 つの規則にまとめる** ——
   次に値を変えるとき片方だけ直る。

   **`.v2-card__count` から改名した**（2026-09-02）。件数を出すのをやめ、
   **残ったのは「この範囲に記録がありません」だけ** —— 数ではない */
.v2-pager__counter,
.v2-card__note {
  color: var(--cocpi-v2-text-secondary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* 日別編集への入口（DES-ATT-010 §4）。**行のどこを押しても開く。**
   31 日を行き来しながら直すため、狙いを小さくしない。

   **押下は行（`tr[data-rowlink]`）で受ける**（`timecard-behavior.js`）。
   リンク（`.v2-rowlink`）は行き先と、読み上げ・キーボードの入口だけを持つ。

   **リンクを行に重ねない**（2026-09-13 に取り下げ）。初版は
   `position: absolute; inset: 0` で重ね、`<tr>` の `position: relative` を器に
   していた。**iPad（iOS の WebKit）は `<tr>` を器にせず、リンクが画面全体に
   広がった** —— 押せる行のうち最後（本日）のリンクが一番上に来て、ナビを含め
   どこを押しても本日の日別編集が開いた（オーナー指摘。手元の WebKit 26.4 と
   Chromium では再現しない）。表の行の器に頼る形そのものをやめた */
.v2-rowlink { color: inherit; text-decoration: none; }

.v2-timecard tbody tr[data-rowlink] { cursor: pointer; }

/* **キーボードで行のリンクへ来たら、行の上下に線を出す。** リンクは文字を
   隠しており（読み上げ用）、リンク自身のフォーカスの輪は見えない。
   ホバーの面（`.v2-table tbody tr:hover td`）は表の共通の規則が持つ */
.v2-timecard tbody tr[data-rowlink]:focus-within > td {
  box-shadow: inset 0 3px 0 var(--cocpi-v2-text), inset 0 -3px 0 var(--cocpi-v2-text);
}

/* 取り消しできない操作（DES-UX-020 §4.7）。**主要操作の並びに入れない。**
   何が消えるかを開いて見せてから押させる（DES-ATT-010 §4.0.3） */
.v2-danger-zone {
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--cocpi-v2-border);
  border-radius: var(--cocpi-v2-radius-control);
}

.v2-danger-zone > summary {
  color: var(--cocpi-v2-error);
  cursor: pointer;
  font-size: 13px;
}

.v2-danger-zone .v2-field__hint { margin: 8px 0 12px; }

/* その日の修正履歴（DES-ATT-010 §4.5、DES-UX-020 §4.31）。
   **読むだけの区画であり、操作を持たない。** 入力欄と同じ重さで置くと
   「ここも直すのか」と読める。文字を一段落として面を持たせない */
.v2-history {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--cocpi-v2-border);
}

.v2-history__title {
  margin: 0 0 8px;
  color: var(--cocpi-v2-text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.v2-history__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 1 回の保存が 1 件。**行の切れ目を線で引かない**（数件しか並ばず、
   線を引くと表に見える。区切りは余白で足りる） */
.v2-history__entry > p { margin: 0; }

/* いつ・だれが。**同じ行に置く**（1 件が 3 行を超えないようにする） */
.v2-history__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--cocpi-v2-text-secondary);
  font-size: 12px;
}

.v2-history__when { font-variant-numeric: tabular-nums; }

/* 何が、どう変わったか。**本文の色で出す**（この区画で唯一の事実） */
.v2-history__changes {
  margin-top: 2px;
  color: var(--cocpi-v2-text);
  font-size: 13px;
  line-height: 1.6;
}

/* なぜ直したか（任意。REQ-ATT-002）。**書かれた回だけ出る**ため、
   変更の内容より一段弱くして、有無で行数が変わることを目立たせない */
.v2-history__reason {
  margin-top: 2px;
  color: var(--cocpi-v2-text-secondary);
  font-size: 12px;
}

/* ---- 改行を保つセル（DES-UX-020 §8.28。2026-09-13） ----------------- */

/* 表のセルは**折り返さない作り**（`nowrap`。横にスクロールする）。
   **改行は保つが折り返さない**（`pre`。2026-09-13 のオーナー選択）。
   改行を含む行だけ高くなる */
.v2-table .v2-multiline { white-space: pre; }

/* ---- 押している間（DES-UX-020 §8.29。2026-09-13） ----
   **押した行だけを塗る**（押せる行 `tr[data-rowlink]` を押している間、
   `shell-behavior.js` が `data-pressed` を立てる）。**CSS の
   `tr:has(.v2-rowlink:active)` では iPad で行の面が変わらなかった**
   （2026-09-13 のオーナー指摘。行に重ねたリンクが画面全体に広がっていた。
   重ねる形はやめた —— 上の `.v2-rowlink` の規則）。
   セルごとに塗る —— 固定列・当日・未入力のセルは自前の面を持ち、行の面を
   塗っても隠れる。詳細度は固定列の状態の規則（0,3,2）より高い（0,3,3。
   `:nth-child(n)` はすべてのセルに当たり、詳細度を 1 つ足すためだけに置く）。
   **色は `bg-subtle`**（他の部品の `brand-soft-strong` にしない）。表のセルは
   薄い文字（`text-muted` の「—」）と警告の文字（「要入力」）を載せ、
   `brand-soft-strong` の上ではそれぞれ 4.19・4.45 と 4.5 を割った（実測）。
   `bg-subtle` の上では 4.85・5.16。当日（`brand-soft`）・未入力（`warning-soft`）・
   ホバー（`bg-hover`）のどれとも違う */
.v2-table tbody tr[data-pressed] > td:nth-child(n) { background: var(--cocpi-v2-bg-subtle); transition: none; }

.v2-pager__arrow:active:not(:disabled) { background: var(--cocpi-v2-brand-soft-strong); }