/* ==========================================================================
   週間予定表ページ（旧名: 配置表、v6.2.24〜、v6.16.23 で haichi.css → syukan.css リネーム）
   v6.16.23: 業務名 vs DB スキーマの独立軸（DB カラム名 show_in_haichi/haichi_department_id 等は触らない、
            v6.17.x 以降検討）。試験運用中につき告知無し（公開前リリースの告知不要原則）。
   ========================================================================== */
/* ==========================================================================
   週間予定表ページ（v6.2.24〜）
   DESIGN.md §0〜§13 準拠の Google Workspace 風ミニマルデザイン。
   変数は public/css/style.css の :root / [data-theme="dark"] を参照する。
   余り/休み用の淡色背景 (--color-avail-bg / --color-off-bg) のみここで追加。
   ========================================================================== */

:root {
  --color-avail-bg: #e8f5ec;  /* 薄い緑（余り） */
  --color-off-bg: #fdecef;    /* 薄いピンク（休み） */
}
[data-theme="dark"] {
  --color-avail-bg: rgba(24,128,56,.15);
  --color-off-bg: rgba(197,34,31,.12);
}

/* ページ余白は DESIGN.md §12 「広めに」の原則をベースに、週間予定表は横幅を最大活用するため圧縮 */
.page {
  padding: 14px 12px 24px;
  max-width: none;
  margin: 0;
}

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

.loading { text-align: center; padding: 30px; color: var(--color-text-muted); }

/* ==========================================================================
   コントロールバー（ピル型ボタン横並び）
   ========================================================================== */
.ctrl-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ctrl-bar .spacer { flex: 1; }

/* ピル型ボタン共通（DESIGN.md §2-2） */
.btn-pill {
  height: 40px;
  padding: 0 16px;
  border-radius: 9999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: var(--shadow-1);
  transition: transform var(--tr, 180ms), box-shadow var(--tr, 180ms), background var(--tr, 180ms);
}
.btn-pill:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
.btn-pill:disabled, .btn-pill[disabled] {
  opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: var(--shadow-1);
}
.btn-pill.btn-lg {
  height: 44px;
  padding: 0 18px;
  font-size: 14px;
}
.btn-pill.btn-icon-only {
  width: 40px;
  padding: 0;
}
.btn-pill.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-2);
}
.btn-pill.btn-primary:hover {
  filter: brightness(1.05);
}

/* ピル型ラッパ（select / label + input など） */
.pill-wrap {
  height: 44px;
  border-radius: 9999px;
  padding: 0 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-1);
}
.pill-wrap .wrap-label {
  font-size: 12px;
  color: var(--color-text-muted);
}
.pill-wrap select,
.pill-wrap input {
  border: none;
  background: transparent;
  height: 100%;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  font-weight: 500;
  cursor: pointer;
  color: var(--color-text);
}
.pill-wrap.date-range-pill {
  height: 44px;
  padding: 0 18px;
}
.date-range-text {
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* segment（分節切替: 1日/3日/7日 / 縦/横） */
.segment {
  height: 44px;
  border-radius: 9999px;
  padding: 3px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: inline-flex;
  gap: 3px;
  box-shadow: var(--shadow-1);
}
.segment > button {
  height: 100%;
  padding: 0 14px;
  border-radius: 9999px;
  background: transparent;
  border: none;
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--tr, 180ms), color var(--tr, 180ms);
}
.segment > button:hover:not(.active) {
  background: var(--color-surface-2);
}
.segment > button.active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 500;
}

/* 最終更新インライン表示 */
.meta-info-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-right: 4px;
}

/* 編集モードボタン内のドット（閲覧時 = グレー / 編集時 = 白プライマリ背景で白ドット） */
#btnEditMode .mode-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-text-faint);
  display: inline-block;
}
body.edit-mode #btnEditMode {
  background: var(--color-primary);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-2);
}
body.edit-mode #btnEditMode .mode-dot {
  background: #fff;
  animation: hi-blink 1.2s infinite;
}
@keyframes hi-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.35; }
}

/* ==========================================================================
   日付グリッド（横表示）
   day-grid-root > day-grid > day-row (x N)
   ========================================================================== */
.day-grid {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.day-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 210px 210px;
  border-bottom: 1px solid var(--color-divider);
  min-height: 90px;
}
.day-row:last-child { border-bottom: none; }

/* 日付セル */
.date-cell {
  padding: 10px 12px;
  border-right: 1px solid var(--color-divider);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.date-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.date-num {
  font-size: 17px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.date-dow {
  font-size: 12px;
  color: var(--color-text-muted);
}
.date-cell.sat .date-num,
.date-cell.sat .date-dow { color: var(--color-primary); }
.date-cell.sun .date-num,
.date-cell.sun .date-dow { color: var(--color-red, #c5221f); }

.date-summary {
  font-size: 11px;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}
.date-summary.has-jobs {
  color: var(--color-text);
  font-weight: 500;
}
.mini-progress {
  height: 3px;
  border-radius: 9999px;
  background: var(--color-surface-3);
  overflow: hidden;
  margin-top: 2px;
}
.mini-progress > span {
  display: block;
  height: 100%;
  background: var(--color-primary);
}
.btn-date-action {
  margin-top: 4px;
  height: 28px;
  padding: 0 12px;
  border-radius: 9999px;
  background: transparent;
  border: 1px solid var(--color-border);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  align-self: flex-start;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: background var(--tr, 180ms);
}
.btn-date-action:hover:not(.disabled) {
  background: var(--color-surface-2);
}
.btn-date-action.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
/* v6.7.3: 危険操作ボタン（一括削除など） */
.btn-date-action.btn-danger {
  border-color: rgba(197, 34, 31, 0.30);
  color: var(--color-red, #c5221f);
}
.btn-date-action.btn-danger:hover:not(.disabled) {
  background: rgba(197, 34, 31, 0.06);
  border-color: rgba(197, 34, 31, 0.50);
}
/* v6.7.4: 2×2 アイコングリッド（各日の操作ボタン群）
   各日エリアの縦幅圧縮のため、4 ボタンを 2 列 × 2 行で配置。
   ボタンはアイコンのみ表示、テキストは title / aria-label のみ。
   配置順: 上段 [+ 案件追加] [📨 確認依頼] / 下段 [📋 前日コピー] [🗑 一括削除]
   危険ボタン（削除）は右下隅で誤クリック防止。 */
.day-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 4px;
  width: 100%;
  max-width: 88px; /* 2×2 が日付セル幅をはみ出さないよう上限 */
}
/* v6.7.4: アイコンのみボタン（テキスト無し・正方形寄り） */
.btn-date-action.icon-only {
  width: 100%;
  height: 28px;
  padding: 0;
  gap: 0;
  justify-content: center;
  /* align-self は親が grid なので不要（grid セル内でデフォルト stretch） */
  align-self: stretch;
}
.btn-date-action.icon-only svg {
  width: 14px;
  height: 14px;
}
/* 閲覧モードでは操作ボタン群すべて非表示（v6.7.4 で grid ラッパーごと隠す） */
body:not(.edit-mode) .btn-date-action { display: none !important; }
body:not(.edit-mode) .day-actions-grid { display: none !important; }

/* ==========================================================================
   案件エリア（テーブルセル型・160px 固定カード / v6.2.26 で 180px→160px に縮小）
   ========================================================================== */
.jobs-cell {
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
  border-right: 1px solid var(--color-divider);
}
.jobs-cell.empty {
  color: var(--color-text-faint);
  font-size: 13px;
  align-items: center;
  padding: 14px 16px;
}
.job-card {
  position: relative;
  width: 166px;  /* v6.2.31: 160→166 / FHD で 8 枚並びを維持しつつ右余白をほぼゼロに */
  flex-shrink: 0;
  background: var(--color-surface-2);
  border: none;
  border-bottom: 1px solid var(--color-divider);    /* v6.2.34: top → bottom / 1 段目カード下に線を出し、右空きエリアとの境界を明確化 */
  border-right: 1px solid var(--color-divider);
  border-radius: 0;
  padding: 8px 6px;                   /* v6.2.30: 10px → 6px（3 人横並び誘導） */
  transition: box-shadow var(--tr, 180ms), background var(--tr, 180ms);
  cursor: default;
}
.job-card:hover {
  background: var(--color-surface);
}
.job-card.drag-over {
  background: var(--color-primary-soft);
  outline: 2px dashed var(--color-primary);
  outline-offset: -2px;
}
/* 並び替え用: 案件 hover で掴む形（編集モードのみ） */
body.edit-mode .job-card { cursor: grab; }
body.edit-mode .job-card:active { cursor: grabbing; }

/* v6.12.0-alpha.3 (Phase 1.7-B): 仮案件カード（site_id IS NULL + is_tentative=true）の表示。
   DESIGN.md §0-2 に従いアンバー（警告・保留色）を使用、§13 アンチパターン回避のため
   背景は極めて薄い（rgba 0.06）に抑える。業務担当者がひと目で「正式現場 CD 未採番」と認識できる。 */
.job-card.is-tentative {
  background: rgba(242, 153, 0, 0.06);
  border-right-color: rgba(242, 153, 0, 0.20);
  border-bottom-color: rgba(242, 153, 0, 0.20);
}
.job-card.is-tentative:hover {
  background: rgba(242, 153, 0, 0.10);
}
[data-theme="dark"] .job-card.is-tentative {
  background: rgba(242, 153, 0, 0.10);
  border-right-color: rgba(242, 153, 0, 0.30);
  border-bottom-color: rgba(242, 153, 0, 0.30);
}

/* 「仮」バッジ — DESIGN.md §10-1 ピル型バッジ仕様準拠 */
.tentative-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 9999px;
  background: rgba(242, 153, 0, 0.12);
  color: #b06000;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  margin-right: 6px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
[data-theme="dark"] .tentative-badge {
  background: rgba(242, 153, 0, 0.20);
  color: #f5b04a;
}

/* v6.12.9: 仮案件編集モーダル subtitle（業務担当者向け案内文言）。
   設計知見 #96 準拠で .is-hidden 共通クラスとセットで使用。 */
.tentative-subtitle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px 0;
  padding: 8px 12px;
  font-size: 12px;
  color: #92400e;
  background: rgba(242, 153, 0, 0.10);
  border: 1px solid rgba(242, 153, 0, 0.32);
  border-radius: 6px;
  line-height: 1.5;
}
.tentative-subtitle a {
  color: #b06000;
  text-decoration: underline;
}
[data-theme="dark"] .tentative-subtitle {
  color: #f5b04a;
  background: rgba(242, 153, 0, 0.10);
  border-color: rgba(242, 153, 0, 0.40);
}
[data-theme="dark"] .tentative-subtitle a {
  color: #f5b04a;
}

/* v6.12.9: 仮案件編集時、得意先・現場プルダウンのグレーアウト表示。
   標準 disabled 属性 + 視覚的補強（不活性 = カーソル + 透過）。 */
.disabled-field,
select.disabled-field,
input.disabled-field {
  background-color: #f3f4f6 !important;
  color: #6b7280 !important;
  cursor: not-allowed !important;
  opacity: 0.85;
}
[data-theme="dark"] .disabled-field,
[data-theme="dark"] select.disabled-field,
[data-theme="dark"] input.disabled-field {
  background-color: #374151 !important;
  color: #9ca3af !important;
}

.job-card-head {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}
.job-status-dot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
}
.job-status-dot.ok { background: var(--color-green); }
.job-status-dot.warn { background: var(--color-amber); }
.job-title {
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}
.job-meta {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.job-members {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;                           /* v6.2.30: 4px → 3px（3 人横並び誘導） */
}

/* v6.10.0 (Phase 2.0改-A): 統合カード描画用スタイル
   - 1 枠案件で post_type が設定されている場合: ヘッダ右に青ラベル
   - 2 枠以上案件: カード右上に「N枠」バッジ + 各枠を縦並びで表示（ポスト名 or 「枠N」ラベル + chips） */
.post-label {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1.5;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.post-label-named {
  background: #DCEAF8;
  color: #185FA5;
}
.post-label-default {
  background: var(--color-surface-3, #f1f3f4);
  color: var(--color-text-muted, #5f6368);
}
.slot-count-badge {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1.5;
  font-weight: 600;
  background: var(--color-surface-2, #f8f9fa);
  color: var(--color-text-muted, #5f6368);
  border: 1px solid var(--color-border, rgba(60,64,67,.14));
  white-space: nowrap;
  flex-shrink: 0;
}
.job-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* v6.11.0 (Phase 2.0改-B / 2-B): 異時刻枠用 — ヘッダ行（ラベル + 時間 + 人数）+ chips の 2 段構成 */
.job-slot {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 3px 0;
  border-top: 1px dashed var(--color-border, rgba(60,64,67,.14));
}
.job-slot:first-child {
  border-top: none;
  padding-top: 0;
}
.job-slot-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.job-slot-time {
  font-size: 11px;
  color: var(--color-text-muted, #5f6368);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.job-slot-count {
  font-size: 11px;
  color: var(--color-text-muted, #5f6368);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  white-space: nowrap;
}
.job-slot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

/* v6.11.0 (Phase 2.0改-B / 2-D): 編集モーダル用「全枠リスト」UI */
.aj-slots-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}
.aj-slot-row {
  /* v6.11.2: ⋮ハンドル | 開始時間 | 終了時間 | 翌日チェック | 人数 | ポスト名 | 削除 の 7 列。
     v6.12.12: 列幅最適化 — 翌日チェックボックスを固定にして「翌日」ラベル切れを根本解消。
     v6.12.13: 実 UI 検証で input padding + 時計アイコン + 「09:00」表示には 88px 不足、
     「翌日」ラベルも 56px 不足が判明 → 時間 88→100px / 翌日 56→72px に微調整。
     v6.13.5: font-size 14px + padding 8px 10px に拡大に伴い時間列を 100→115px に拡幅。
     order.css の .aj-slot-row と完全同期（共通 CSS の伏線回収）。
     設計知見 #114 拡張 4 例目 + #115 候補 + 設計原則「設計値は実 UI で確認するまで暫定値」。 */
  display: grid;
  grid-template-columns: 22px 115px 115px 72px 70px minmax(140px, 280px) auto;
  gap: 6px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--color-border, rgba(60,64,67,.14));
  border-radius: 8px;
  background: var(--color-surface, #fff);
  /* v6.11.2: D&D 中の視覚フィードバック transition */
  transition: opacity 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.aj-slot-row > input[type="time"],
.aj-slot-row > input[type="number"],
.aj-slot-row > input[type="text"] {
  width: 100%;
  min-width: 0;
  /* v6.13.5: 得意先フォームと同等の高さ・font-size に揃える（order.css と並列） */
  padding: 8px 10px;
  font-size: 14px;
  /* v6.13.1: box-sizing: content-box（既定値）だと width:100% に padding が外側で加算され
     物理幅が列幅 +12px になる。col 3（18:00）が右にはみ出して col 4 の「翌日」テキストを
     白背景で塗りつぶしていた。border-box で width:100% に padding を含めて列内に収める。
     order.css と同期修正（設計知見 #92 並列定義原則）。 */
  box-sizing: border-box;
}
.aj-slot-row .aj-slot-overnight-cell {
  /* v6.13.6: order.css と並列。align-self: stretch を撤去して grid 親の
     align-items: center を継承させる。inline-flex で label を自然サイズに保つ。 */
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 11px;
  color: var(--color-text-muted, #5f6368);
  white-space: nowrap;
  min-width: 0;
}
/* v6.13.2/v6.13.3/v6.13.4: 翌日チェックボックス + 翌日 span（order.css と並列定義、設計知見 #92） */
.aj-slot-row .aj-slot-overnight-cell input[type="checkbox"].aj-slot-overnight {
  flex-shrink: 0;
  margin: 0 8px 0 0;            /* v6.13.4: 右に 8px の余白を明示 */
  width: 14px;
  height: 14px;
  vertical-align: middle;
}
.aj-slot-row .aj-slot-overnight-text {
  display: inline-block;
  flex-shrink: 0;
  font-size: 11px;
  line-height: normal;
  color: var(--color-text-muted, #5f6368);
  white-space: nowrap;
}
/* v6.11.2: ポスト並び替え用 ⋮ ドラッグハンドル */
.aj-slot-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 28px;
  font-size: 18px;
  line-height: 1;
  color: var(--color-text-muted, #9aa0a6);
  cursor: grab;
  user-select: none;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.aj-slot-handle:hover {
  background: var(--color-surface-2, #f1f3f4);
  color: var(--color-text, #202124);
}
.aj-slot-handle:active {
  cursor: grabbing;
  background: var(--color-surface-3, #e8eaed);
}
/* v6.11.2: D&D 中の視覚フィードバック */
.aj-slot-row.aj-slot-dragging {
  opacity: 0.4;
}
.aj-slot-row.aj-slot-drag-over {
  border-color: var(--color-primary, #1a73e8);
  box-shadow: 0 0 0 2px var(--color-primary-soft, rgba(26,115,232,0.15));
}
.aj-slot-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-red, #c5221f);
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.aj-slot-delete:hover {
  background: rgba(217, 48, 37, 0.08);
}
.aj-slot-delete:disabled {
  color: var(--color-text-muted, #5f6368);
  cursor: not-allowed;
  opacity: 0.5;
}
@media (max-width: 600px) {
  .aj-slot-row {
    /* モバイル: 1 行目 ⋮ + 開始 + 終了 / 2 行目 翌日 + 人数 + ポスト名 + 削除 */
    grid-template-columns: 22px 1fr 1fr;
    gap: 8px;
  }
  .aj-slot-row .aj-slot-overnight-cell {
    grid-column: span 2;
  }
}

/* 案件カード「⋯」メニュー（編集モード限定・hover でフェードイン） */
.job-menu-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--color-text-faint);
  cursor: pointer;
  opacity: 0;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  transition: opacity var(--tr, 180ms), background var(--tr, 180ms);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.job-card:hover .job-menu-btn { opacity: 1; }
.job-menu-btn:hover { background: var(--color-surface-3); color: var(--color-text); }
body:not(.edit-mode) .job-menu-btn { display: none !important; }

/* 案件メニュードロップダウン */
.job-menu-dropdown {
  position: fixed;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-2);
  z-index: 700;
  min-width: 140px;
  overflow: hidden;
  padding: 4px;
}
/* v6.16.22: アイコン + テキストを横並びにするため display: flex に変更（4 項目で Lucide SVG を追加）。
   width: 100% / text-align: left は flex の align-items: center で同等表現可能。
   gap: 8px でアイコンとテキストの間隔を確保（信介氏判断 Q4: min-width 調整は実装後の見栄え判断）。 */
.job-menu-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  color: var(--color-text);
  border-radius: 6px;
}
.job-menu-dropdown button svg { flex-shrink: 0; }
.job-menu-dropdown button:hover { background: var(--color-surface-2); }
.job-menu-dropdown button.danger { color: var(--color-red, #c5221f); }

/* ==========================================================================
   チップ（隊員）: D&D しやすいサイズ / data-ok で OK 状態を色分け
   ========================================================================== */
.chip {
  font-size: 12px;
  padding: 4px 7px;                   /* v6.2.30: 10px → 7px（3 人横並び誘導） */
  border-radius: 9999px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.5;
  min-height: 26px;
  cursor: grab;
  user-select: none;
  transition: background var(--tr, 180ms), border-color var(--tr, 180ms), box-shadow var(--tr, 180ms);
}
.chip:active { cursor: grabbing; }
.chip.dragging { opacity: 0.4; }
.chip.chip-neutral { background: rgba(255,255,255,0.7); }
[data-theme="dark"] .chip.chip-neutral { background: var(--color-surface); }
.chip.chip-assigned {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 500;
  border-color: transparent;
}

/* v6.2.28: 休日出勤の視覚表現
   休暇予定だった隊員が配置された場合、フォントカラー赤 + 太字で区別。
   ライトモードは既存 --color-red (#c5221f) より少し明るい #e8443f、
   ダークモードは可読性確保のため #ff8a85 を使用。 */
.chip[data-holiday-work="true"] {
  color: #e8443f;
  font-weight: 700;
}
[data-theme="dark"] .chip[data-holiday-work="true"] {
  color: #ff8a85;
}
/* chip-assigned（青系背景）の上に赤太字を重ねるための優先度確保 */
.chip.chip-assigned[data-holiday-work="true"] {
  color: #e8443f;
}
[data-theme="dark"] .chip.chip-assigned[data-holiday-work="true"] {
  color: #ff8a85;
}

/* OK取り状態: 境界線色 + 背景色の 2 段構え（v6.2.28 でドット除去）
   属性ベース設計 [data-ok="..."] により、遠目でも近くでも判別可能。
   data-ok="" 空文字 (未送信) は背景色ルールなし＝ニュートラル維持。 */
.chip[data-ok="ok"]      { border-color: rgba(24, 128, 56, 0.30); }   /* v6.2.36: 40% → 30% さらに薄く */
.chip[data-ok="ng"]      { border-color: rgba(197, 34, 31, 0.30); }   /* v6.2.36: 40% → 30% さらに薄く */
.chip[data-ok="pending"] { border-color: var(--color-divider); }

/* v6.2.25: 確認依頼状態の薄い背景色（小ドット・境界線色と併用） */
.chip[data-ok="pending"] { background: rgba(242, 153, 0, 0.12); }   /* 依頼中: 薄アンバー */
.chip[data-ok="ok"]      { background: rgba(24, 128, 56, 0.12); }   /* OK: 薄緑 */
.chip[data-ok="ng"]      { background: rgba(197, 34, 31, 0.12); }   /* NG: 薄赤 */
[data-theme="dark"] .chip[data-ok="pending"] { background: rgba(242, 153, 0, 0.20); }
[data-theme="dark"] .chip[data-ok="ok"]      { background: rgba(24, 128, 56, 0.22); }
[data-theme="dark"] .chip[data-ok="ng"]      { background: rgba(197, 34, 31, 0.22); }
/* v6.2.36: ダークモードの OK/NG 枠線も同系色透過で統一（暗背景のため 45% に微増） */
[data-theme="dark"] .chip[data-ok="ok"] { border-color: rgba(24, 128, 56, 0.45); }
[data-theme="dark"] .chip[data-ok="ng"] { border-color: rgba(197, 34, 31, 0.45); }

/* ロック（locked）は配置変更不可のサイン: 背景を少し沈ませる */
.chip[data-status="locked"] {
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* v6.15.1: 週間予定表 chip の commute 青リング表示を無効化（v6.14.0 実装の停止）。
   理由: 業務担当者目線で週間予定表をシンプル化、直行/集合の確認は管制ボードの commute-badge に集約。
     - 週間予定表 = 配置全体の俯瞰（シンプルさを優先）
     - 管制ボード = 業務サマリ + 詳細確認（直行/集合バッジで確認）
   設計知見 #92 更新「同じ情報の文脈別視覚化は試験運用で再調整できる」+
     新メタ教訓「過剰な視覚化は試験運用で削る」（v6.13.7「機能削除も認知負荷を下げる」の延長）。
   復活時: v6.14.0 の CSS ブロックを参照し復元（JS の data-commute 属性付与は維持されているため
     CSS 復活のみで即対応可能）。
   無変更で温存: JS の `data-commute` 属性付与 / DB `attendance.commute_type` /
     API（GET/POST/PUT attendance/...） / 管制ボード commute-badge / 前日確認モーダルの 2 ボタン選択。 */

/* 他現場勤務（将来差別化用の属性フック） */
.chip[data-other-site="true"] .chip-badge {
  color: var(--color-text-muted);
}

/* チップ内バッジ */
.chip .chip-badge {
  font-size: 10px;
  font-weight: 600;
}
.chip .chip-badge.amber { color: var(--color-amber); }
.chip .chip-badge.green { color: var(--color-green); }
.chip .chip-badge.faint { color: var(--color-text-faint); font-weight: 500; }

/* × ボタン */
.chip-x {
  background: transparent;
  border: none;
  color: var(--color-text-faint);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0 0 0 2px;
  font-family: inherit;
}
.chip-x:hover { color: var(--color-red, #c5221f); }
/* v6.2.27: 閲覧モードでは × を非表示（誤操作防止） */
body:not(.edit-mode) .chip-x { display: none; }

/* v6.2.25: 複数人ポストの空枠チップ（.chip と高さ・角丸・パディングを揃える） */
.chip-empty {
  font-size: 11px;     /* v6.2.26: 12→11 配置済チップより控えめに */
  padding: 3px 8px;    /* v6.2.26: 4px 10px → 3px 8px */
  border-radius: 9999px;
  background: transparent;
  border: 1px dashed var(--color-border);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 3px;            /* v6.2.26: 4→3（小型化に合わせて縮小） */
  line-height: 1.5;
  min-height: 22px;    /* v6.2.26: 26→22 */
  user-select: none;
  font-family: inherit;
  transition: background var(--tr, 180ms), border-color var(--tr, 180ms), border-style var(--tr, 180ms);
  /* 閲覧モードの既定: 視覚情報のみ、クリック・D&D とも無反応 */
  cursor: default;
  pointer-events: none;
  opacity: 0.6;
}
body.edit-mode .chip-empty {
  pointer-events: auto;
  cursor: pointer;
  opacity: 1;
}
body.edit-mode .chip-empty:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  border-style: solid;
}
/* v6.11.1 (Phase 2.0改-B フォローアップ): 異時刻枠の slot-mode 空 chip に隊員を D&D 中の
   ハイライト。`.chip-empty[data-assignment-id]` のみが chip-level drop ハンドラを持ち、
   chip 上で dragover した時に .drag-over クラスが付与される。視覚フィードバックは
   :hover と同じスタイル（ユーザーが「この枠に入る」を直感的に理解できる）。 */
body.edit-mode .chip-empty.drag-over {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  border-style: solid;
}

/* v6.2.27: .btn-assign-inline は廃止（未配置は required_count に関係なく .chip-empty に統一） */

/* v6.8.27 → v6.8.36: 応援枠チップ（依頼元視点の薄い黄色 + 柔らかなグレー縁）
   v6.8.36 でデザイン整理:
     - 依頼元視点（本社が自分の案件を見る）: 「うっすら黄色 + 柔らかなグレー縁」で
       「自拠点の責任ではない」ことを視覚的に表現（設計知見 #66 候補「業務責任の濃淡を色の濃度で表現」）
     - 応援元視点（久留米が本社の応援案件を見る）: `.is-support-applying` クラスで通常配置と
       完全に同じデザインに上書き（設計知見 #61）
   高さは通常 .chip と同じ（min-height や padding は .chip 共通の値を継承）。 */
/* v6.8.37: `is-support` を「依頼元視点用の薄黄色 + 柔らかなグレー縁」だけの最小限スタイルに整理。
   `.chip-empty` にも `is-support` が付与される設計に変更（設計知見 #68 候補「揃えるのではなく
   同じものを使う」）。これにより未配置応援枠は通常空き枠の高さ・閲覧モード opacity・hover 挙動
   などすべて自動継承し、モグラ叩き状態を脱却。 */
/* v6.8.38: アプローチ D（:not(.is-support-applying)）に切り替え。v6.8.37 の `inherit` 戦略は
   CSS inherit が「親要素の computed value」を参照する仕様を誤解した実装で、`.chip-empty` の
   ベース値（var(--color-border) 等）には絶対戻れなかった。`:not(.is-support-applying)` で
   応援元視点では is-support のスタイル自体が当たらないように構造的に変更し、応援元視点では
   `.chip-empty` のベースルールが素のまま当たる設計に。設計知見 #72/#73/#74 候補。 */
.chip.is-support:not(.is-support-applying),
.chip-empty.is-support:not(.is-support-applying) {
  background-color: rgba(255, 235, 59, 0.20);  /* v6.8.36: うっすら黄色（透過率 20%） */
  border-color: rgba(160, 160, 160, 0.15);     /* v6.8.39: 0.5 → 0.15、通常空き枠 var(--color-border) と同程度の薄さ */
  color: var(--color-text);
}
/* v6.8.38: support-prefix も :not(.is-support-applying) で二重防御（JS で出力しない設計と合わせて） */
.chip.is-support:not(.is-support-applying) .support-prefix,
.chip-empty.is-support:not(.is-support-applying) .support-prefix {
  font-weight: 700;
  color: #b65a00;                /* 頭文字を強調（依頼元視点のみ表示される） */
  margin-right: 1px;
}
[data-theme="dark"] .chip.is-support:not(.is-support-applying),
[data-theme="dark"] .chip-empty.is-support:not(.is-support-applying) {
  background-color: rgba(255, 235, 59, 0.12);
  border-color: rgba(160, 160, 160, 0.15);     /* v6.8.39: 0.4 → 0.15、ライトモードと統一（必要なら次回 0.10 に微調整） */
  color: var(--color-text);
}
[data-theme="dark"] .chip.is-support:not(.is-support-applying) .support-prefix,
[data-theme="dark"] .chip-empty.is-support:not(.is-support-applying) .support-prefix {
  color: #ffb74d;
}

/* v6.8.37 → v6.8.38: 旧 `.chip.is-support.is-support-applying { ... inherit ... }` ブロックを
   丸ごと削除。:not(.is-support-applying) で is-support のスタイル自体が当たらないため、
   応援元視点で上書きする必要がそもそも無い。inherit の罠を構造的に回避。 */

/* v6.8.29 → v6.8.37: 旧 `.chip.is-support.is-clickable:hover` の黄色 hover ルールを撤去。
   未配置応援枠は v6.8.37 で `.chip-empty` 構造に変わったため、`.chip.is-support.is-clickable`
   セレクタにマッチしなくなる（配置済み応援枠は v6.8.34 で `is-clickable` 付与しない確定）。
   依頼元視点の未配置応援枠は `.chip-empty.is-support` で通常空き枠の hover を継承するため、
   黄色 hover の専用ルールは不要。閲覧モード制御も `.chip-empty` 既存ルールに合流。 */

/* v6.8.30 → v6.8.33: 応援枠の × ボタン用専用スタイル `.chip-x.is-support-cancel` を撤去。
   v6.8.33 で × ボタンの動作を「応援取り消し」（重い操作）から「隊員解除」（軽い操作、通常配置と
   同じセマンティクス）に変更したため、専用クラス不要。chip-x のみ付与で通常配置と完全統一、
   `body:not(.edit-mode) .chip-x { display: none }` ルールに合流（編集モード時のみ表示）。
   応援取り消しは「・・・」メニュー → 削除（応援元視点）経由に移動済 → 操作の重さと業務感覚を一致。 */

/* v6.8.32 → v6.8.38: 応援枠への D&D ドロップオーバー時の視覚フィードバック（依頼元視点で chip-level
   D&D handler が drag-over クラスを付与する場合のため温存）。:not(.is-support-applying) で限定し、
   応援元視点では通常 `.chip-empty` の D&D 受付スタイル（編集モード hover の青系）が当たる設計。 */
.chip.is-support:not(.is-support-applying).drag-over,
.chip-empty.is-support:not(.is-support-applying).drag-over {
  background-color: #ffd54f;
  outline: 2px dashed #f57c00;
  outline-offset: 1px;
}
[data-theme="dark"] .chip.is-support:not(.is-support-applying).drag-over,
[data-theme="dark"] .chip-empty.is-support:not(.is-support-applying).drag-over {
  background-color: #8a7228;
  outline-color: #ffb74d;
}

/* v6.8.27: 隊員検索モーダルの「応援枠を追加」セクション区切り */
.search-divider {
  margin-top: 8px;
  padding: 8px 14px 4px;
  font-size: 11px;
  color: var(--color-text-muted, #6b7280);
  letter-spacing: 0.05em;
  user-select: none;
}
.search-item.search-item-support {
  cursor: pointer;
}
.search-item.search-item-support:hover {
  background: #fffde7;
}
[data-theme="dark"] .search-item.search-item-support:hover {
  background: #4a3f1a;
}

/* v6.16.16: 隊員検索モーダルの外注セクション hover スタイル。
   .search-item-support の黄系 hover と並列定義、外注セクションはピンク系で視覚的区別。
   v6.16.15 .outsource-badge と同系統色（背景 #fce4ec）で業務担当者の認知統一。
   設計知見 #92「水平展開は意図された複製」5 ファイル目 + #115「並列定義原則」継続応用。 */
.search-item.search-item-outsource {
  cursor: pointer;
}
.search-item.search-item-outsource:hover {
  background: #fce4ec;
}
[data-theme="dark"] .search-item.search-item-outsource:hover {
  background: rgba(194, 24, 91, 0.20);
}

/* ==========================================================================
   サイドカラム（余り=薄緑 / 休み=薄ピンク）
   ========================================================================== */
.side-col {
  padding: 8px 10px;
  border-left: 1px solid var(--color-divider);
  overflow: hidden;
}
.side-col.col-avail { background: var(--color-avail-bg); }
.side-col.col-off   { background: var(--color-off-bg); }
.side-col-head {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
}
.side-col-head .label {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.side-col-head .count {
  font-size: 11px;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.chip-list-empty {
  color: var(--color-text-faint);
  font-size: 11px;
  padding: 2px 0;
}
/* 余り列のチップ hover: つかめる感を少し強調 */
.side-col .chip:hover { box-shadow: var(--shadow-1); }

/* v6.15.0: D&D 由来の休み機能 — 休み枠 / 余り枠コンテナへの drop ハイライト。
   .panel-off / .panel-available は縦長レイアウト（v-panel-cell 配下）、
   .side-col.col-off / .side-col.col-avail は横長レイアウト。両方に同じハイライトを適用。
   既存の .job-card.drag-over パターン（dashed outline + 薄背景）と統一して D&D の一貫性を確保。
   設計知見 #92 拡張「水平展開は D&D ハンドラパターンにも及ぶ」。
   v6.15.0 再修正（Bug 1 真因解消）: ハイライト対象を .chip-list（flex 自動収縮で chip 群サイズ）から
   外枠 .side-col / .panel-* （padding 含む全体）に変更。これでハンドラ attach 対象と CSS が一致し、
   chip 真上だけでなく chip 隙間 / コンテナ余白も「業務担当者が認識する枠全体」として動作する。 */
.side-col.col-off.drag-over,
.side-col.col-avail.drag-over,
.panel-off.drag-over,
.panel-available.drag-over {
  outline: 2px dashed var(--color-primary);
  outline-offset: -2px;
  background: var(--color-primary-soft, rgba(0, 90, 184, 0.06));
  border-radius: 6px;
}

/* ==========================================================================
   凡例
   ========================================================================== */
.legend {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding: 0 4px;
  flex-wrap: wrap;
}
.legend > div {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-text-muted);
}
.legend .sep { color: var(--color-text-faint); }
.legend .lg-dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
}
.legend .lg-dot-ok   { background: var(--color-green); }
.legend .lg-dot-warn { background: var(--color-amber); }
.legend .lg-swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 3px;
  border: 1px solid var(--color-divider);
}
.legend .lg-swatch-avail { background: var(--color-avail-bg); }
.legend .lg-swatch-off   { background: var(--color-off-bg); }
.legend .lg-badge {
  font-size: 11px;
  font-weight: 600;
}
.legend .lg-badge-amber { color: var(--color-amber); }
.legend .lg-badge-green { color: var(--color-green); }
.legend .lg-badge-faint { color: var(--color-text-faint); font-weight: 500; }

/* ==========================================================================
   モーダル / トースト（DESIGN.md §8 §9 準拠）
   ========================================================================== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 16px;
  z-index: 1000;
  overflow-y: auto;
}
.modal-overlay.active { display: flex; }
#confirmModal.modal-overlay { z-index: 1100; }
#deleteJobModal.modal-overlay { z-index: 1100; }
.modal-box {
  background: var(--color-surface);
  border-radius: 16px;
  /* v6.7.9: モーダル縦幅圧縮のため上下 padding を 24 → 18px に */
  padding: 18px 22px;
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow-2);
  position: relative;
}
/* v6.11.2: 案件追加・編集モーダルはポストリスト UI（時間 2 つ + 翌日 + 人数 + ポスト名 + 削除 + ⋮）が
   横に並ぶため、520px だと時間表示「08:30」が「08:3」に切れることがある。
   addJobModal だけ広めの max-width を確保（700px）してポスト行の各フィールドが余裕を持つように。
   v6.14.3: bulkModal も v6.14.2 で同 slots[] 構造（ポストリスト UI）を導入したため、
   addJobModal と並列定義で max-width: 720px に統一。
   設計知見 #92 関連「並列定義は寸法（CSS max-width）も同期する」確立。
   .aj-slot-row 列幅（22px 115px 115px 72px 70px minmax(140px, 280px) auto、v6.13.5）は
   両モーダル共通のため、横幅統一によって翌日ラベル切れ等の v6.12.12〜v6.13.6 で確立した
   知見が両モーダルで保護される。 */
#addJobModal .modal-box,
#bulkModal .modal-box {
  max-width: 720px;
}
@media (max-width: 600px) {
  #addJobModal .modal-box,
  #bulkModal .modal-box {
    max-width: 100%;
  }
}
.modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  /* v6.7.9: タイトル下の余白を 14/10 → 10/8 に圧縮 */
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-divider);
}
.modal-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; font-size: 22px;
  cursor: pointer; color: var(--color-text-muted); line-height: 1;
  padding: 4px 8px;
}
.modal-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px;
}

/* v6.7.7: モーダル内インライン警告（「現場がない得意先」選択時など） */
.inline-warning {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(242, 153, 0, 0.08);
  border: 1px solid rgba(242, 153, 0, 0.30);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.inline-warning strong {
  color: #b06000;
  font-weight: 600;
}
.inline-warning .hint {
  color: var(--color-text-muted);
  font-size: 11px;
}

/* 隊員検索モーダル */
.search-result {
  max-height: 360px; overflow-y: auto; margin-top: 10px;
  border: 1px solid var(--color-border); border-radius: 8px;
}
.search-item {
  padding: 10px 12px; border-bottom: 1px solid var(--color-divider);
  cursor: pointer; transition: background .1s;
}
.search-item:last-child { border-bottom: none; }
.search-item:hover { background: var(--color-surface-2); }
.search-item-name { font-weight: 600; font-size: 14px; }
.search-item-meta { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.search-item-conflict { color: var(--color-red, #c5221f); font-weight: 600; }

/* トースト */
.toast {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
  z-index: 900; padding: 10px 24px; border-radius: 8px;
  color: #fff; font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-2);
  pointer-events: none; opacity: 0;
  transition: opacity .3s ease;
  max-width: 90%; text-align: center;
}

/* ドラッグゴースト（モバイル） */
.drag-ghost {
  position: fixed; pointer-events: none; z-index: 1000;
  padding: 4px 10px; background: var(--color-primary); color: #fff;
  border-radius: 12px; font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-2); opacity: 0.9;
}

/* Undoバー */
.undo-bar {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1e293b; color: #fff;
  padding: 12px 18px; border-radius: 10px;
  box-shadow: var(--shadow-2); z-index: 650;
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none; max-width: 90vw;
}
.undo-bar.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.undo-bar .undo-msg { flex: 1; min-width: 0; }
.undo-bar .undo-btn {
  background: transparent; color: #93c5fd;
  border: 1px solid #60a5fa;
  padding: 5px 12px; border-radius: 6px;
  font-weight: 600; cursor: pointer;
  font-size: 12px; font-family: inherit;
}
.undo-bar .undo-btn:hover { background: rgba(96,165,250,0.15); }
.undo-bar .undo-count {
  font-size: 11px; color: #94a3b8;
  min-width: 24px; text-align: right;
}
.undo-progress {
  position: absolute; left: 0; bottom: 0;
  height: 2px; background: #60a5fa;
  width: 100%; transform-origin: left;
  border-radius: 0 0 10px 10px;
}

/* ==========================================================================
   編集モード / 閲覧モード制御
   （旧: 黄色オレンジの帯は廃止。ボタンのみ色分け）
   ========================================================================== */
body:not(.edit-mode) #btnAddJob,
body:not(.edit-mode) #btnBulk,
body:not(.edit-mode) #btnCopy { display: none !important; }
body:not(.edit-mode) .chip { cursor: default !important; }

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 1400px) {
  .day-row { grid-template-columns: 110px minmax(0, 1fr) 200px 200px; }
}
@media (max-width: 1100px) {
  .day-row { grid-template-columns: 100px minmax(0, 1fr) 180px 180px; }
  .job-card { width: 150px; }  /* v6.2.26: 160→150 */
}
@media (max-width: 900px) {
  .day-row { grid-template-columns: 1fr; }
  .date-cell,
  .side-col {
    border-right: none;
    border-left: none;
    border-bottom: 1px solid var(--color-divider);
  }
  .jobs-cell { border-right: none; border-bottom: 1px solid var(--color-divider); }
}

/* ==========================================================================
   form-group（モーダル内のラベル・入力）
   ========================================================================== */
/* v6.7.9: モーダル縦幅圧縮のため余白を 10px → 8px に縮小 */
.form-group { margin-bottom: 8px; }
/* v6.7.9: モーダル内検索フィールド共通クラス（プルダウンの上に配置する小型検索）
   v6.7.12: ピル型統一に合わせて border-radius: 9999px + 左右余白を 16px に */
.modal-search-input {
  width: 100%;
  margin-bottom: 6px;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: var(--color-surface);
  color: var(--color-text);
}
.modal-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26,115,232,.18);
}
/* v6.7.11: 案件追加・一括生成モーダルの「時間帯 3 列」グリッド
   開始時間 / 終了時間 / 終了は翌日（トグル）を 1 行に統合する。
   3 列目は内容幅（toggle 36×20px）に合わせて auto。
   モバイル幅では grid を解除して 1 列に折り返し（縦幅は許容）。 */
.form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}
.form-row-3 .form-group { margin-bottom: 0; } /* 各セルの余白を grid gap に集約 */
@media (max-width: 480px) {
  .form-row-3 { grid-template-columns: 1fr; }
}

/* v6.7.13: トグルセル（form-row-3 / form-row-search-toggle 内のトグル列）
   グリッド 3 列目に置かれた「ラベル + トグルスイッチ」の縦並びを中央寄せにする。
   旧 v6.7.11 はデフォルトの flex-start で左寄せに見えていた問題を解消。 */
.form-toggle-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  gap: 2px;
}
.form-toggle-cell > label:first-child {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 0;
  text-align: center;
}

/* v6.7.13: 現場検索フィールド + 「全て表示」トグルを 1 行に統合する grid
   旧 v6.7.12 までは「全現場を表示」が独立した行を消費していたが、
   検索フィールドの右隣にトグルを置くことで縦幅約 30px 圧縮。 */
.form-row-search-toggle {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 6px;
}
.form-row-search-toggle .modal-search-input {
  margin-bottom: 0; /* grid gap に集約 */
}

/* v6.7.11: トグルスイッチ（チェックボックス代替）
   既存 dashboard.css の .toggle-switch / .toggle-slider と同サイズ・同色設計で互換性維持。
   案件追加・一括生成モーダルの「終了は翌日」で使用。
   DOM API は <input type="checkbox"> のままで .checked が同じく機能（JS 完全互換）。 */
.toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  display: inline-block;
  flex-shrink: 0;
  cursor: pointer;
  margin: 10px 0 4px; /* 前後フィールドの input 高さ（38-40px）と縦中央寄せに近づける */
}
.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);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.toggle-switch input:checked + .toggle-slider { background: var(--color-primary); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }
.toggle-switch input:focus-visible + .toggle-slider {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* v6.7.9: モーダル内インラインチェックトグル（「全現場を表示」など）
   旧: 各箇所で inline style 記述 → 折り返しや余白のばらつきが発生していた */
.modal-inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: normal;
  cursor: pointer;
  white-space: nowrap;
}
.modal-inline-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
}
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.form-group input[type="text"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
  width: 100%;
  /* v6.7.12: ピル型統一 — 単一行系入力は border-radius: 9999px、左右余白を 16px に */
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  font-size: 14px;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
}
/* v6.7.12: テキストエリアは複数行のため控えめな角丸（border-radius: 16px）を維持 */
.form-group textarea {
  border-radius: 16px;
  padding: 10px 16px;
  resize: vertical;
}
/* v6.7.12: select は標準矢印を消して独自 SVG 矢印を背景画像で配置（data URI、外部ファイル不要） */
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  cursor: pointer;
}
[data-theme="dark"] .form-group select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23bdc1c6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26,115,232,.18);
}
.error-message {
  background: rgba(197,34,31,.06);
  color: var(--color-red, #c5221f);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-top: 8px;
}

/* ==========================================================================
   月間シフト連携バッジ・ノート（余り列のチップ内で使用）
   ========================================================================== */
.shift-note {
  font-size: 10px;
  color: var(--color-text-faint);
  margin-left: 2px;
}

/* ==========================================================================
   ===== 縦表示モード（旧仕様維持・v6.2.25 以降で刷新予定）=====
   syukan.html の #btnViewVertical クリック時に #dayGrid 直下へ
   .vertical-layout 構造を出力する。新 day-grid とは独立したレイアウト。
   ========================================================================== */
.vertical-layout {
  display: flex; flex-direction: column;
  height: calc(100vh - 200px); min-height: 400px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.v-header-row, .v-panels-row {
  display: grid; gap: 1px; flex-shrink: 0;
  background: var(--color-divider);
}
.v-jobs-row {
  display: grid; gap: 1px; flex: 1; overflow-y: auto;
  align-items: start; padding: 0;
  background: var(--color-divider);
}
.v-panels-row {
  border-top: 1px solid var(--color-divider);
}
.v-header-cell,
.v-jobs-cell,
.v-panel-cell {
  background: var(--color-surface);
}
.v-header-cell {
  border-bottom: 1px solid var(--color-divider);
}
.v-jobs-cell {
  min-height: 120px;
  padding: 6px;
}
.v-panel-cell {
  display: flex;
  flex-direction: column;
  max-height: 200px;
  overflow-y: auto;
}
/* 縦モード内の日付ヘッダ */
.v-header-cell .day-header {
  padding: 10px 12px;
  font-weight: 500;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.v-header-cell .day-header.sat { color: var(--color-primary); }
.v-header-cell .day-header.sun { color: var(--color-red, #c5221f); }

/* 縦モード: 案件リストは横並びラッピング、カードは新デザインを流用 */
.v-jobs-cell .job-list-vertical {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: flex-start; align-content: flex-start;
}
.v-jobs-cell .v-job-card {
  width: auto;  /* .job-card の width:180px 固定を縦モードでは解除 */
  min-width: 160px; max-width: 220px; flex: 1 1 160px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  padding: 8px 10px;
  position: relative;
  border-right: 1px solid var(--color-divider);  /* 横モード横並び用 border-right を明示的に維持 */
}
.v-jobs-cell .v-job-card:hover { background: var(--color-surface); }
.v-jobs-cell .v-job-card.drag-over {
  outline: 2px dashed var(--color-primary); outline-offset: -2px;
  background: var(--color-primary-soft);
}

/* 縦モードの余り・休みパネル */
.v-panel-cell .panel {
  padding: 8px 10px;
  overflow-y: auto;
}
.v-panel-cell .panel-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 4px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.v-panel-cell .panel-available { background: var(--color-avail-bg); }
.v-panel-cell .panel-off       { background: var(--color-off-bg); }
.v-panel-cell .panel-body {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
/* ===== 縦表示モード ここまで ===== */

/* ============================================================
   v6.8.28: 応援配置 Phase 2 — バッジ + モーダル + 応援先案件描画
   ============================================================ */

/* 応援依頼ピル型ボタン（OK 管理ボタン直後、件数 > 0 で出現） */
.btn-pill.is-support {
  background: #fef3c7;       /* 薄黄 */
  border: 1px solid #f59e0b; /* アンバー枠 */
  color: #92400e;            /* 濃いアンバー文字 */
}
.btn-pill.is-support:hover {
  background: #fde68a;
}

/* バッジドット（既存パターンを踏襲） */
.btn-pill.is-support .badge-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  margin-right: 6px;
}

/* 応援先として表示する案件カードのヘッダー（is_support_visit=true）
   v6.8.36: 縦位置を通常案件カードのヘッダーと揃える調整。
     旧 (v6.8.28): padding 4px 6px + border-bottom 2px で内側テキストの縦位置がズレる
     新 (v6.8.36): padding を最小化、margin-bottom で「border 2px + 通常 margin 3px」総量を相殺
   応援案件の判別はヘッダー黄色背景 + 「[本社]」バッジで行う（縦幅は通常と同じ印象に）。 */
.job-card-head.is-support-visit {
  background: #fff9c4;   /* 薄黄: 応援チップと同系色（v6.8.27） */
  border-bottom: 2px solid #f9a825;
  padding: 1px 6px;
  margin-bottom: 1px;    /* v6.8.36: 通常 3px - 2px(border) = 1px で総縦幅を揃える */
  border-radius: 6px 6px 0 0;
}
.job-card-head.is-support-visit .job-title {
  color: #6b3f00;
  font-weight: 600;
}
.job-card-head.is-support-visit .job-title-dept {
  display: inline-block;
  background: #f9a825;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  margin-right: 4px;
  vertical-align: middle;
}

/* 応援依頼一覧モーダル */
.support-modal-card {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--color-surface, #fff);
}
.support-modal-card-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text, #1f2937);
  margin-bottom: 6px;
}
.support-modal-card-body {
  font-size: 13px;
  color: var(--color-text-muted, #4b5563);
  line-height: 1.7;
}
.support-modal-card .support-modal-label {
  display: inline-block;
  min-width: 70px;
  color: var(--color-text-faint, #6b7280);
  font-size: 12px;
}
.support-modal-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: flex-end;
}

@media (prefers-color-scheme: dark) {
  .btn-pill.is-support {
    background: rgba(249, 168, 37, 0.15);
    border-color: #f9a825;
    color: #f9a825;
  }
  .job-card-head.is-support-visit {
    background: rgba(249, 168, 37, 0.18);
    border-bottom-color: #f9a825;
  }
  .job-card-head.is-support-visit .job-title {
    color: #fde68a;
  }
}

/* ===== v6.11.4: スクロール時のコンパクトミニバー =====
   元のコントロールバーが画面外に出るとアニメーションで降りてくる。
   背景は強透過 + 強ぼかし（信介氏採用、minibar-bg-comparison-v2.html ③ 案）で
   後ろの週間予定表が透けて見える。`.visible` クラスのトグルだけで CSS transition が動く。 */
.mini-bar {
  position: fixed;
  top: -100px;
  left: 0;
  right: 0;
  padding: 10px 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 99;
  transition: top var(--tr, 180ms);
  border-bottom: 1px solid var(--color-divider, rgba(0,0,0,.08));
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  pointer-events: none; /* 画面外時はクリック吸収しない */
}
.mini-bar.visible {
  top: 0;
  pointer-events: auto;
}
[data-theme="dark"] .mini-bar {
  background: rgba(32, 33, 36, 0.65);
  border-bottom-color: rgba(255,255,255,.08);
}

/* ピル型ボタン（DESIGN.md 準拠、既存 .btn-pill より小さい h=36px） */
.mini-bar .mini-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 9999px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(60,64,67,.14));
  color: var(--color-text, #202124);
  font-size: var(--text-xs, 12px);
  font-weight: 500;
  font-family: inherit;
  box-shadow: var(--shadow-1, 0 1px 2px rgba(60,64,67,.10));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: transform var(--tr, 180ms), box-shadow var(--tr, 180ms);
}
.mini-bar .mini-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2, 0 2px 6px rgba(60,64,67,.16));
}
.mini-bar .mini-btn.icon-only {
  width: 36px;
  padding: 0;
  justify-content: center;
}
.mini-bar .mini-btn svg {
  stroke: currentColor;
  fill: none;
}

/* v6.16.11: ミニバー側拠点 select。.mini-btn と同じ高さ・形状で配置に馴染む。
   モバイル < 600px でも非表示にせず、業務担当者が PC/モバイル どちらでも切替可能。 */
.mini-bar .mini-site-select {
  height: 36px;
  padding: 0 28px 0 12px;
  border-radius: 9999px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(60,64,67,.14));
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text);
  cursor: pointer;
  max-width: 140px;
  text-overflow: ellipsis;
}
.mini-bar .mini-site-select:hover {
  box-shadow: var(--shadow-2, 0 2px 6px rgba(60,64,67,.16));
}

/* 日付レンジ（読み取り専用、ピル型 chip） */
.mini-bar .mini-date {
  height: 36px;
  padding: 0 14px;
  border-radius: 9999px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(60,64,67,.14));
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm, 13px);
  font-weight: 500;
  color: var(--color-text, #202124);
  box-shadow: var(--shadow-1, 0 1px 2px rgba(60,64,67,.10));
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 編集モードボタン（右端に寄せる）
   v6.12.14: 通常コントロールバー #btnEditMode と完全一致させる
     ・閲覧モード（デフォルト）: 白背景 + ボーダー（.mini-btn と同じトーン）
     ・編集モード（body.edit-mode）: 青背景 + dot 点滅（#btnEditMode L171-L184 と一致）
   v6.11.4 実装時に色設計が逆転していた（デフォルト青 / 編集時アンバー）バグの修正。
   設計知見 #114 派生「モード切替の視覚的整合性」確立。 */
.mini-bar .mini-edit {
  margin-left: auto;
  height: 36px;
  padding: 0 16px;
  border-radius: 9999px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(60,64,67,.14));
  color: var(--color-text, #202124);
  font-size: var(--text-xs, 12px);
  font-weight: 500;
  font-family: inherit;
  box-shadow: var(--shadow-1, 0 1px 2px rgba(60,64,67,.10));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: transform var(--tr, 180ms), filter var(--tr, 180ms), background var(--tr, 180ms);
}
.mini-bar .mini-edit:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2, 0 2px 6px rgba(60,64,67,.16));
}
.mini-bar .mini-edit .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text-faint);
  flex-shrink: 0;
}

/* 編集モード ON 時の表示（body.edit-mode と同期、#btnEditMode と一致） */
/* v6.12.14: アンバー → 青に修正、dot は白 + 点滅（既存 hi-blink keyframe 流用） */
body.edit-mode .mini-bar .mini-edit {
  background: var(--color-primary, #1a73e8);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-2, 0 2px 6px rgba(60,64,67,.16));
}
body.edit-mode .mini-bar .mini-edit .dot {
  background: #fff;
  animation: hi-blink 1.2s infinite;
}

/* モバイル: 余白を詰める + 一部ボタン非表示でレイアウト維持 */
@media (max-width: 600px) {
  .mini-bar {
    padding: 8px 12px;
    gap: 6px;
  }
  .mini-bar .mini-date {
    /* 日付は折り返さず縮小 */
    font-size: var(--text-xs, 12px);
    padding: 0 10px;
  }
  /* v6.16.11: 旧 .mini-bar .mini-btn#miniBtnSite { display: none } を撤廃。
     業務担当者要望「モバイルでも使えるように」に合わせて #miniSiteSelect を表示維持。 */
}

/* ==========================================================================
   v6.16.24 Phase 1: 仮ユーザー chip スタイル
   ==========================================================================
   業務担当者判断 Q5 採用: オレンジ系（v6.16.19 配置中アラート色と統一、対象系視覚軸）。
   仮ユーザーは入社初日の警備業ソフト未登録スタッフ、CSV インポート時に正式ユーザーへ
   切替される一時的存在 → 視覚的に「他と区別される」べき。
   設計知見 #114「業務担当者の認知負荷削減」継続応用: 別セクション化せず色 + バッジで識別。
   ========================================================================== */
/* v6.16.24 追加修正 2: 仮 chip の背景色を削除（信介氏判断 Q1 採用、ローカル動作確認中の発見）。
   v6.16.19「配置中アラート」が同じオレンジ系 #fff3e0 を使用しているため業務担当者の認知が混乱
   →「配置中アラート」と「仮ユーザー」が視覚的に区別できないバグ的状況。役割分離のため:
     - 配置中アラート（v6.16.19）= 背景色オレンジ系（業務的セマンティクス: 注意喚起）
     - 仮ユーザー（v6.16.24）= 枠線色 + 仮バッジで識別（背景色は通常 chip と同じ）
   設計知見「色の役割分離（業務的セマンティクス）」+「視覚的識別の冗長性削減」確立。
   既存の data-ok / data-commute 等の background 色付け CSS は完全保護される（background 指定削除のため衝突なし）。 */
.chip[data-is-temporary="true"] {
  border: 1px solid #f59e0b;
}
.chip[data-is-temporary="true"] .chip-temp-badge {
  display: inline-block;
  background: #f59e0b;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 4px;
  line-height: 1.4;
  flex-shrink: 0;
}