:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --danger: #dc2626;

  --cat-planning: #6366f1;
  --cat-program: #10b981;
  --cat-art: #f59e0b;
  --cat-animation: #ec4899;
  --cat-sound: #06b6d4;
  --cat-qa: #8b5cf6;
  --cat-milestone: #ef4444;
  --cat-other: #64748b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI",
    "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 10px;
  /* 横スワイプによるブラウザの「戻る/進む」を無効化 */
  overscroll-behavior-x: none;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand .logo { font-size: 18px; }
.brand strong { font-size: 13px; }
.brand .subtitle { color: var(--muted); font-size: 9px; }

.controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: var(--muted);
}
.checkbox-inline {
  flex-direction: row;
  color: var(--text) !important;
  font-size: 11px !important;
}
.checkbox-inline input { margin: 0; }
.controls select, .controls input {
  font-size: 10px;
  padding: 3px 5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}
.divider {
  width: 1px;
  height: 22px;
  background: var(--border);
}

.btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: #f1f5f9; }
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
}
.btn-danger:hover { filter: brightness(0.9); }

/* 全体レイアウト：topbar / workspace（= ナビ + ビュー領域） */
.workspace {
  display: flex;
  flex: 1;
  min-height: 0;
}
#viewArea {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  position: relative;
}

/* 隠せるナビサイドバー */
.nav-sidebar {
  width: 200px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow: auto;
  padding: 10px 0;
  transition: width .18s ease, padding .18s ease;
}
.nav-sidebar.collapsed {
  width: 0;
  padding: 0;
  border-right: 0;
  overflow: hidden;
}
.nav-section { padding: 6px 12px 10px; }
.nav-section + .nav-section { border-top: 1px solid var(--border); }
.nav-section-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2px 0 6px;
}
.nav-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.nav-item:hover { background: #f1f5f9; }
.nav-item.active { background: #eef2ff; color: var(--primary); font-weight: 600; }
.nav-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 8px;
}
.nav-field select {
  font-size: 11px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}
.nav-open { width: 100%; }

.icon-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  width: 26px;
  height: 24px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.icon-btn:hover { background: #f1f5f9; }

main#ganttView {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;   /* ガントの縦・横スクロールはここ一箇所 */
  /* 横スクロール時にブラウザの「戻る/進む」ジェスチャーが発動しないようにする */
  overscroll-behavior-x: none;
  align-items: flex-start;
}

/* かんばんビュー */
#kanbanView {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.kanban-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.kanban-head label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--muted);
}
.kanban-head select {
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}
.kanban-board {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 10px;
  padding: 12px;
  overflow-x: auto;
  align-items: flex-start;
}
.kanban-col {
  flex: 0 0 240px;
  width: 240px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: #f1f5f9;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.kanban-col.drop-hover { outline: 2px dashed var(--primary); outline-offset: -2px; }
.kanban-col-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
}
.kanban-col-head .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.kanban-col-head .count { margin-left: auto; color: var(--muted); font-weight: 600; font-size: 10px; }
.kanban-cards {
  flex: 1;
  min-height: 24px;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kanban-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 11px;
  cursor: grab;
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.kanban-card:hover { border-color: #cbd5e1; }
.kanban-card.dragging { opacity: .45; }
.kanban-card .kc-name { font-weight: 600; color: var(--text); margin-bottom: 3px; line-height: 1.25; }
.kanban-card .kc-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--muted); font-size: 10px; }
.kanban-card .kc-tag {
  display: inline-block; padding: 0 5px; border-radius: 3px;
  font-size: 9px; line-height: 14px; color: white;
}

#sidebar {
  width: max-content;          /* 表の列幅合計にフィット */
  border-right: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  position: sticky;
  left: 0;
  z-index: 5;                 /* 横スクロール時にガントの上に出る */
}
.sidebar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 10px 4px;
  border-bottom: 1px solid var(--border);
}
.sidebar-head h2 {
  font-size: 12px;
  margin: 0;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.task-count { font-size: 9px; color: var(--muted); }

.task-table-wrap {
  /* 個別スクロールは廃止、外側 main のスクロールに任せる */
}
.task-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: max-content;        /* 列幅の合計をそのまま使い、必要なら横スクロール */
  min-width: 100%;
  font-size: 9px;
  background: var(--surface);
}
.task-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  color: var(--muted);
  font-weight: 600;
  text-align: left;
  padding: 0 6px;
  border-bottom: 1px solid #94a3b8;
  border-right: 1px solid #b6c0cd;
  white-space: nowrap;
  height: var(--gantt-thead-h, 60px);   /* ガントヘッダ高に追従 */
  box-sizing: border-box;                /* 高さに罫線を含める → tbody が境界線位置と一致 */
  vertical-align: bottom;
}
.task-table thead th:last-child { border-right: none; }
.task-table tbody tr {
  height: var(--gantt-row-h, 36px) !important;
}
.task-table tbody td {
  padding: 0 8px;
  border-top: 1px solid #b6c0cd;       /* 横罫線 — ガントの row-line と同じ位置 */
  border-right: 1px solid #cbd5e1;     /* 縦罫線 */
  vertical-align: middle;
  white-space: nowrap;
  height: var(--gantt-row-h, 36px) !important;
  max-height: var(--gantt-row-h, 36px) !important;
  /* border-box + 上罫線 1px のぶん行が膨らむのを防ぐ。line-height は
     コンテンツ領域（行高 − 罫線）に収め、縦中央は vertical-align で取る。 */
  line-height: calc(var(--gantt-row-h, 36px) - 1px) !important;
  box-sizing: border-box;
  overflow: hidden;                    /* 列幅を超える内容は確実にクリップ */
  text-overflow: ellipsis;             /* 文字なら "…" で省略表示 */
  color: var(--text);
  font-weight: 500;
}
/* thead と最初の行の間で罫線が二重に見えないように、最初の行の border-top を消す */
.task-table tbody tr:first-child td { border-top: 0; }
/* 各行は border-top しか持たないため、最終行の下端に罫線が出ない。
   最後の行にだけ下罫線を足してガント側の最下行ラインと揃える。
   border ではなく inset box-shadow を使い、行の高さを増やさない（border だと
   コンテンツ領域が 1px 縮み、行が膨らんでガントと縦がずれるため）。 */
.task-table tbody tr:last-child td { box-shadow: inset 0 -1px 0 #b6c0cd; }
.task-table tbody td:last-child { border-right: none; }
.task-table tbody tr:hover td { background: #f8fafc; }
/* 完了タスクは全列まとめてグレー化（文字も薄め） */
.task-table tbody tr.status-done td {
  background: #cbd5e1;          /* 一段濃いグレー */
  color: #64748b;
  border-top-color: #94a3b8;
  border-right-color: #b0bbcb;
}
.task-table tbody tr.status-done:hover td { background: #b6c0cd; }

/* 期限超過（end_date < today、かつ未完了）— 背景を薄赤 */
.task-table tbody tr.overdue td { background: #fee2e2; }
.task-table tbody tr.overdue:hover td { background: #fecaca; }
.task-table td.editable { cursor: cell; }
.task-table td.editable:hover { box-shadow: inset 0 0 0 1px var(--border); }
.task-table td.editing {
  padding: 0 !important;
  box-shadow: inset 0 0 0 2px var(--primary);
  background: white !important;
}
.task-table td.editing > .inline-edit {
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 10px;
  padding: 0 8px;
  box-sizing: border-box;
  color: var(--text);
}
.task-table td.editing.col-num > .inline-edit { padding: 0 4px 0 8px; }
.task-table td.editing > select.inline-edit {
  padding-right: 18px;
}

.col-sortkey { width: 34px; min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; }
.task-table td.col-sortkey, .task-table th.col-sortkey { padding-left: 2px; padding-right: 2px; }
.task-table tbody td.col-sortkey { color: var(--muted); text-align: center; }
.task-table td.col-sortkey.editing > .inline-edit { padding: 0 2px; text-align: center; }
.col-ms     { width: 52px;  min-width: 48px; }
.col-cat    { width: 60px;  min-width: 56px; }
.col-name   { width: 247px; min-width: 206px; }
.col-note   { width: 184px; min-width: 154px; }
.col-sec    { width: 72px;  min-width: 64px; }
.col-asn    { width: 38px;  min-width: 36px; }
.task-table td.col-asn, .task-table th.col-asn { padding-left: 2px; padding-right: 2px; }
.col-num    { width: 44px;  min-width: 40px; text-align: left;  font-variant-numeric: tabular-nums; }
.col-date   { width: 60px;  min-width: 50px;  text-align: left; font-variant-numeric: tabular-nums; }
.col-status { width: 44px;  min-width: 40px; }

/* タスク・備考は内容が長くなりがちなので、列幅を絶対に超えないよう強制クリップ */
.task-table td.col-name,
.task-table td.col-note,
.task-table th.col-name,
.task-table th.col-note {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 0;            /* table-layout:fixed と合わせて、内容で列が広がるのを完全に防ぐ */
}
.task-table tbody td.col-name { color: var(--text); font-weight: 500; }
/* table-layout: fixed なので、他の列も内容で広がらない */
.task-table tbody td.col-sec,
.task-table tbody td.col-asn {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* マイルストーン / カテゴリのバッジ — できる限り薄く */
.tag {
  display: inline-block;
  padding: 0 4px;
  border-radius: 2px;
  font-size: 9px;
  line-height: 11px;
  white-space: nowrap;
  box-sizing: border-box;
}
.tag.solid { color: white; }
.tag.outline { background: transparent; }

/* Status バッジ */
.status-badge {
  display: inline-block;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  box-sizing: border-box;
}

/* テーブル ヘッダ内のラベル＋フィルタ — できる限り詰める */
.th-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1px;
  height: 100%;
  padding: 1px 0 3px 0;
}
.th-label {
  font-size: 10px;
  line-height: 1.2;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .02em;
}
/* 並び替え可能な列ヘッダ。クリックでソート。横幅は増やさず、
   矢印はアクティブ列のときだけ表示する（fixed レイアウトで列は広がらない）。 */
.th-label[data-sort] {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 1px;
  overflow: hidden;
}
.th-label[data-sort]:hover { color: var(--primary); }
.th-label.sort-active { color: var(--primary); }
.th-label .sort-arrow { font-size: 7px; line-height: 1; flex-shrink: 0; }
.th-stack select,
.th-stack input {
  width: 100%;
  box-sizing: border-box;
  padding: 1px 4px;
  font-size: 10px;
  line-height: 1.4;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: white;
  color: var(--text);
  font: inherit;
  font-size: 10px;
  appearance: none;
  -webkit-appearance: none;
}
.th-stack select { padding-right: 18px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 10px) 50%, calc(100% - 6px) 50%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
/* 開始日 / 終了日フィルタ: 入力テキスト部を隠し、カレンダーアイコンだけ表示 */
.th-stack input[type="date"] {
  width: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  position: relative;
}
.th-stack input[type="date"]::-webkit-datetime-edit { display: none; }
.th-stack input[type="date"]::-webkit-inner-spin-button { display: none; }
.th-stack input[type="date"]::-webkit-clear-button { display: none; }
.th-stack input[type="date"]::-webkit-calendar-picker-indicator {
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  opacity: 0.6;
  cursor: pointer;
}
.th-stack input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
/* 値が入っている時は色を変える（自動判定がないので class で後で付ける） */
.th-stack input[type="date"].active::-webkit-calendar-picker-indicator { filter: invert(35%) sepia(99%) saturate(2000%) hue-rotate(220deg); opacity: 1; }
.th-stack input[type="number"] { padding: 0 2px; }
.th-stack input:focus,
.th-stack select:focus {
  outline: none;
  border-color: var(--primary);
}

/* マルチセレクト（フィルタ列） */
.multi-select { width: 100%; }
.multi-select .ms-toggle {
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px 0 3px;
  font-size: 10px;
  line-height: 14px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: white;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 6px) 55%, calc(100% - 3px) 55%;
  background-size: 3px 3px, 3px 3px;
  background-repeat: no-repeat;
}
.multi-select .ms-toggle.active {
  border-color: var(--primary);
  color: var(--primary);
  background-color: #eef2ff;
}
.multi-select .ms-toggle:focus,
.multi-select .ms-toggle:hover { border-color: var(--primary); }

/* body 直下に出すポップアップ */
.ms-popup {
  position: fixed;
  z-index: 200;
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
  padding: 4px 0;
  max-height: 320px;
  overflow-y: auto;
  font-size: 10px;
  min-width: 140px;
}
.ms-popup[hidden] { display: none; }
.ms-popup .ms-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  cursor: pointer;
  user-select: none;
}
.ms-popup .ms-item:hover { background: #f1f5f9; }
.ms-popup .ms-item input { margin: 0; }
.ms-popup .ms-all {
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  padding-bottom: 6px;
  font-weight: 600;
}

.milestone-head {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  margin: 14px 0 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.category-head {
  font-size: 11px;
  font-weight: 700;
  margin: 6px 0 2px 0;
  letter-spacing: .04em;
}
.cat-dot {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block;
}
.task-item {
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
}
.task-item:hover { background: #f1f5f9; }
.task-text { min-width: 0; flex: 1; }
.task-item .name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-item .task-sub {
  color: var(--muted); font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-item .meta {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
  background: #f1f5f9;
  color: var(--muted);
  align-self: center;
}
.muted { color: var(--muted); font-size: 10px; padding: 10px; }

#ganttArea {
  /* もう個別スクロールはしない。中身そのままの大きさ */
  position: relative;
  flex-shrink: 0;       /* main の flex 縮みを防ぐ */
}

#gantt { width: max-content; }
/* gantt-container 内のスクロールを切る — 縦は main, 横も main がスクロール */
#gantt > .gantt-container {
  overflow: visible !important;
}

/* Frappe Gantt: バー色は JS で fill を上書きする（カテゴリ／マイルストーン由来） */
/* 進捗は運用しないため、進捗の塗りと進捗つまみ（ハンドル）を隠す */
.gantt .bar-wrapper .bar-progress,
.gantt .handle.progress { display: none; }

/* 日付未定のタスクは行だけ残し、バー・ラベル・操作ハンドルを隠す */
.gantt .bar-wrapper.no-dates .bar,
.gantt .bar-wrapper.no-dates .bar-label,
.gantt .bar-wrapper.no-dates .handle { display: none; }
.gantt .bar-label { fill: var(--text); font-weight: 400; font-size: 9px; }
.gantt .bar-label.big { fill: var(--text); text-anchor: start; }
.gantt .today-highlight { fill: rgba(99, 102, 241, 0.1); }
/* ヘッダの文字も他とサイズ・太さを揃える */
.gantt-container .lower-text { font-size: 9px; font-weight: 400; }
.gantt-container .upper-text { font-size: 9px; font-weight: 500; }

/* 日付ごとの縦線を見えるように（デフォルトは #f3f3f3 でほぼ見えない） */
:root {
  --g-tick-color: #e2e8f0;        /* 日ごとの縦線 */
  --g-tick-color-thick: #e2e8f0;  /* 週/月境界も同じ色（強調しない） */
  --g-weekend-highlight-color: #fee2e2;     /* 土日・祝日の背景（薄い赤） */
  --g-weekend-label-color: #ef4444;         /* 祝日ラベル（吹き出し）の色 */
}
.gantt .tick { stroke-width: 0.6 !important; }
.gantt .tick.thick { stroke-width: 0.6 !important; }
/* 日付ヘッダの下に罫線を引いて、テーブル側の thead 罫線と揃える
   （ガント本体の先頭に横線が無く、表のヘッダだけ線がある状態を解消）。
   grid-header は box-sizing:border-box・高さ固定なので、罫線を足しても
   本体（バー）の位置はずれない。 */
.gantt-container .grid-header {
  border-bottom: 1px solid #94a3b8 !important;
  /* main がスクロールコンテナになった環境では「左固定」は不要
     （サイドバー側に左 sticky を任せる）。横スクロールしたら一緒に動く。 */
  left: auto !important;
  right: auto !important;
}
.gantt-container .current-upper {
  /* "現在の月" ラベルの sticky-left は要らない（ガント全体が横スクロールする） */
  position: static !important;
  padding-left: 0 !important;
}

/* 祝日ラベル吹き出し */
.gantt-container .holiday-label {
  background: var(--g-weekend-label-color);
  color: white;
}
/* ヘッダの日付ラベル：土日・祝日を赤に */
.gantt-container .lower-text.is-holiday {
  color: #dc2626;
  font-weight: 500;
}
/* Day 表示で曜日を日付の下に */
.gantt-container .lower-text.with-weekday {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.0;
  gap: 1px;
}
.gantt-container .lower-text.with-weekday .date-num { font-size: 9px; }
.gantt-container .lower-text.with-weekday .weekday  { font-size: 8px; opacity: 0.8; }

/* Status: 完了は不透明強め、不要・保留は半透明 */
.gantt .bar-wrapper.status-完了      .bar-progress { fill: rgba(255,255,255,0.35); }
.gantt .bar-wrapper.status-不要      { opacity: 0.35; }
.gantt .bar-wrapper.status-保留      { opacity: 0.55; }
.gantt .bar-wrapper.status-未対応    .bar-progress { fill: rgba(0,0,0,0.08); }
.gantt .bar-wrapper.status-対応中    .bar-progress { fill: rgba(0,0,0,0.30); }

.empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 20px;
  color: var(--muted);
  background: var(--bg);
  z-index: 1;
}
[hidden] { display: none !important; }

/* Modals */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal[hidden] { display: none; }
.modal-content {
  background: var(--surface);
  border-radius: 10px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .2);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: 13px; }
.modal-close {
  background: transparent;
  border: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.modal form {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  color: var(--muted);
}
.modal form input,
.modal form select,
.modal form textarea {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}
.modal form textarea { resize: vertical; min-height: 60px; }
/* 先行タスク：入力した順番号 → タスク名のプレビュー */
.deps-preview {
  font-size: 10px;
  color: var(--muted);
  margin-top: -6px;
  line-height: 1.4;
  word-break: break-all;
}
.modal form input[type="color"] {
  padding: 2px;
  height: 36px;
  width: 100%;
}
.checkbox {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  color: var(--text) !important;
  font-size: 11px !important;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.modal-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.spacer { flex: 1; }

/* --- マスタデータ管理 --- */
#mastersView {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: 16px 20px 40px;
}
.masters-head h2 { margin: 0 0 4px; font-size: 16px; }
.masters-head .muted { padding: 0; font-size: 12px; display: block; margin-bottom: 12px; }
.masters-admin {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  align-items: start;
}
.master-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.master-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.master-panel-head h3 { margin: 0; font-size: 13px; }
.master-list { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow: auto; }
.master-row { display: flex; align-items: center; gap: 6px; }
.master-row .master-color {
  width: 28px; height: 28px; padding: 0; border: 1px solid var(--border);
  border-radius: 6px; background: none; cursor: pointer; flex: none;
}
.master-row .master-value {
  flex: 1; min-width: 0; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 6px; font-size: 13px;
}
.master-row .icon-btn { flex: none; }
.master-row .icon-btn.danger { color: #ef4444; }
.master-row .icon-btn:disabled { opacity: .3; cursor: default; }
.master-add { width: 100%; margin-top: 8px; }

/* セクション行：担当ひも付けのマルチセレクト */
.master-row .master-asn { flex: 1 1 80px; min-width: 64px; }
.master-row .master-asn .ms-toggle {
  width: 100%; box-sizing: border-box; padding: 4px 18px 4px 8px;
  font-size: 12px; line-height: 16px; text-align: left;
  border: 1px solid var(--border); border-radius: 6px; background: white;
  color: var(--text); cursor: pointer; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; position: relative;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 9px) 55%, calc(100% - 6px) 55%;
  background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
}
.master-row .master-asn .ms-toggle.active { border-color: var(--primary); color: var(--primary); background-color: #eef2ff; }
.master-row .master-asn .ms-toggle:hover { border-color: var(--primary); }

.master-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px);
  background: #0f172a; color: #fff; padding: 8px 16px; border-radius: 8px;
  font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 1000;
}
.master-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- ログイン --- */
.login-content { max-width: 380px; }
.login-content label { display: block; margin: 8px 0; font-size: 12px; color: var(--muted); }
.login-content input, .login-content select {
  display: block; width: 100%; box-sizing: border-box; margin-top: 3px;
  padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; color: var(--text);
}
#userChip { font-size: 12px; }

/* --- ガント表示期間 --- */
.range-field { display: inline-flex; align-items: center; gap: 4px; }
.range-field input[type="date"] { padding: 2px 4px; font-size: 11px; }
.range-field span { color: var(--muted); }
#rangeClearBtn { padding: 0 6px; }

/* タスクの階層インデント（行高に影響しないようインライン要素で構成する） */
#taskListBody .name-wrap { display: inline; }
#taskListBody .tree-toggle { display: inline-block; width: 12px; text-align: center; color: var(--muted); font-size: 8px; vertical-align: middle; }
#taskListBody .tree-toggle.clickable { cursor: pointer; }
#taskListBody .tree-toggle.clickable:hover { color: var(--primary); }

/* タスク名の参照リンク */
.task-link { margin-left: 5px; text-decoration: none; font-size: 11px; opacity: .8; }
.task-link:hover { opacity: 1; }

/* 右クリックメニュー */
.ctx-menu {
  position: fixed; z-index: 1000; min-width: 180px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 10px 28px rgba(15,23,42,.18); padding: 4px;
}
.ctx-menu .ctx-item {
  display: block; width: 100%; text-align: left; box-sizing: border-box;
  padding: 7px 10px; border: 0; background: none; border-radius: 6px;
  font-size: 13px; color: var(--text); cursor: pointer;
}
.ctx-menu .ctx-item:hover { background: #f1f5f9; }
.ctx-menu .ctx-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* コピー/カット用：選択行・切り取り行 */
#taskListBody tr.current-row > td { background: rgba(79, 70, 229, 0.08); }
#taskListBody tr.selected-row > td { background: rgba(79, 70, 229, 0.16); }
/* アクティブセル（Enter / ダブルクリックで編集する対象） */
#taskListBody td.active-cell { box-shadow: inset 0 0 0 2px var(--primary); }
#taskListBody tr.cut-row > td { opacity: .5; }
#taskListBody tr.cut-row.current-row > td { opacity: .6; }
/* ドラッグ範囲選択中はテキスト選択を抑止 */
body.row-selecting, body.row-selecting * { user-select: none; }

/* 行ドラッグ＆ドロップ並べ替え */
#taskListBody .sortkey-cell { cursor: grab; }
#taskListBody .sortkey-cell:active { cursor: grabbing; }
#taskListBody tr.drop-before > td { box-shadow: inset 0 2px 0 0 var(--primary); }
#taskListBody tr.drop-after  > td { box-shadow: inset 0 -2px 0 0 var(--primary); }

/* --- 変更履歴 --- */
#historyView { flex: 1; min-width: 0; overflow: auto; padding: 16px 20px 40px; }
.history-list { display: flex; flex-direction: column; gap: 8px; max-width: 900px; }
.history-entry {
  border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: 6px; padding: 8px 12px; background: var(--surface);
}
.history-entry.create { border-left-color: #22c55e; }
.history-entry.update { border-left-color: #3b82f6; }
.history-entry.delete { border-left-color: #ef4444; }
.history-head { font-size: 12px; color: var(--text); }
.history-changes { margin: 6px 0 0; padding-left: 18px; }
.history-changes li { font-size: 12px; color: var(--muted); line-height: 1.6; }
.history-list.compact .history-entry { padding: 6px 10px; }

/* アカウント設定 */
#accountView { flex: 1; min-width: 0; overflow: auto; padding: 16px 20px 40px; background: var(--bg); }
.account { max-width: 640px; margin: 0 auto; }
.account-head h2 { margin: 0 0 16px; font-size: 18px; }
.account-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; margin-bottom: 14px; }
.account-card h3 { margin: 0 0 10px; font-size: 13px; }
.account-note { font-size: 12px; margin: 0 0 10px; line-height: 1.6; }
.account-row { display: flex; gap: 12px; padding: 4px 0; font-size: 13px; }
.account-k { width: 80px; color: var(--muted); flex-shrink: 0; }
.account-v { font-weight: 600; }
.account-field { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.account-field select { font-size: 13px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); min-width: 180px; }
.account-ms { display: inline-block; min-width: 220px; }
.account-ms .ms-toggle { min-width: 220px; text-align: left; }
.account-userlist { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.account-userlist .account-row { align-items: center; justify-content: space-between; gap: 12px; }
.account-userlist .account-k { width: auto; flex: 1; color: var(--text); }
.account-role-sel { font-size: 13px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); flex-shrink: 0; }

/* --- 承認（ハザード）：ナビバッジ / ゴーストバー / 受信箱（段階3） --- */
.nav-badge { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px; font-size: 11px; line-height: 16px; text-align: center; color: #fff; background: var(--danger); border-radius: 8px; vertical-align: middle; }

/* committed バーを赤く（ハザード） */
#gantt .bar-wrapper.hazard .bar { fill: var(--danger) !important; }
/* proposed（本来位置）のゴーストバー */
#gantt .ghost-bar { fill: rgba(220, 38, 38, 0.12); stroke: var(--danger); stroke-width: 1.2; stroke-dasharray: 4 2; pointer-events: none; }

.approvals { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.approval-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--muted); border-radius: 10px; padding: 12px 16px; }
.approval-card.mine { border-left-color: var(--danger); }
.approval-head { display: flex; align-items: baseline; gap: 10px; }
.approval-title { font-weight: 600; font-size: 14px; }
.approval-sec { font-size: 11px; color: var(--muted); background: #f1f5f9; padding: 1px 8px; border-radius: 6px; }
.approval-diff { margin: 8px 0 4px; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.approval-from { color: var(--muted); text-decoration: line-through; }
.approval-arrow { color: var(--danger); font-weight: 700; }
.approval-to { color: var(--danger); font-weight: 600; }
.approval-meta { font-size: 12px; margin-bottom: 8px; }
.approval-actions { display: flex; align-items: center; gap: 8px; }
.approval-wait { font-size: 12px; }

/* マスタ管理：マイルストーンの完了チェック */
.master-done { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Google 認証ゲート */
.auth-gate { position: fixed; inset: 0; z-index: 1000; background: #0f172a; display: flex; align-items: center; justify-content: center; }
.auth-card { background: #fff; border-radius: 12px; padding: 32px 36px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.35); min-width: 300px; }
.auth-logo { font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.auth-card h2 { margin: 0 0 8px; font-size: 18px; }
.auth-card p { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
#googleAuthButton { display: flex; justify-content: center; }

/* マイページ（個人ダッシュボード） */
#myPageView { flex: 1; min-width: 0; overflow: auto; padding: 16px 20px 40px; background: var(--bg); }
.mypage { max-width: 1100px; margin: 0 auto; }
.mypage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.mypage-head h2 { margin: 0; font-size: 18px; }
.mypage-id { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.mypage-id select { font-size: 12px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.mypage-hint { font-size: 13px; }
.mypage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.mp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.mp-alertline { display: flex; gap: 8px; margin: 0 0 8px; flex-wrap: wrap; }
.mp-badge { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 10px; }
.mp-badge.mp-bad { background: #FEE2E2; color: var(--danger); }
.mp-badge.mp-warn { background: #FEF3C7; color: #B45309; }
.mp-card h3 { margin: 0 0 8px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.mp-count { background: #eef2ff; color: var(--primary); border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.mp-danger { border-top: 3px solid var(--danger); }
.mp-dep { border-top: 3px solid var(--primary); }
.mp-sub { font-size: 11px; color: var(--muted); font-weight: 600; margin: 10px 0 2px; }
.mp-empty { font-size: 12px; color: var(--muted); padding: 6px 0; }
.mp-task { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.mp-task:hover { background: #f1f5f9; }
.mp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mp-name { font-weight: 600; flex-shrink: 0; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-meta { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-extra { margin-left: auto; font-size: 11px; font-weight: 700; white-space: nowrap; padding-left: 8px; }
.mp-extra.mp-bad { color: var(--danger); }
.mp-extra.mp-warn { color: #b45309; }
@media (max-width: 720px) { .mypage-grid { grid-template-columns: 1fr; } }

/* タスクモーダル内の履歴 */
.task-history { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px; }
.task-history > summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.task-history .history-list { margin-top: 8px; max-height: 220px; overflow: auto; }

/* 段階②：所属セレクタ（topbar） */
.my-scope { display: inline-flex; align-items: center; gap: 4px; }
.my-scope #mySectionsSelect { display: inline-block; min-width: 78px; }
.my-scope #mySectionsSelect .ms-toggle { min-width: 78px; }
#myScopeBtn.active { background: #eef2ff; color: var(--primary); border-color: var(--primary); }

/* 負荷山積みペイン（ガント下部・管理者向け） */
#loadToggleBtn.active { background: #eef2ff; color: var(--primary); border-color: var(--primary); }
#loadPane {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--surface); border-top: 2px solid #94a3b8;
  box-shadow: 0 -3px 10px rgba(15, 23, 42, .12);
  display: flex; flex-direction: column; max-height: 45%;
}
.load-head {
  display: flex; align-items: center; gap: 10px; padding: 5px 10px;
  border-bottom: 1px solid var(--border); flex-shrink: 0; font-size: 12px;
}
.load-head strong { font-size: 12px; }
.load-head .muted { font-size: 10px; color: var(--muted); }
.load-head .spacer { flex: 1; }
/* 横は main（ガント）と連動させるため自前スクロールを切る。縦は独立してスクロール。 */
.load-scroll { overflow-x: hidden; overflow-y: auto; }
.load-track { width: max-content; min-width: 100%; }
.load-row { display: flex; align-items: stretch; }
.load-row { cursor: pointer; }
.load-row:hover .load-name { background: #f8fafc; }
.load-name {
  position: sticky; left: 0; z-index: 2;
  width: var(--load-name-w, 200px); flex-shrink: 0; height: 40px;
  display: flex; align-items: center; justify-content: flex-end; text-align: right;
  padding: 0 12px;
  font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--surface); border-right: 1px solid var(--border);
  border-bottom: 1px solid #eef2f7;
}
.load-name.has-over { color: #b91c1c; font-weight: 600; }
/* 行を選んだら名前を強調 */
.load-row.sel .load-name { background: #fff7ed; color: #c2410c; font-weight: 700; }

/* 選択した担当のガントバーを強調し、他を薄くする */
#gantt.dim-unhighlighted .bar-wrapper:not(.assignee-hi) { opacity: .18; }
#gantt .bar-wrapper.assignee-hi .bar {
  stroke: #0f172a; stroke-width: 2.5px;
  filter: drop-shadow(0 0 2px rgba(15, 23, 42, .35));
}
#gantt .bar-wrapper.assignee-hi .bar-label { font-weight: 700; }
.load-bars {
  position: relative; height: 40px; flex-shrink: 0;
  border-bottom: 1px solid #eef2f7;
  /* 日列の薄いグリッド（ガントの列に対応） */
  background-image: repeating-linear-gradient(90deg,
    transparent 0, transparent calc(var(--load-col-w, 22px) - 1px),
    #f1f5f9 calc(var(--load-col-w, 22px) - 1px), #f1f5f9 var(--load-col-w, 22px));
}
/* 1.0 ライン（その人の1日分の能力） */
.load-bars::before {
  content: ""; position: absolute; left: 0; right: 0;
  bottom: var(--load-cap-px, 20px);
  border-top: 1px dashed #f59e0b; pointer-events: none;
}
.load-bar {
  position: absolute; bottom: 0; border-radius: 2px 2px 0 0;
  background: var(--primary); cursor: pointer;
}
.load-bar.over { background: var(--danger); }
.load-bar:hover { filter: brightness(1.15); }
/* クリックで選んだ日のセル */
.load-bar.sel { box-shadow: 0 0 0 2px #0f172a; z-index: 1; }
.load-empty { padding: 16px; color: var(--muted); font-size: 12px; }