/* ========== WBSプランナー専用スタイル(共通style.cssの上に重ねる) ========== */

.wbs-wrap { max-height: 72vh; }
.wbs-table { font-size: 12.5px; }
.wbs-table th, .wbs-table td { min-width: 0; }

/* 固定列(横スクロールしても WBS番号とタスク名が見えるよう左に張り付く) */
.wbs-table th.col-drag, .wbs-table td.col-drag {
  position: sticky; left: 0; z-index: 2;
  width: 28px; min-width: 28px; max-width: 28px;
  cursor: grab; color: #9aa; user-select: none;
}
.wbs-table th.col-wbsno, .wbs-table td.col-wbsno {
  position: sticky; left: 28px; z-index: 2;
  width: 48px; min-width: 48px; max-width: 48px;
  font-weight: 600; color: #567;
}
.wbs-table th.col-name, .wbs-table td.col-name {
  position: sticky; left: 76px; z-index: 2;
  width: 220px; min-width: 220px; max-width: 220px;
  text-align: left;
}
.wbs-table thead th.col-drag, .wbs-table thead th.col-wbsno, .wbs-table thead th.col-name { z-index: 5; }
.wbs-table .col-name input { width: 100%; border: none; background: transparent; font-size: 12.5px; padding: 2px; }
.wbs-table .col-name input:focus { outline: 1px solid #1a63b0; background: #fff; }
.wbs-table td select, .wbs-table td input[type="number"], .wbs-table td input[type="text"], .wbs-table td input[type="date"] {
  border: 1px solid transparent; background: transparent; font-size: 12px; padding: 1px 2px;
}
.wbs-table td select:hover, .wbs-table td input:hover { border-color: #c3cdd8; background: #fff; }
.wbs-table td select:focus, .wbs-table td input:focus { border-color: #1a63b0; background: #fff; outline: none; }
/* 難易度(タスク=難易度 / セル背景の淡い色で判別。過剰装飾はしない) */
.wbs-table td.col-diff { text-align: center; }
.wbs-table td.col-diff select { width: 66px; }
.wbs-table td.diff-1 { background: #eef7ee; }  /* 易しい: 薄い緑系 */
.wbs-table td.diff-3 { background: #fbeeee; }  /* 難しい: 薄い赤系 */
.wbs-table .col-eff input { width: 52px; text-align: right; }
.wbs-table .col-deps input { width: 74px; }
.wbs-table .col-prog input { width: 48px; text-align: right; }
.wbs-table .col-date { min-width: 74px; font-variant-numeric: tabular-nums; }
.wbs-table .col-ops { white-space: nowrap; }
.wbs-table .col-ops button {
  border: 1px solid #c3cdd8; background: #fff; border-radius: 4px;
  width: 22px; height: 22px; cursor: pointer; font-size: 11px; padding: 0; margin: 0 1px; color: #345;
}
.wbs-table .col-ops button:hover { background: #eef4fb; }

/* 階層 */
.wbs-table tr.parent-row td { background: #f2f6fa; font-weight: 600; }
.wbs-table tr.parent-row .col-name { color: #1f4e79; }
.indent-1 .name-inner { padding-left: 18px; }
.indent-2 .name-inner { padding-left: 36px; }
.indent-3 .name-inner { padding-left: 54px; }
.name-inner { display: flex; align-items: center; gap: 4px; }

/* 状態 */
.st-done { color: #1e8449; font-weight: 600; }
.st-doing { color: #b9770e; font-weight: 600; }
.st-todo { color: #789; }

/* ドラッグ中 */
tr.dragging { opacity: .45; }
tr.drop-target td { border-top: 2px solid #1a63b0; }

/* ガント部分 */
.wbs-table th.g-day { min-width: 20px; width: 20px; padding: 2px 0; font-weight: 400; font-size: 10.5px; }
.wbs-table td.g-cell { min-width: 20px; width: 20px; padding: 0; height: 24px; position: relative; }
.wbs-table .g-off { background: #f0f2f5; }          /* 土日祝・休業日 */
.wbs-table .g-today { box-shadow: inset 2px 0 0 #e74c3c; }
.g-bar { position: absolute; inset: 5px 1px; border-radius: 3px; opacity: .9; }
.g-bar.g-parent { inset: 9px 0; border-radius: 1px; background: #56708a; }
.g-bar.g-progress { opacity: 1; inset: 5px 1px auto 1px; height: 5px; border-radius: 3px 3px 0 0; filter: brightness(.75); }

/* 凡例のメンバー色 */
.legend .member-chip { width: 14px; height: 14px; border-radius: 3px; display: inline-block; border: 1px solid #99a; }

/* 警告パネル内の詳細 */
#warnPanel ul { margin: 4px 0 0 18px; }

/* 開始固定の解除ボタン */
.fix-clear {
  border: none; background: none; color: #c0392b;
  cursor: pointer; font-size: 11px; padding: 0 2px;
}

/* ========== 進捗(予実)タブ ========== */
.pg-section { margin-bottom: 22px; }
.pg-section h2 { font-size: 15px; margin: 0 0 10px; }

/* サマリーカード */
.pg-cards { display: flex; flex-wrap: wrap; gap: 12px; }
.pg-card {
  flex: 1 1 200px; min-width: 180px;
  border: 1px solid #d5dbe2; border-radius: 8px;
  background: #f8fafc; padding: 12px 14px;
}
.pg-card-label { font-size: 12px; color: #667; margin-bottom: 4px; }
.pg-card-value { font-size: 24px; font-weight: 700; color: #1f4e79; font-variant-numeric: tabular-nums; }
.pg-card-sub { font-size: 12px; color: #789; margin-top: 3px; }
.pg-card-value.pg-ahead, .pg-card-sub.pg-ahead { color: #1e8449; }
.pg-card-value.pg-behind, .pg-card-sub.pg-behind { color: #c0392b; }
.pg-card-value.pg-flat, .pg-card-sub.pg-flat { color: #667; }
@media (max-width: 900px) { .pg-card { flex-basis: calc(50% - 6px); } }

/* Sカーブ凡例 */
.pg-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 6px; font-size: 12px; color: #556; }
.pg-leg-item { display: inline-flex; align-items: center; gap: 5px; }
.pg-leg-line { width: 18px; height: 0; border-top: 2px solid #1a63b0; }
.pg-leg-dot { width: 10px; height: 10px; border-radius: 50%; background: #1e8449; }
.pg-leg-today { width: 0; height: 12px; border-left: 2px dashed #c0392b; }

/* Sカーブ SVG */
.pg-svg { display: block; width: 100%; height: auto; border: 1px solid #e3e8ee; border-radius: 6px; background: #fff; }
.pg-svg .pg-grid { stroke: #eef1f5; stroke-width: 1; }
.pg-svg .pg-axisline { stroke: #c3cdd8; stroke-width: 1; }
.pg-svg .pg-axis { font-size: 11px; fill: #667; }
.pg-svg .pg-plan-line { fill: none; stroke: #1a63b0; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pg-svg .pg-today-line { stroke: #c0392b; stroke-width: 1.5; stroke-dasharray: 4 3; }
.pg-svg .pg-today-label { font-size: 11px; fill: #c0392b; font-weight: 600; }
.pg-svg .pg-ev-dot { fill: #1e8449; stroke: #fff; stroke-width: 1.5; }
.pg-svg .pg-ev-label { font-size: 11px; fill: #1e8449; font-weight: 600; }

/* タスク別予実バー */
.pg-task-row {
  display: grid; grid-template-columns: minmax(140px, 1.4fr) 3fr auto;
  gap: 10px; align-items: center;
  padding: 6px 8px; border-bottom: 1px solid #eef1f5;
}
.pg-task-row.pg-parent { background: #f2f6fa; font-weight: 600; }
.pg-task-name { font-size: 12.5px; overflow: hidden; }
.pg-task-no { color: #567; font-weight: 600; margin-right: 6px; font-variant-numeric: tabular-nums; }
.pg-task-title { color: #223; }
.pg-task-bars { display: flex; flex-direction: column; gap: 3px; }
.pg-bar-line { display: flex; align-items: center; gap: 6px; }
.pg-bar-tag { font-size: 10.5px; color: #789; width: 30px; flex: none; text-align: right; }
.pg-bar-track { flex: 1; height: 9px; background: #eef1f5; border-radius: 5px; overflow: hidden; }
.pg-bar-fill { height: 100%; border-radius: 5px; }
.pg-bar-fill.pg-bar-plan { background: #1a63b0; }
.pg-bar-fill.pg-bar-act { background: #1e8449; }
.pg-bar-pct { font-size: 11px; color: #556; width: 46px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.pg-nosched { font-size: 12px; color: #99a; }
.pg-task-badge { text-align: right; }
.pg-badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.pg-b-ahead { background: #eafaf1; color: #1e8449; }
.pg-b-behind { background: #fdecea; color: #c0392b; }
.pg-b-ok { background: #eef2f7; color: #667; }
.pg-b-none { background: #f2f4f7; color: #99a; }

/* メンバー別 */
.pg-mem-row { display: grid; grid-template-columns: minmax(90px, 140px) 1fr; gap: 12px; align-items: center; padding: 7px 8px; border-bottom: 1px solid #eef1f5; }
.pg-mem-name { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.pg-mem-chip { width: 12px; height: 12px; border-radius: 3px; border: 1px solid #99a; flex: none; }
.pg-mem-bars { display: flex; flex-direction: column; gap: 3px; }
.pg-mem-line { display: flex; align-items: center; gap: 6px; }

/* ========== 日付リストエディタ(休み予定・会社休業日) ========== */
.dl-editor-host { display: inline-block; }
.dl-editor { text-align: left; }
.dl-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dl-toggle { width: auto; padding: 0 10px; height: 26px; white-space: nowrap; }
.dl-preview { font-size: 11.5px; color: #789; font-variant-numeric: tabular-nums; }
.dl-body {
  margin-top: 8px; display: flex; flex-wrap: wrap; gap: 14px;
  padding: 10px; border: 1px solid #dce3ea; border-radius: 8px; background: #f8fafc;
}
.dl-cal-wrap { width: 240px; flex: none; }
.dl-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dl-cal-title { font-size: 13px; font-weight: 600; color: #1f4e79; }
.dl-nav {
  border: 1px solid #b8c2cc; background: #fff; border-radius: 4px;
  width: 26px; height: 24px; cursor: pointer; color: #1a63b0; font-size: 14px; line-height: 1;
}
.dl-nav:hover { background: #eef4fb; }
.dl-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dl-wd { text-align: center; font-size: 10.5px; color: #789; padding: 2px 0; }
.dl-wd.sun { color: #c0392b; }
.dl-wd.sat { color: #1a63b0; }
.dl-day {
  height: 28px; display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; border-radius: 4px; cursor: pointer; color: #334; user-select: none;
  background: #fff; border: 1px solid #eef1f5;
}
.dl-day:hover { background: #eef4fb; border-color: #c3cdd8; }
.dl-day.sun { color: #c0392b; }
.dl-day.sat { color: #1a63b0; }
.dl-day.other { color: #bcc4cd; background: #fbfcfd; }
.dl-day.today { border-color: #e6a; box-shadow: inset 0 0 0 1px #edb8c6; }
.dl-day.sel { background: #1a63b0; color: #fff; border-color: #1a63b0; font-weight: 600; }
.dl-day.sel.other { background: #7ea6cf; border-color: #7ea6cf; }
.dl-list { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.dl-row { display: flex; align-items: center; gap: 6px; }
.dl-date { font-size: 12px; color: #445; width: 108px; flex: none; font-variant-numeric: tabular-nums; }
.dl-note { flex: 1; min-width: 0; border: 1px solid #b8c2cc; border-radius: 4px; padding: 3px 6px; font-size: 12px; }
.dl-note:focus { border-color: #1a63b0; outline: none; }
.dl-del { border: none; background: none; color: #c0392b; cursor: pointer; font-size: 13px; padding: 0 2px; flex: none; }
.dl-empty { font-size: 12px; }
.off-cell { text-align: left; }

/* ========== モバイル(狭幅): 固定列を圧縮してガント可視域を確保 ==========
   デスクトップ幅は不変。375px 幅でも固定3列(⠿ / WBS番号 / タスク名)の合計を
   ~138px に抑え、ガント可視域を 170px 以上残す。left オフセットは幅に合わせて再計算。 */
@media (max-width: 768px) {
  .wbs-table th.col-drag, .wbs-table td.col-drag {
    left: 0; width: 20px; min-width: 20px; max-width: 20px;
  }
  .wbs-table th.col-wbsno, .wbs-table td.col-wbsno {
    left: 20px; width: 34px; min-width: 34px; max-width: 34px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .wbs-table th.col-name, .wbs-table td.col-name {
    left: 54px; width: 84px; min-width: 84px; max-width: 84px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* セル内 input が固定幅を押し広げない(flex 子の min-width:auto を解除) */
  .wbs-table td.col-name .name-inner { min-width: 0; }
  .wbs-table .col-name input { width: 100%; min-width: 0; max-width: 100%; }
  /* 階層インデントも縮める(84px 内でタスク名の頭が見えるように) */
  .indent-1 .name-inner { padding-left: 10px; }
  .indent-2 .name-inner { padding-left: 20px; }
  .indent-3 .name-inner { padding-left: 30px; }
}

@media print {
  /* 共通style.cssは #tab-grid 前提のため、WBS側のタブ構成で上書き(idセレクタが勝つ) */
  #tab-tasks { display: block !important; }
  .tab-panel:not(#tab-tasks) { display: none !important; }
  .staff-actions { display: none !important; }
  .wbs-wrap { max-height: none; overflow: visible; }
}