/* v6.441.0: 案件の「中止」「上番中止」ダイアログ（3 画面が共有する 1 つの部品）
   ⚠️ **新しい色の値は 1 つも足していない**（すべて style.css のトークンを参照）。
   外枠は共通の .gs-modal-overlay / .gs-modal（#92 書き写さない）。ここは中身の並びだけ。
   v6.442.0-fb2: .jcd-label / .jcd-hint / .jcd-people（影響する人）/ .jcd-warn（注意枠）は
   **削除ダイアログ（#jobDeleteDialog・job-delete-dialog.js）と共有**するため #jobCancelDialog のスコープを外した。
   種別（.jcd-kinds）と .jcd-who は中止だけのものなのでスコープのまま。 */

/* ⚠️ 表示制御は .is-hidden の複合セレクタ + ソース順で後置（#96・inline display:none は禁忌） */
.gs-modal-overlay.jcd-overlay.is-hidden { display: none; }

#jobCancelDialog .jcd-modal {
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
}

#jobCancelDialog .jcd-who {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.jcd-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 12px 0 4px;
}

/* 種別（2 択）。選択中は既存の primary トークンで示す */
#jobCancelDialog .jcd-kinds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#jobCancelDialog .jcd-kind {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 10px 10px 8px;
  cursor: pointer;
  background: var(--color-surface);
  display: block;
}
#jobCancelDialog .jcd-kind.on {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
#jobCancelDialog .jcd-kind .t {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
}
#jobCancelDialog .jcd-kind .t input { margin: 0; }
#jobCancelDialog .jcd-kind .d {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.4;
}

.jcd-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 6px;
}

/* 影響する人（中止・削除の両ダイアログで同じ見た目） */
.jcd-people {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  max-height: 180px;
  overflow-y: auto;
}
.jcd-people li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-divider);
}
.jcd-people li:last-child { border-bottom: none; }
.jcd-empty { color: var(--color-text-faint); padding: 6px 0; }
.jcd-rep-none { color: var(--color-text-faint); }
.jcd-rep-done { color: var(--color-green); }
/* v6.444.0-fb1: 状態列の OK 4 状態。⚠️ 新しい色の値は足していない = 既存の語を持つ画面と同じ色:
   OK済み = 緑（--color-green・OK管理 .ok-status-badge.ok と同じ #188038）
   NG     = 赤（--color-red・OK管理 .ok-status-badge.ng と同じ #c5221f）
   依頼中 = 青（管制ボード .handover-badge.pending の #0b5394・ダークは #8ab4f8 = --color-primary）
   未依頼 = 琥珀（管制ボード .handover-badge.draft と .gs-badge.amber の #b06000・ダークは #f29900 = --color-amber） */
.jcd-rep-ok      { color: var(--color-green); }
.jcd-rep-ng      { color: var(--color-red); }
.jcd-rep-pending { color: #0b5394; }
.jcd-rep-draft   { color: #b06000; }
[data-theme="dark"] .jcd-rep-pending { color: var(--color-primary); }
[data-theme="dark"] .jcd-rep-draft   { color: var(--color-amber); }
/* 応援バッジ（既存 .gs-badge をこの並びに収めるための寸法だけ） */
.gs-badge.jcd-mini { height: 18px; font-size: 10px; padding: 0 6px; }

/* 注意文（左のドットは amber。既存 .gs-note 相当の見た目を踏襲・中止・削除の両ダイアログで同じ） */
.jcd-warn {
  position: relative;
  background: var(--color-surface-2);
  border-radius: 10px;
  padding: 10px 12px 10px 20px;
  font-size: var(--text-xs);
  margin-top: 12px;
  line-height: 1.5;
}
.jcd-warn::before {
  content: "";
  position: absolute;
  left: 8px; top: 14px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-amber);
}

/* v6.444.0: 「スタッフチャットで通知する（N 名）」のチェック（中止・取り消しの両ダイアログで同じ見た目）
   ⚠️ 新しい色の値は足していない（文字色は継承・チェックはブラウザ既定）。 */
.jcd-notify {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: var(--text-sm);
  cursor: pointer;
}
.jcd-notify input { margin: 0; }
/* N = 0 のときの 1 行（.jcd-hint の色・大きさのまま、余白だけチェックと揃える） */
.jcd-hint.jcd-notify-none { margin-top: 10px; }

#jobCancelDialog .jcd-btns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

@media (max-width: 600px) {
  /* 狭い画面では種別を縦に積む（2 列だと説明文が 3 行になって読めない） */
  #jobCancelDialog .jcd-kinds { grid-template-columns: 1fr; }
}