/* ==========================================================
   管制ボード (dashboard) v6.2.13 - DESIGN.md v2 準拠
   Google Workspace / Gemini 風 白基調ミニマル
   ========================================================== */

/* ヘッダーは通常フロー */
.gs-topbar { position: static !important; backdrop-filter: none !important; }

body.gs-body { background: var(--color-bg); }

.dash-wrap {
  max-width: 1500px;
  margin: 0 auto;
  padding: 20px 24px 40px;
}

/* ==========================================================
   1. コントロール行 (全要素 height:44px)
   ========================================================== */
.ctrl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ctrl-row > *,
.ctrl-row .pill-wrap > *,
.ctrl-row .toggle-wrap > *,
.ctrl-row .refresh-pill > * {
  box-sizing: border-box;
}
.ctrl-row > *,
.ctrl-row .toggle-wrap,
.ctrl-row .refresh-pill {
  height: 44px;
}
.ctrl-row .spacer { flex: 1 1 auto; height: 0; }

/* ピル型ラッパー (select / date 入力) */
.pill-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  padding: 0 16px;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--tr, 180ms);
}
.pill-wrap:hover { box-shadow: var(--shadow-2); }
.pill-wrap .pill-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.pill-wrap .pill-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.pill-wrap select,
.pill-wrap input[type="date"] {
  border: none;
  background: transparent;
  height: 100%;
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--color-text);
  outline: none;
  cursor: pointer;
  font-weight: 500;
  padding: 0;
  min-width: 0;
}
.pill-wrap input[type="date"] { min-width: 130px; }
.pill-wrap select { padding-right: 6px; }

/* 丸アイコンボタン (前日 / 翌日) */
.icon-round {
  width: 44px; height: 44px;
  border-radius: 9999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  font-family: inherit;
  transition: transform var(--tr, 180ms), box-shadow var(--tr, 180ms);
}
.icon-round:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
  color: var(--color-text);
}

/* プライマリピル「今日」: style.css の .gs-btn-primary を流用。高さだけ明示 */
.ctrl-row .gs-btn-primary {
  height: 44px;
  padding: 0 20px;
  border-radius: 9999px !important;
}

/* トグルスイッチ (ピル型ラッパー) */
.toggle-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  padding: 0 16px;
  box-shadow: var(--shadow-1);
  cursor: pointer;
  user-select: none;
}
.toggle-wrap #toggleLabel {
  font-size: 13px;
  color: var(--color-text);
  font-weight: 500;
}
.toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  display: inline-block;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--color-border);
  border-radius: 9999px;
  transition: background var(--tr, 180ms);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  left: 2px; bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--tr, 180ms);
}
.toggle-switch input:checked + .toggle-slider { background: var(--color-primary); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }

/* 自動更新インジケータ (ピル型) */
.refresh-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  padding: 0 14px;
  box-shadow: var(--shadow-1);
}
.refresh-indicator {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-green);
  flex-shrink: 0;
  transition: background var(--tr, 180ms), opacity var(--tr, 180ms);
}
.refresh-indicator.loading {
  background: var(--color-amber);
  animation: refreshPulse 0.9s ease-in-out infinite;
}
@keyframes refreshPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.refresh-pill .refresh-text {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ==========================================================
   2. サマリーカード (6枚グリッド)
   ========================================================== */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.sum-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 14px 16px 12px;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform var(--tr, 180ms), box-shadow var(--tr, 180ms);
}
.sum-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.sum-card .lbl {
  font-size: 14px;
  color: var(--color-text);
  font-weight: 700;
}
/* v6.2.17: ラベル左にアイコンを並べるヘッダー */
.sum-card .card-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}
.sum-card .card-head .card-icon {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
/* アラートカードのアイコンだけ赤（状態色として） */
.sc-alert .card-head .card-icon {
  color: var(--color-red);
}
.sum-card .num-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
  justify-content: center;
}
.sum-card .num {
  font-size: 28px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sum-card .den {
  font-size: 13px;
  color: var(--color-text-faint);
  font-weight: 500;
  margin-left: 2px;
}
.sum-card .icon { display: none; }
.sum-card.active { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* アラート: is-active 時に赤点滅 */
@keyframes alertPulse {
  0%, 100% {
    background-color: var(--color-surface);
    border-color: var(--color-border);
  }
  50% {
    background-color: #fdecec;
    border-color: rgba(197, 34, 31, 0.45);
  }
}
.sc-alert.is-active {
  animation: alertPulse 1.6s ease-in-out infinite;
}
.sc-alert.is-active .num { color: var(--color-red); }

/* v6.2.17: 未配置カードはデフォルト白。値 > 0 のときだけ .has-unassigned で薄黄色に */
.sc-unassigned { background: var(--color-surface); }
.sc-unassigned.has-unassigned { background: #fef7e0; }
/* 異常時のみアンバー文字（has-unassigned と同期。.alert-on は JS 側で併用中） */
.sc-unassigned.alert-on .num,
.sc-unassigned.has-unassigned .num { color: #b06000; }

/* 他は全て白 + 黒数字 (正常値) */

/* ==========================================================
   3. 要対応ポストバナー (JS 生成 HTML 用・v6.3.7 で「未配置 + 未確認依頼」統合)
   ========================================================== */
.unconfirmed-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fdf3f5;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
  /* v6.7.1: 既定は通知専用（無印ならクリック不可）。
     .is-clickable が付いた時のみクリック可能スタイルを上書きする。 */
  cursor: default;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
/* v6.7.1: クリック可能バナー（本日/明日への遷移トリガー） */
.unconfirmed-banner.is-clickable {
  cursor: pointer;
}
.unconfirmed-banner.is-clickable:hover {
  background: #fbe5ea;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.unconfirmed-banner.is-clickable:active {
  transform: translateY(0);
  box-shadow: none;
}
.unconfirmed-banner.is-clickable:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.unconfirmed-banner .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.unconfirmed-banner .dot.today    { background: var(--color-red); }
.unconfirmed-banner .dot.tomorrow { background: var(--color-amber); }
.unconfirmed-banner .title {
  font-size: 13px;
  color: var(--color-text);
  font-weight: 500;
}
.unconfirmed-banner .detail {
  font-size: 13px;
  color: var(--color-text-muted);
}
/* v6.7.1: クリック可能を視覚的に示す右端矢印（is-clickable のときだけ flex で右寄せ） */
.unconfirmed-banner .banner-arrow {
  margin-left: auto;
  font-size: 14px;
  color: var(--color-text-muted);
  font-weight: 600;
  transition: transform 0.15s ease, color 0.15s ease;
}
.unconfirmed-banner.is-clickable:hover .banner-arrow {
  color: var(--color-text);
  transform: translateX(2px);
}

/* ==========================================================
   4. フィルタ表示
   ========================================================== */
.filter-info {
  padding: 10px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin-bottom: 12px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.filter-info .fi-label { color: var(--color-text); }
.filter-info .fi-label strong { color: var(--color-primary); font-weight: 600; }
.filter-info .fi-clear {
  color: var(--color-primary);
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
}
.filter-info .fi-clear:hover { text-decoration: underline; }

/* ==========================================================
   5. メインレイアウト
   ========================================================== */
.main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
}
.main-side > * + * { margin-top: 16px; }

@media (max-width: 1000px) {
  .main { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .dash-wrap { padding: 16px 14px 32px; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================
   6. 現場カード (.site-card) + 隊員行 (.member-row)
   ========================================================== */
#siteList > * + * { margin-top: 16px; }

/* v6.14.1: カード上下 padding を 20→12px に縮小（一覧性向上、1 画面に多くの案件を表示）
   左右 padding 24px は維持（現場名 + 得意先名のレイアウトに影響しないよう） */
.site-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 12px 24px;
  box-shadow: var(--shadow-1);
}
/* v6.2.20: 横 1 行レイアウト
   [dot] [左: 現場名 | 時間]  ……(space-between)……  [右: 得意先名]
   v6.14.1: padding-bottom 14→8px に縮小（縦余白詰め） */
.site-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: 4px;
}
.type-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-text-faint);
  /* baseline 揃えだとドットが浮くので translateY で補正 */
  align-self: center;
}
.td-交通誘導 { background: var(--color-amber); }
.td-管制     { background: #8b5cf6; }
.td-イベント { background: var(--color-green); }
.td-施設     { background: var(--color-primary); }
.td-unknown  { background: var(--color-text-faint); }

/* 左側: 現場名 + | + 時間 */
.site-head-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.site-head-left .site-name-d {
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.site-head-left .site-head-sep {
  color: var(--color-divider);
  flex-shrink: 0;
  font-weight: 400;
}
/* v6.14.7: 管制ボードカードヘッダーのポスト名バッジ（G/D/N 等）。
   v6.14.4 の「1 案件 = N ポスト」構造を活かし、業務担当者が同じ現場の複数ポストを
   一目で識別できるようにする。色は v6.14.0 commute-badge.direct と同系統（青系）で
   視覚的統一感を確保しつつ、サイズはやや小さめに（カードヘッダー内の補助情報という位置付け）。
   設計知見 #92 関連: 週間予定表 chip の post_type 表示（青ラベル）と一貫した視覚言語。 */
.site-head-left .post-name-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #e8f0fe;
  color: #1a73e8;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  vertical-align: middle;
}
[data-theme="dark"] .site-head-left .post-name-badge {
  background: rgba(26, 115, 232, 0.18);
  color: #8ab4f8;
}
.site-head-left .site-time {
  font-size: 14px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  white-space: nowrap;
}

/* 右側: 得意先名 */
.site-head-right {
  flex-shrink: 0;
  min-width: 0;
  max-width: 45%;
}
.site-head-right .site-customer {
  font-size: 14px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
}

/* モバイル幅では縦積みに戻す（現場名が極端に短くなるのを防ぐ） */
@media (max-width: 600px) {
  .site-head {
    flex-wrap: wrap;
  }
  .site-head-right {
    max-width: 100%;
    flex-basis: 100%;
    margin-top: 2px;
  }
}

/* 隊員行 (v6.2.15: 3 カラムグリッド — 氏名 / ステップ / ⋯メニュー)
   アバター除去、単一ステータス → 4 ステップ横並び
   v6.14.1: padding 10→6px に縮小（縦余白詰め、1 画面に 4 件以上表示）。
            grid gap 14px は維持（氏名・ステップ・メニューの横方向余白は変更不要）。 */
/* v6.16.7-hotfix.1: 名前カラム幅を 140px → 240px に拡張。
   v6.16.7 で .name 内に planned-departure-text（「出発：07:00」90px 相当）を
   追加した結果、140px に名前 + バッジ + planned が収まらず、テキストが ellipsis で
   切れる + バッジ X 座標がスタッフ行ごとにズレる UI 問題が発生したため。
   240px = staff-name 96px + バッジ + planned + 余白 を内包する固定幅。 */
/* v6.16.9-hotfix.1: 240px → 340px に拡張（+94px = pill cell 80px + staff-name 拡張 14px）。
   v6.16.9 で .name flex に support-pill-cell 80px を追加 + staff-name を 96→110px に拡張した結果、
   240px の親列を超過 → margin-left: auto が効かず planned-departure-text が overflow して
   column 2 の「前日確認」と重なる副作用が発覚（信介氏動作確認）。
   親 grid 列幅を子要素の固定幅増加分だけ拡張することで:
     - margin-left: auto による右詰めが復活
     - margin-right: 32px による column 2 との視覚的距離も復活
     - v6.16.7-hotfix.3「最低距離 16px 保証」も間接的に復活
   設計知見「列幅増加は親 grid 列幅とセットで考える」確立（フロント実装チェックリスト候補）。 */
.member-row {
  display: grid;
  grid-template-columns: 340px 1fr 32px;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-divider);
  background: transparent;
}
.member-row:last-child { border-bottom: none; }

/* 氏名カラム (grid 1 カラム目) — flex で要素を整列、ellipsis 系は内部 .staff-name に移譲 */
.member-row > .name {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  overflow: visible;
  white-space: nowrap;
}
/* v6.16.7-hotfix.1: スタッフ名固定幅 — 名前長に関係なく後続バッジ位置を統一 */
/* v6.16.9: 96px → 110px に拡張（応援拠点バッジ列追加に伴う名前縦揃え調整、信介氏判断 4 案 1）。 */
.member-row .staff-name {
  flex: 0 0 110px;
  width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* v6.16.9: 応援拠点バッジ列（責任の二軸分離 — 監視責任は依頼元拠点）。
   .support-pill-cell は 80px 固定の中央寄せセル。バッジ無し行（自拠点スタッフ）は空 cell で
   枠だけ確保し、staff-name の X 座標を全行で縦揃え（信介氏判断 4「名前縦揃え」）。
   配色は syukan.css の support-prefix とは別系統のピル型バッジ（業務担当者判断 4 案 1）。
   data-dept で部署 ID（int）を識別 — Japanese class 名を回避し、新拠点追加時の保守性を確保。 */
.member-row .support-pill-cell {
  flex: 0 0 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.member-row .support-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
  /* デフォルト配色（id 未マッチ時のフォールバック） */
  background: #F1EFE8;
  color: #444441;
}
/* 拠点別配色（信介氏判断 4 案 1: 久留米=紫 / 宗像=緑 / 下関=橙）。
   data-dept は int（departments.id）— 1=本社 / 2=久留米 / 3=宗像 / 4=下関。 */
.member-row .support-pill[data-dept="2"] { background: #EEEDFE; color: #3C3489; } /* 久留米 */
.member-row .support-pill[data-dept="3"] { background: #E1F5EE; color: #085041; } /* 宗像   */
.member-row .support-pill[data-dept="4"] { background: #FAECE7; color: #712B13; } /* 下関   */
/* ダークモード（v6.16.7 hotfix.2 のホバー色パターンと整合、800 番台 bg + 100 番台 text） */
[data-theme="dark"] .member-row .support-pill {
  background: #2a2a2a;
  color: #b8b3a8;
}
[data-theme="dark"] .member-row .support-pill[data-dept="2"] { background: #3C3489; color: #CECBF6; }
[data-theme="dark"] .member-row .support-pill[data-dept="3"] { background: #085041; color: #9FE1CB; }
[data-theme="dark"] .member-row .support-pill[data-dept="4"] { background: #712B13; color: #F5C4B3; }

/* ステップ群の親 (grid 2 カラム目) */
.member-row .steps {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* 個別ステップ */
.member-row .step {
  display: flex;
  align-items: center;
  gap: 6px;
}
.member-row .step .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.member-row .step .label {
  font-size: 11px;
  color: var(--color-text-muted);
}
.member-row .step .time {
  font-size: 12px;
  color: var(--color-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* 状態別: is-done (青) / is-current (緑) / is-pending (薄グレー) */
.member-row .step.is-done    .dot { background: var(--color-primary); }
.member-row .step.is-current .dot { background: var(--color-green); }
.member-row .step.is-pending { opacity: 0.35; }
.member-row .step.is-pending .dot  { background: var(--color-text-faint); }
.member-row .step.is-pending .time { color: var(--color-text-faint); font-weight: 400; }

/* v6.3.1: 途中交代の新 assignment は前日確認・出発が N/A (適用外)。
   is-pending (─) と区別するため、薄色 + イタリック + ドット二重線で表示 */
.member-row .step.is-na { opacity: 0.5; }
.member-row .step.is-na .dot {
  background: transparent;
  border: 1px dashed var(--color-divider);
  box-sizing: border-box;
}
.member-row .step.is-na .time {
  color: var(--color-text-faint);
  font-style: italic;
  font-weight: 400;
  font-size: 11px;
}
[data-theme="dark"] .member-row .step.is-na { opacity: 0.55; }

/* 未配置行: 3 カラム (氏名+業務種別 / ステータス / 配置ボタン) */
.member-row.unassigned {
  grid-template-columns: 140px 1fr 60px;
}
.member-row.unassigned .name-main {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
}
.member-row.unassigned .name-sub {
  font-size: 11px;
  color: var(--color-text-faint);
  margin-top: 2px;
}
.member-row.unassigned .status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text);
}
.member-row.unassigned .status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-amber);
  flex-shrink: 0;
}
.member-row.unassigned .btn-assign {
  height: 28px;
  padding: 0 12px;
  border-radius: 9999px;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  justify-self: start;
  font-family: inherit;
  transition: background var(--tr, 180ms);
}
.member-row.unassigned .btn-assign:hover {
  background: var(--color-primary-soft);
}

/* タイムライン用 status-dot (renderTimeline が出力する) */
.timeline .status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-text-faint);
  display: inline-block;
}
.timeline .sd-on_duty    { background: var(--color-green); }
.timeline .sd-departed   { background: var(--color-primary); }
.timeline .sd-confirmed  { background: var(--color-primary); }
.timeline .sd-no_confirm { background: var(--color-red); }
.timeline .sd-completed  { background: var(--color-green); }

/* ⋯メニューボタン */
.row-menu {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-faint);
  font-size: 16px;
  line-height: 1;
  font-family: inherit;
  transition: background var(--tr, 180ms), color var(--tr, 180ms);
  justify-self: center;
}
.row-menu:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

/* 行フラッシュ (SSE 更新時) */
@keyframes flashHighlight {
  0%   { background-color: rgba(242, 153, 0, 0.18); }
  100% { background-color: transparent; }
}
.member-row.highlight-flash {
  animation: flashHighlight 3s ease-out;
  border-radius: 8px;
}

/* v6.2.23: アラート対象行のピンク背景ハイライト
   （未確認バナーと同じ #fdf3f5。divider 線が埋もれるため境界色を透明化） */
.member-row.is-alert {
  background: #fdf3f5;
  border-bottom-color: transparent;
}

/* v6.16.7-hotfix.2: スタッフ行ホバー時の背景色 — 業務担当者がマウス位置の行を一目で識別。
   色 #e3f2fd は薄い水色（控えめ・目に優しい、業務時間中ずっと見るので目立ちすぎない）。
   transition で滑らかな遷移。.member-row.is-alert と同詳細度のため、ソース順で後勝ち
   + 複合セレクタ（.is-alert:hover）で一時的に水色に上書きし、ホバー解除で元の状態色に戻る。
   設計知見「業務担当者の認知単位を尊重」継続応用（v6.15.4 / v6.16.5 / v6.16.7 系譜）。 */
.member-row {
  transition: background-color 0.15s ease-in-out;
}
.member-row:hover,
.member-row.is-alert:hover,
.member-row.relieved-out:hover,
.member-row.relieved-in:hover {
  background-color: #e3f2fd;
  cursor: default;
}
[data-theme="dark"] .member-row:hover,
[data-theme="dark"] .member-row.is-alert:hover,
[data-theme="dark"] .member-row.relieved-out:hover,
[data-theme="dark"] .member-row.relieved-in:hover {
  background-color: rgba(33, 150, 243, 0.12);
}

/* v6.3.0: 途中交代の表示 */
/*  元 (交代下番済み) はグレーアウトで視覚的に下番済みと分かるように */
.member-row.relieved-out {
  opacity: 0.65;
}
/*  新 (途中上番) は通常表示のまま */
.member-row.relieved-in { /* no extra styles */ }
/*  交代バッジ（隊員名の横に小ピル） */
.member-row .handover-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 8px;
  vertical-align: middle;
}
.member-row .handover-badge.out {
  background: rgba(242, 153, 0, 0.12);
  color: #b06000;
}
.member-row .handover-badge.in {
  background: rgba(24, 128, 56, 0.10);
  color: #188038;
}
[data-theme="dark"] .member-row .handover-badge.out {
  background: rgba(242, 153, 0, 0.18);
  color: #f29900;
}
[data-theme="dark"] .member-row .handover-badge.in {
  background: rgba(24, 128, 56, 0.18);
  color: #5bb974;
}
/* v6.3.9: 「未依頼」バッジ (assignments.status='draft' の配置)
   既存の .handover-badge 基底スタイル（padding / border-radius / font-size）を流用し、
   色だけアンバー系（交代下番と同系統）で draft 状態の警告性を表現。
   途中交代（relieved_by/relieved_from）とは状態排他のため同時には出ない。 */
.member-row .handover-badge.draft {
  background: rgba(242, 153, 0, 0.12);
  color: #b06000;
}
[data-theme="dark"] .member-row .handover-badge.draft {
  background: rgba(242, 153, 0, 0.18);
  color: #f29900;
}
/* v6.7.0: 「依頼中」バッジ (assignments.status='planned' AND ok_status='pending' の配置)
   確認依頼送信済だが OK/NG 返答がまだ無い状態。
   draft（アンバー警告）より緊急度は低いが進行中であることを青系で示す。
   draft / 途中交代とは状態排他のため同時には出ない。 */
.member-row .handover-badge.pending {
  background: rgba(26, 115, 232, 0.12);
  color: #0b5394;
}
[data-theme="dark"] .member-row .handover-badge.pending {
  background: rgba(138, 180, 248, 0.18);
  color: #8ab4f8;
}
/* v6.14.0: 直行/集合バッジ（前日確認済みのみ表示）
   設計知見 #92「同じ情報を文脈に応じて異なる視覚言語で表現する」— 管制ボードでは 2 文字バッジ
   （週間予定表 chip の青枠とは別の視覚言語、業務サマリ的視点）。
   設計知見 #114 拡張 7 例目「業務統制を要する変更操作」の付随表示。 */
.member-row .commute-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
  white-space: nowrap;
  vertical-align: middle;
  /* v6.16.7-hotfix.3: 通勤区分バッジと出発時間の最低距離 16px 保証。
     hotfix.2 の `.planned-departure-text { margin-left: auto }` は出発時間を右端固定する
     縦揃え解だが、バッジ累積幅の差で commute-badge の左端位置が行ごとに変動 →
     バッジ多い行で出発時間と通勤区分が近接する副作用が発覚（信介氏動作確認）。
     commute-badge 自身に margin-right: 16px を持たせることで、auto による右詰めの中でも
     commute-badge と planned-departure-text の間に必ず 16px の余白を確保する。
     v3 仕様「通勤区分との距離 16px」の精神を「最低距離保証」として復活、hotfix.2 の縦揃えと両立。
     設計知見「段階的改善ループの 4 段階目」（v6.16.7 → hotfix.1 → hotfix.2 → hotfix.3）。 */
  margin-right: 16px;
}
.member-row .commute-badge.direct {
  background: var(--color-primary, #1a73e8);
  color: #fff;
}
.member-row .commute-badge.gather {
  background: #f1f3f4;
  color: #5f6368;
  border: 1px solid var(--color-divider, rgba(60,64,67,.10));
}
[data-theme="dark"] .member-row .commute-badge.direct {
  background: var(--color-primary, #1a73e8);
  color: #fff;
}
[data-theme="dark"] .member-row .commute-badge.gather {
  background: rgba(95, 99, 104, 0.30);
  color: #bdc1c6;
  border-color: rgba(255,255,255,0.10);
}
/* v6.16.7: 出発予定時間テキスト（v3 確定デザイン）
   通勤区分バッジの右側に配置、装飾なしのテキストのみ。
   登録済 → 濃いめのグレー / 未登録 → 薄いグレー「出発：—」。
   margin-left: 16px は通勤区分バッジ（または直前要素）との距離。
   margin-right: 32px は次カラム（.steps = 前日確認）との視覚的距離。
   設計知見「業務担当者の認知単位を尊重」（予定 vs 実績の比較で管制業務）。 */
.member-row .planned-departure-text {
  /* v6.16.7-hotfix.2: margin-left を 16px → auto に変更し、出発時間を .name flex 親の右端に詰める。
     v6.16.7-hotfix.1 でも、各行で表示されるバッジの種類・個数（handover/draft/pending/commute）
     が異なるため、出発時間の X 座標が行ごとに数 px〜十数 px ズレていた（信介氏スクショ観察 — 石田 操）。
     auto で残りスペースを左マージンに割り当てることで、staff-name 96px が固定 +
     planned-departure-text が grid カラム右端固定（margin-right: 32px 維持）= 全行で X 座標統一。
     v3 仕様「通勤区分との距離 16px」は「16px 以上」に緩和（バッジ少ない行ほど距離大）、
     業務担当者の「揃える」要望を優先（信介氏判断）。 */
  margin-left: auto;
  margin-right: 32px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  vertical-align: middle;
  /* v6.16.7-hotfix.1: flex 親（.name）内で縮小されないよう固定 — ellipsis でテキスト切れ防止 */
  flex-shrink: 0;
}
.member-row .planned-departure-text.has-value {
  color: #424242;
}
.member-row .planned-departure-text.no-value {
  color: #c7c7cc;
}
[data-theme="dark"] .member-row .planned-departure-text.has-value {
  color: #e8eaed;
}
[data-theme="dark"] .member-row .planned-departure-text.no-value {
  color: rgba(255, 255, 255, 0.30);
}
/* アラート連続時も隣接行の区切りは .divider 側に任せる。
   一時的な .highlight-flash は .is-alert より優先される（アニメーションの方が動的） */

/* ==========================================================
   7. サイドパネル共通
   ========================================================== */
.side-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: var(--shadow-1);
}
.panel-head {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 12px;
}
.panel-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.panel-head-row .panel-head { margin-bottom: 0; }
.panel-count {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ==========================================================
   8. アラートパネル
   ========================================================== */
.side-panel.alerts { border-color: var(--color-border); }
.alert-row {
  padding: 12px;
  border-radius: 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  margin-bottom: 10px;
  cursor: pointer;
  transition: background var(--tr, 180ms), border-color var(--tr, 180ms);
}
.alert-row:last-child { margin-bottom: 0; }
.alert-row:hover { background: var(--color-surface-3); }
.alert-row .nm {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.alert-row .nm::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.alert-row.alert-no .nm::before       { background: var(--color-red); }
.alert-row.alert-wait .nm::before     { background: var(--color-amber); }
.alert-row.alert-past .nm::before     { background: var(--color-red); }
.alert-row.alert-tomorrow .nm::before { background: var(--color-amber); }
.alert-row .msg {
  font-size: 11px;
  color: var(--color-text-muted);
  padding-left: 14px;
  line-height: 1.4;
}
.alert-row.alert-tomorrow { cursor: default; }
.alert-section-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 12px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-divider);
}
.alert-section-head:first-child { margin-top: 0; }

/* ==========================================================
   9. 配置サマリー (行リスト)
   ========================================================== */
.summary-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sum-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sum-row .label {
  font-size: 12px;
  color: var(--color-text-muted);
}
.sum-row .label-with-dot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.sum-row .label-with-dot .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
}
.sum-row .label-with-dot .dot.green   { background: var(--color-green); }
.sum-row .label-with-dot .dot.primary { background: var(--color-primary); }
.sum-row .label-with-dot .dot.red     { background: var(--color-red); }
.sum-row .value {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.summary-rows .divider {
  height: 1px;
  background: var(--color-divider);
}

/* ==========================================================
   10. タイムライン
   ========================================================== */
.timeline {
  max-height: 400px;
  overflow-y: auto;
}
.tl-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0 8px 4px;
  font-size: 12px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-divider);
}
.tl-row:last-child { border-bottom: none; }
/* v6.2.17: 時刻→主語→補足行 構造 */
.tl-row .tl-body {
  flex: 1;
  min-width: 0;
}
.tl-row .tl-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}
.tl-row .tl-time {
  font-size: 11px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  width: auto;
  flex-shrink: 0;
}
.tl-row .tl-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
}
.tl-row .tl-meta {
  font-size: 11px;
  color: var(--color-text-faint);
  margin-top: 2px;
}
/* v6.2.18: タイムライン代理報告バッジ */
.tl-row .tl-badge-proxy {
  font-size: 10px;
  color: #b06000;
  background: rgba(242, 153, 0, 0.14);
  padding: 1px 6px;
  border-radius: 9999px;
  font-weight: 600;
  line-height: 1.4;
  flex-shrink: 0;
}
/* v6.2.18: 代理報告行のドットをアンバー二重枠で強調 */
.tl-row.is-proxy .status-dot {
  outline: 1.5px solid var(--color-amber);
  outline-offset: 1px;
}
/* v6.2.15: タイムライン用 .status-dot は §6 のメンバー行セクションで定義済 */

/* v6.27.1: タイムライン取消バッジ + 取消行装飾（proxy 系と並列、設計知見 #92） */
/*   .tl-badge-cancel: 取消ログ本体のグレー系ピル */
/*   .tl-row.is-cancel: 取消ログ行全体の弱表示 */
/*   .tl-badge-cancelled-source: 取り消された元ログの「取消済」バッジ */
/*   .tl-row.is-cancelled-source: 元ログを打ち消し風に表示 */
/*   ダークモードは var(--color-text-muted/faint) が style.css で切り替わるため自動対応 */
.tl-row .tl-badge-cancel {
  font-size: 10px;
  color: var(--color-text-muted);
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 6px;
  border-radius: 9999px;
  font-weight: 600;
  line-height: 1.4;
  flex-shrink: 0;
}
.tl-row.is-cancel .status-dot {
  outline: 1.5px solid var(--color-text-muted);
  outline-offset: 1px;
  opacity: 0.7;
}
.tl-row.is-cancel {
  opacity: 0.85;
}
.tl-row .tl-badge-cancelled-source {
  font-size: 10px;
  color: var(--color-text-muted);
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 6px;
  border-radius: 9999px;
  font-weight: 600;
  line-height: 1.4;
  flex-shrink: 0;
}
.tl-row.is-cancelled-source .tl-title {
  text-decoration: line-through;
  color: var(--color-text-muted);
}
.tl-row.is-cancelled-source .tl-time {
  color: var(--color-text-faint);
}
.tl-row.is-cancelled-source .status-dot {
  opacity: 0.45;
}
/* ダークモード: rgba(0,0,0,...) 背景はダーク背景で見えにくいため、白系に切り替え */
[data-theme="dark"] .tl-row .tl-badge-cancel {
  background: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] .tl-row .tl-badge-cancelled-source {
  background: rgba(255, 255, 255, 0.06);
}

/* v6.28.0: タイムライン用ポスト名バッジ（.post-name-badge のサイズ落とし版）
   設計知見 #92「水平展開」: カードヘッダー (v6.14.7) → タイムライン (v6.28.0) 3 例目並列展開
   設計知見 #140 の正しい解消パターン（設計知見 #143）
   業務担当者試験運用 段階 27「全ログにポスト名を記載」要望への対応 */
.tl-row .tl-badge-post {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 9999px;
  background: #e8f0fe;
  color: #1a73e8;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: 4px;
}
[data-theme="dark"] .tl-row .tl-badge-post {
  background: rgba(26, 115, 232, 0.18);
  color: #8ab4f8;
}

/* ==========================================================
   11. モーダル (cc-overlay + cc-box)
   ========================================================== */
.cc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
.cc-overlay.active { display: flex; }
.cc-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-2);
}
.cc-title {
  font-size: var(--text-base, 16px);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 14px;
}
.cc-line {
  font-size: 13px;
  color: var(--color-text);
  margin-bottom: 10px;
  line-height: 1.6;
}
.cc-time {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}
.cc-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}
.cc-hint {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 8px;
}
.cc-reason,
.cc-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  box-sizing: border-box;
}
.cc-reason {
  min-height: 68px;
  resize: vertical;
}
.cc-reason:focus,
.cc-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.18);
}
.cc-input-time { width: 140px; font-variant-numeric: tabular-nums; }
.cc-list {
  max-height: 340px;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin: 10px 0 4px;
}
.cc-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.cc-actions .gs-btn,
.cc-actions .gs-btn-pill,
.cc-actions .gs-btn-primary,
.cc-actions .gs-btn-danger {
  height: 40px !important;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  font-size: var(--text-sm) !important;
}

/* 代理報告モーダル固有 */
.pr-warning {
  font-size: 12px;
  color: #b06000;
  background: rgba(242, 153, 0, 0.10);
  border: 1px solid rgba(242, 153, 0, 0.25);
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}
.pr-preset-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.pr-preset-btns button {
  padding: 6px 14px;
  border-radius: 9999px;
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--tr, 180ms);
}
.pr-preset-btns button:hover {
  background: var(--color-primary-soft);
}

/* ==========================================================
   12. ドロップダウンメニュー (⋯ から)
   ========================================================== */
.job-menu-dropdown {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-2);
  z-index: 900;
  min-width: 180px;
  overflow: hidden;
  padding: 4px 0;
}
.job-menu-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--tr, 180ms);
}
.job-menu-dropdown button:hover {
  background: var(--color-surface-2);
}
.job-menu-dropdown button.danger { color: var(--color-red); }
.job-menu-dropdown button.danger:hover { background: rgba(197, 34, 31, 0.08); }

/* ==========================================================
   13. 共通: 空状態
   ========================================================== */
.empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: 30px 20px;
  font-size: 13px;
  background: var(--color-surface-2);
  border-radius: 12px;
}

/* ==========================================================
   14. ダークモード微調整
   ========================================================== */
[data-theme="dark"] .sc-unassigned {
  background: var(--color-surface);
}
[data-theme="dark"] .sc-unassigned.has-unassigned {
  background: rgba(242, 153, 0, 0.12);
}
[data-theme="dark"] .unconfirmed-banner {
  background: rgba(197, 34, 31, 0.12);
}
/* v6.7.1: ダークモード hover */
[data-theme="dark"] .unconfirmed-banner.is-clickable:hover {
  background: rgba(197, 34, 31, 0.20);
}
/* v6.2.23: アラート行のピンクはダークでも視認できるよう半透明赤に調整 */
[data-theme="dark"] .member-row.is-alert {
  background: rgba(197, 34, 31, 0.12);
}
[data-theme="dark"] @keyframes alertPulse {
  0%, 100% {
    background-color: var(--color-surface);
    border-color: var(--color-border);
  }
  50% {
    background-color: rgba(197, 34, 31, 0.22);
    border-color: rgba(197, 34, 31, 0.55);
  }
}

/* v6.16.6: 代理報告モーダル「直行/集合」2 択ピルボタン
   本人前日確認モーダル ([attendance.css](public/css/kansei/attendance.css#L269) v6.14.0) と並列定義。
   設計知見 #92「水平展開は意図された複製」適用 — attendance.css 側完全無変更で
   影響範囲を dashboard.css 内に局所化。 */
.cd-commute-toggle {
  display: flex;
  gap: 8px;
  margin: 4px 0 0 0;
}
.cd-commute-btn {
  flex: 1;
  height: 44px;
  padding: 0 16px;
  border-radius: 9999px;
  background: var(--color-surface, #fff);
  color: var(--color-text, #202124);
  border: 1px solid var(--color-border, rgba(60,64,67,.20));
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 180ms, color 180ms, border-color 180ms;
  font-family: inherit;
}
.cd-commute-btn:hover {
  background: var(--color-surface-2, #f8f9fa);
}
.cd-commute-btn.is-selected {
  background: var(--color-primary, #1a73e8);
  color: #fff;
  border-color: var(--color-primary, #1a73e8);
}
.cd-commute-btn:focus-visible {
  outline: 2px solid var(--color-primary, #1a73e8);
  outline-offset: 2px;
}