:root {
  --left-col-width: 132px;
  --ink: #111827; --ink-2: #374151; --ink-3: #6b7280;
  --line: #e2e5ea; --line-strong: #cbd2da; --surface: #fff; --canvas: #f4f5f7;
  --accent: #1d4ed8; --danger: #dc2626; --change: #6d28d9;
  --radius: 6px; --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.10);
  --shadow-card: 0 1px 1px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.09);
  --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.16);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  background: var(--canvas); color: var(--ink);
  font-size: 13px; -webkit-font-smoothing: antialiased;
}
body.is-dragging-body { cursor: grabbing; user-select: none; }

/* 状態バー（件数と元に戻す） */
.app-header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.app-dummy-badge {
  font-size: 12px; color: #92400e; background: #fef3c7;
  border: 1px solid #f59e0b; border-radius: 4px; padding: 2px 8px;
}
.summary-chips { display: flex; gap: 8px; }
.app-header .btn-undo { margin-left: auto; }
.summary-chip {
  display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px;
  border: 1px solid #d1d5db; border-radius: 999px; padding: 3px 12px; background: #f9fafb;
}
.chip-count { font-size: 14px; font-weight: bold; }
.chip-unassigned { background: #f3f4f6; border-color: #9ca3af; }
.chip-changed { background: #f5f3ff; border-color: #c4b5fd; color: #5b21b6; }
.chip-warned { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.chip-notice { background: #ffedd5; border-color: #ea580c; color: #9a3412; font-weight: 700; }
.btn {
  font-size: 13px; padding: 5px 12px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  cursor: pointer; box-shadow: var(--shadow-1);
}
.btn:hover:not(:disabled) { background: #f8fafc; border-color: #94a3b8; }
.btn:active:not(:disabled) { box-shadow: none; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-quiet { border-color: #d1d5db; color: #6b7280; }

/* 使い方・凡例 */
.guide { padding: 8px 16px; background: #fff; border-bottom: 1px solid #e5e7eb; font-size: 12px; color: #374151; }
.guide-how { line-height: 1.6; }
.guide-sub { margin-top: 4px; color: #4b5563; }
.guide-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; align-items: center; }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-swatch { width: 16px; height: 12px; border-radius: 2px; display: inline-block; border: 1px solid #999; }
.legend-warn { background: #fff; border: 2px solid #dc2626; }
/* 「カードの見かた」の枠。使い方の文章に混ざって読み飛ばされないよう、
   見出しを付けて枠で区切る。 */
.guide-block {
  margin-top: 8px; padding: 7px 10px;
  background: #f8fafc; border: 1px solid var(--line); border-radius: 5px;
}
.guide-title {
  font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 5px;
}
.guide-legend { margin-top: 0; }
.guide-note { margin-top: 5px; color: #6b7280; }

/* 未割当トレイ */
.tray {
  margin: 12px 16px; padding: 8px 10px; background: #fff;
  border: 2px dashed #6b7280; border-radius: 6px;
}
.tray.is-drop-target, .tray-body.is-drop-target { background: #eef2ff; border-color: #2563eb; }
.tray-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tray-title { font-size: 14px; font-weight: bold; }
.tray-count { font-size: 15px; font-weight: bold; color: #111827; background: #e5e7eb; border-radius: 999px; padding: 1px 10px; }
.tray-note { font-size: 12px; color: #6b7280; }
.tray-body { display: flex; gap: 8px; margin-top: 8px; min-height: 116px; overflow-x: auto; padding: 2px; }
.tray-empty { font-size: 13px; color: #6b7280; align-self: center; }

/* タイムライン。幅は app.js が実表示幅から計算する（固定px値を持たない）。
   はみ出したときだけ、この領域の中だけを横スクロールさせる。 */
.timeline {
  /* 高さを画面内に収めて、この枠の中だけを縦横にスクロールさせる。
     こうすることで時間の目盛り行を枠の上端へ貼り付けたままにできる。 */
  overflow: auto; margin: 12px 16px 16px; padding-bottom: 2px;
  max-height: calc(100vh - 190px); min-height: 320px;
  /* macOSでも横スクロールできることが分かるように、スクロールバーを常に見せる。 */
  scrollbar-width: thin; overscroll-behavior-x: contain;
}
.timeline::-webkit-scrollbar { height: 12px; width: 12px; }
.timeline::-webkit-scrollbar-track { background: #eceef1; border-radius: 6px; }
.timeline::-webkit-scrollbar-thumb { background: #b6bcc5; border-radius: 6px; }
.timeline::-webkit-scrollbar-thumb:hover { background: #939aa5; }
.timeline-row { display: flex; align-items: stretch; min-width: min-content; }
/* スタッフ列。横スクロールしても左に貼り付いたままにする。 */
.left-col {
  flex: 0 0 var(--left-col-width); width: var(--left-col-width); padding: 6px 7px;
  border-bottom: 1px solid #e5e5e5; border-right: 1px solid var(--line-strong);
  background: #fff; position: sticky; left: 0; z-index: 5;
  box-shadow: 2px 0 4px rgba(15, 23, 42, 0.06); overflow: hidden;
}
.corner { font-size: 11px; color: #6b7280; }
/* 行の高さ。カード内の5要素（バッジ・氏名・時刻・所要時間・地域）が
   途中で切れずに収まる高さを確保する。 */
.track { position: relative; height: 100px; border-bottom: 1px solid var(--line); background: var(--surface); }

/* 時間の目盛り行。縦スクロールしても上端（と下端）に貼り付けたままにする。
   行が多いときに「今どの時間を見ているか」を見失わないようにするため。 */
.ruler-row { position: sticky; z-index: 6; }
.ruler-top { top: 0; }
.ruler-bottom { bottom: 0; }
.ruler-row .left-col { z-index: 7; }
.ruler-row .track { height: 24px; }
.ruler-top .track { border-bottom: 1px solid var(--line-strong); }
.ruler-bottom .track { border-top: 1px solid var(--line-strong); border-bottom: none; }
.ruler-bottom .left-col { border-bottom: none; border-top: 1px solid var(--line-strong); }
.tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid #ddd; }
.tick-60 { border-left-color: #666; }
.tick-30 { border-left-color: #999; }
.tick-15 { border-left-color: #ddd; }
.tick-label { position: absolute; top: 0; left: 2px; font-size: 10px; color: #555; white-space: nowrap; }
/* 下側の目盛りは文字を行の下端に置き、すぐ上のスタッフ行と対応づけやすくする。 */
.ruler-bottom .tick-label { top: auto; bottom: 0; }
/* 右端（19:00）の文字はカード領域からはみ出すので、内側へ寄せて切れないようにする。 */
.ruler .tick:last-child .tick-label { left: auto; right: 2px; }
.grid-line { position: absolute; top: 0; bottom: 0; border-left: 1px solid #f2f4f6; z-index: 0; }
.grid-60 { border-left-color: #9aa0a6; }
.grid-30 { border-left-color: #c5c9cf; }
.grid-15 { border-left-color: #e1e4e8; }
.grid-5 { border-left-color: #f2f4f6; }
.off-duty-block { position: absolute; top: 0; bottom: 0; background: rgba(120, 128, 138, 0.16); z-index: 1; }
.staff-track.is-drop-target { box-shadow: inset 0 0 0 2px #2563eb; }
.staff-info { display: flex; flex-direction: column; justify-content: center; }
/* 幅は最小限。入りきらない文字は省略し、全文はホバーの説明で読めるようにする。 */
.staff-name, .staff-role, .staff-hours {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.staff-name { font-weight: 700; font-size: 12.5px; letter-spacing: 0; }
.staff-role { font-size: 10.5px; color: var(--ink-3); margin-top: 1px; }
.staff-hours { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* 当日の移動手段（車両）を選ぶ欄。スタッフ列の中に収める。
   選ぶだけの欄で、移動時間や到着可否は判定しない。 */
.staff-vehicle { display: flex; align-items: center; gap: 3px; margin-top: 3px; }
.vehicle-select {
  flex: 1 1 auto; min-width: 0; max-width: 100%;
  font-size: 10.5px; line-height: 1.2; padding: 1px 2px; height: 20px;
  color: var(--ink-2); background: #fff;
  border: 1px solid var(--line-strong); border-radius: 4px; cursor: pointer;
}
.vehicle-select:hover { border-color: #8b96a5; }
.vehicle-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 同じ共用車両を今日、他のスタッフも使う設定になっていることを文字で示す。
   使えないという判定ではないので、赤太枠（注意）とは別の見た目にする。 */
.vehicle-dup {
  flex: 0 0 auto; font-size: 9.5px; line-height: 14px; padding: 0 4px;
  border-radius: 999px; white-space: nowrap;
  background: #fff4e5; color: #9a3412; border: 1px solid #f0b27a; font-weight: 700;
}

/* ドラッグ中の表示。動くカード本体の指定は styles-cards.css の
   .visit-card.drag-ghost に置く（カードの規則より後に来ないと打ち消されるため）。 */
/* ドラッグ中に出る時刻の吹き出し。動かしているカード
   （styles-cards.css の .visit-card.drag-ghost、z-index 1200）より
   さらに前面へ置き、カードの下に隠れないようにする。 */
.drag-hint {
  position: fixed; z-index: 1300; pointer-events: none;
  background: #111827; color: #fff; font-size: 12px; font-weight: bold;
  padding: 4px 9px; border-radius: 4px; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.45);
}
.drag-hint.is-invalid { background: #b91c1c; }

/* 閲覧のみの日。カードは見るだけで、動かせないことを形でも示す。 */
.readonly-item.is-off { opacity: 0.55; }
.readonly-day .visit-card { cursor: default; }
.readonly-day .timeline { max-height: calc(100vh - 320px); }

/* 選択した訪問の詳細。画面下端に貼り付くので、左のスタッフ列（z-index 5）や
   時間の目盛り行（6・7）より前面へ置かないと、それらの下に隠れてしまう。
   ドラッグ中のカード（1200）と時刻の吹き出し（1300）よりは後ろにする。 */
.detail-bar {
  position: sticky; bottom: 0; margin: 0; padding: 10px 16px; z-index: 900;
  background: #fff; border-top: 2px solid #2563eb; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}
.detail-main { font-size: 14px; }
.detail-client { font-weight: bold; font-size: 15px; }
.detail-text { color: #374151; }
/* 「連絡したら記入」のチェック欄。詳細バーの中で、読むだけの行と
   書き込む行が見分けられるよう、薄い枠で囲んで区切る。 */
.detail-contact {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  margin-top: 5px; padding: 5px 8px;
  background: #f8fafc; border: 1px solid var(--line); border-radius: 5px;
}
.detail-contact-title { font-size: 12px; font-weight: 700; color: var(--ink); }
.contact-check {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: #374151; cursor: pointer;
}
.contact-check input { cursor: pointer; }
.contact-check input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.contact-none { font-size: 11px; color: #9a3412; }
.detail-baseline { font-size: 13px; color: #4b5563; margin-top: 4px; }
.detail-baseline.is-changed { color: #5b21b6; font-weight: bold; }
.detail-warn { font-size: 13px; color: #b91c1c; font-weight: bold; margin-top: 4px; }
.detail-bar.is-baseline { border-top: 2px dashed #6b7280; }
.detail-tag {
  font-size: 12px; margin-right: 8px; padding: 1px 6px;
  border: 1px dashed #6b7280; border-radius: 3px; background: #f3f4f6; color: #374151;
}
.detail-note { font-size: 12px; color: #6b7280; margin-top: 4px; }
.detail-actions { display: flex; gap: 8px; margin-top: 8px; }

/* 画面が狭いとき（スマートフォン）の調整。
   タイムラインの中身そのものは縮めない（カードが読めなくなるため）。
   まわりの余白と件数の並びだけを詰めて、横スクロールで見てもらう。 */
@media (max-width: 700px) {
  .app-header { padding: 6px 10px; gap: 8px; }
  .summary-chips { flex-wrap: wrap; gap: 6px; }
  .app-header .btn-undo { margin-left: 0; }
  .timeline { margin: 8px 8px 12px; max-height: calc(100vh - 150px); min-height: 260px; }
  .tray { padding: 8px 10px; }
}