/* v6.351.0: 配置 1 件の報告履歴モーダル 専用 CSS。
 *
 * 【共通ファイルにした理由（#92）】
 *   管制ボード（dashboard.html）と報告完了一覧（completed-reports.html）の 2 画面が同じモーダルを出す。
 *   画面ごとに CSS を複製すると片方だけ直る事故になるので、最初から 1 本にして両方が同一参照する。
 *   後で現場シフト表・週間予定表へ広げるときも <link> を 1 行足すだけで済む。
 *
 * 【クラス接頭辞は .rh-】DESIGN.md §8 に従い共通 .gs-modal-overlay は使わない
 *   （.gs-modal-overlay は z-index 100 固定で、管制ボードの既存モーダル群と重なり順を競合させるため）。
 *
 * 【色はすべて CSS 変数】承認済みサンプル docs/samples/kansei_assignment_history_modal_sample.html の
 *   リテラル 4 色（#bdc1c6 / #dadce0 / #8a5500 / #c4c8cc）は style.css に同等の変数が無いため、
 *   このファイル冒頭のローカル変数にまとめる（DESIGN.md の「リテラル直書き禁止」を満たす）。
 *   ダークモードはこのローカル変数を差し替えるだけで済む。
 */
.rh-overlay {
  /* ローカル変数（サンプルのリテラル色をここに集約） */
  --rh-dot-gray: #bdc1c6;      /* 情報系ドット（依頼・取り消された報告） */
  --rh-dot-open: #dadce0;      /* 未報告の白抜き丸の枠線 */
  --rh-pill-proxy-fg: #8a5500; /* 「代理」ピルの文字（--color-amber より暗く可読性を確保） */
  --rh-pending-time: #c4c8cc;  /* 未報告行の時刻（本文より薄い） */

  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .4);
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  /* z-index は管制ボードの既存モーダル（#cancelModal 等）と同じ層に置く。
     ⚠️ 新しい値を発明しない（css-ui.md の z-index 階層表に従う）。 */
  z-index: 1000;
}
.rh-overlay.is-open { display: flex; }

.rh-modal {
  width: 560px; max-width: 100%;
  max-height: calc(100vh - 40px);
  background: var(--color-surface);
  border-radius: 16px;
  box-shadow: var(--shadow-2);
  overflow: hidden;
  display: flex; flex-direction: column;
  font-family: inherit;
}

/* ---- ヘッダー ---- */
.rh-head { display: flex; align-items: flex-start; gap: 10px; padding: 20px 22px 14px; flex: none; }
/* ⚠️ flex の子は既定 min-width:auto。長い現場名で親を押し広げないよう 0 を明示する。 */
.rh-head-main { flex: 1; min-width: 0; }
.rh-title { font-size: 15px; font-weight: 600; margin: 0 0 8px; color: var(--color-text); }
.rh-target-name { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--color-text); }
.rh-target-sub { font-size: 12.5px; color: var(--color-text-muted); margin-top: 2px; }
.rh-target-sub .rh-sep { color: var(--color-text-faint); margin: 0 6px; }
.rh-close {
  flex: none; width: 32px; height: 32px; border: none; background: transparent;
  border-radius: 50%; cursor: pointer; color: var(--color-text-muted);
  font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center;
  font-family: inherit;
}
.rh-close:hover { background: var(--color-surface-2); }

/* ---- 本文（スクロール域） ---- */
.rh-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0 22px 4px;
  border-top: 1px solid var(--color-divider);
}
.rh-empty { padding: 28px 0; text-align: center; font-size: 13px; color: var(--color-text-muted); }

/* 日付ヘッダ（sticky） */
.rh-date {
  position: sticky; top: 0; z-index: 2;
  background: var(--color-surface);
  padding: 14px 0 6px;
  font-size: 12px; font-weight: 600; color: var(--color-text-muted);
}

/* ---- 1 行 ---- */
.rh-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 5px 0;   /* v6.358.0: 1 行組みにしたので 8px → 5px（縦幅の圧縮） */
  border-bottom: 1px solid var(--color-divider);
}
.rh-row:last-child { border-bottom: none; }
.rh-time {
  flex: none; width: 40px;
  font-size: 12.5px; color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.rh-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  margin-top: 7px; background: var(--color-text-faint);
}
.rh-dot.is-green { background: var(--color-green); }
.rh-dot.is-red   { background: var(--color-red); }
.rh-dot.is-amber { background: var(--color-amber); }
.rh-dot.is-gray  { background: var(--rh-dot-gray); }
.rh-dot.is-open  { background: transparent; border: 1.5px solid var(--rh-dot-open); width: 9px; height: 9px; margin-top: 6px; }

/* ⚠️ ここも min-width:0（長い理由テキストで横スクロールを出さない） */
.rh-main { flex: 1; min-width: 0; }

/* v6.358.0: 1 行組み `動作：対象者［ピル］実行者`。
   承認済みサンプル docs/samples/report_history_modal_compact_a_revised.html 準拠。
   ⚠️ **折り返しを許す**（省略記号で切らない）。切ると「誰の記録か分からない」が起きるため
     （信介さん確定）。長い氏名・長い動作名は 2 行に流れてよい。 */
.rh-line {
  font-size: 13.5px; line-height: 1.55;
  color: var(--color-text);
  min-width: 0;                 /* flex の子。長い名前で親を押し広げない */
  word-break: break-word;       /* 折り返しは許す（横スクロールは出さない） */
}
.rh-act { font-weight: 500; color: var(--color-text); }
.rh-colon { color: var(--color-text-faint); margin: 0 1px; }
.rh-name { color: var(--color-text); }
.rh-op { color: var(--color-text-muted); }
.rh-prev { color: var(--color-text-faint); font-size: 11.5px; margin-left: 3px; }
.rh-detail { font-size: 12px; color: var(--color-text-faint); margin-top: 1px; word-break: break-word; }

/* 取り消された報告（取り消し線・薄く）。
   ⚠️ 取り消し線は**動作名と対象者名**に掛ける（fb1〜fb3 で確定した挙動を 1 行組みでも維持）。 */
/* v6.362.0: `.rh-colon` を追加。取消行に**対象者名を出すようにした**結果、
   `動作：対象者` の「：」だけ取り消し線が途切れて見えるようになったため
   （従来は取消行に名前が無く「：」自体が出ていなかったので未考慮だった）。
   ⚠️ このセレクタが効くのは `.is-voided` の行だけ＝生きている報告行の見た目は不変。 */
.rh-row.is-voided .rh-act,
.rh-row.is-voided .rh-colon,
.rh-row.is-voided .rh-name { text-decoration: line-through; color: var(--color-text-faint); font-weight: 400; }
.rh-row.is-voided .rh-op,
.rh-row.is-voided .rh-detail { color: var(--color-text-faint); }

/* ---- 未報告（v6.351.0-fb1: 時系列から外し末尾の独立セクションへ） ----
   予定時刻は時系列上の点ではないので、時刻カラムを使わず右端に予定の表記を置く
   （「出発予定なし」が時刻カラムに入って崩れる問題も同時に解消）。 */
.rh-pending-section { margin: 14px 0 4px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.rh-pending-head { font-size: 12px; font-weight: 600; color: var(--color-text-muted); margin-bottom: 2px; }
.rh-row.is-pending .rh-act { color: var(--color-text-faint); font-weight: 400; }
.rh-sched {
  flex: none; font-size: 12px; color: var(--rh-pending-time);
  font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 2px;
}

/* 小さいピル（代理 / 本人）。色は塗らず枠線だけ（DESIGN.md: 行やカードを塗らない） */
.rh-pill {
  /* v6.358.0: 1 行組みで「対象者［ピル］実行者」と並ぶので、左右に等しく余白を取る
     （旧: margin-left のみ。ピルの右にすぐ実行者名が来るため右余白が要る）。 */
  display: inline-block; margin: 0 5px;
  padding: 0 7px; height: 17px; line-height: 17px;
  border-radius: 9999px;
  font-size: 10.5px; font-weight: 500;
  border: 1px solid rgba(242, 153, 0, .35);
  color: var(--rh-pill-proxy-fg); background: transparent;
  vertical-align: 1px;
}
.rh-pill.is-self { border-color: var(--color-border); color: var(--color-text-muted); }

/* ---- 区切り行（差し替え・引き継ぎ） ---- */
.rh-break {
  margin: 10px 0; padding: 9px 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.rh-break-text { font-size: 12.5px; color: var(--color-text); font-weight: 500; word-break: break-word; }
.rh-break-arrow { color: var(--color-text-faint); margin: 0 5px; }
.rh-break-by { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }

/* ---- フッター ---- */
.rh-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--color-divider);
  flex: none;
}
.rh-btn {
  height: 36px; padding: 0 20px; border-radius: 9999px;   /* DESIGN.md: 全ボタンピル型 */
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text); font-size: 13.5px; font-family: inherit;
  cursor: pointer; box-shadow: var(--shadow-1);
}
.rh-btn:hover { background: var(--color-surface-2); }

/* ---- スマホ（412px で横スクロールを出さない） ---- */
@media (max-width: 520px) {
  .rh-overlay { padding: 10px; }
  .rh-modal { max-height: calc(100vh - 20px); }
  .rh-time { width: 36px; font-size: 12px; }
  .rh-head { padding: 16px 16px 12px; }
  .rh-body { padding: 0 16px 4px; }
  .rh-foot { padding: 12px 16px 16px; }
}

/* ---- ダークモード（ローカル変数の差し替えのみ） ---- */
[data-theme="dark"] .rh-overlay {
  --rh-dot-gray: #5f6368;
  --rh-dot-open: #5f6368;
  --rh-pill-proxy-fg: #f5b95c;
  --rh-pending-time: #5f6368;
}

/* ==========================================================================
   v6.359.0: 一覧行から 1 手で開く時計アイコン（PC 描画の行内・3 ページ共通）
   HTML は report-history-modal.js の iconButtonHtml() が生成する（#92・1 か所）。
   承認済みサンプル docs/samples/clock_icon_placement_sample.html の `.c-clock` 準拠。

   【配置】行の並びは `.fr-next` → **`.rh-open-icon`** → `.fr-steps` → `.row-menu`。
     ⚠️ `.fr-steps` の**外**に置くこと。`.fr-steps` は dashboard.css の
     `@media (max-width:1880px)` で `display:none` になるため、中に入れると
     1880px 未満（PC 描画のまま）でアイコンごと消えて開く手段が無くなる。
     狭い画面では `.fr-steps` だけが消え、アイコンは kebab の左隣に残る。

   【余白】`margin` は付けない。`.feed-row` の `gap:14px` がそのまま効くため、
     margin を足すと二重になる（サンプルの `margin-left:10px` は gap 無しの素の HTML 用）。
   ========================================================================== */
.rh-open-icon {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* button の UA 既定を打ち消す（v6.120.0 の button.pill と同じ流儀） */
  border: none; padding: 0; background: none;
  font-family: inherit; line-height: inherit;
  color: var(--color-text-faint);
  cursor: pointer;
}
.rh-open-icon svg { width: 16px; height: 16px; }
.rh-open-icon:hover { background: var(--color-surface-3); color: var(--color-primary); }
.rh-open-icon:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }