/**
 * site.css - IesPortal カスタムスタイル
 *
 * カラーテーマは CSS 変数（--ies-*）で一元管理する。
 * 色を変更する場合は :root セクションの変数値のみ修正すれば全体に反映される。
 *
 * **ここに書くのは標準（IES ブルー）の値。** 利用者がテーマを選んだときは、
 * theme.css がこの変数をテーマの色に置き換える（設計書 04 の 3.6）。
 * **IES ブルーを直接書かない。** #1a6bbf と書くと、テーマを選んでもそこだけ残る。
 */

/* ===== カラーテーマ変数 ===== */
:root {
  --ies-primary: #1a6bbf;        /* メインカラー（IES ブルー） */
  --ies-primary-dark: #145599;   /* ホバー・フォーカス時の濃いブルー */
  --ies-primary-light: #2a7fd4;  /* フォーカスリング用の明るいブルー */
  --ies-primary-bg: #e8f1fb;     /* 背景用の薄いブルー */
  --ies-primary-text: #ffffff;   /* メインカラー上のテキスト色 */
  --ies-primary-rgb: 26, 107, 191;          /* メインカラーの RGB。半透明で重ねるときに使う */
  --ies-accent-text: var(--ies-primary);    /* 文字として使うメインカラー。暗いテーマでは本文の色になる */

  /* 日付の意味の色（法定休日は赤、法定外休日は青、今日は黄）。日報の日次・週次・月次と休日カレンダーで共通。
     **休日は曜日ではなく休日カレンダーの種別で決める**（設計書 01 の 4.5）。変数名の sun は法定休日、sat は法定外休日。
     **色相は意味と結び付いているため、テーマを選んでもテーマの primary には寄せない** */
  --ies-day-sun-bg: #fce8e8;                /* 法定休日のセル・日付ナビ */
  --ies-day-sat-bg: #e8f0fe;                /* 法定外休日のセル・日付ナビ */
  --ies-day-today-bg: #fff3cd;              /* 今日のセル */
  --ies-day-limit-bg: #ffd8b0;              /* 8H制限で打刻上 8 時間を超えた日の日付（設計書 01 の 6.15.5） */
  --ies-day-sun-col-bg: rgba(252, 232, 232, 0.4); /* 週次の時間表の法定休日の列 */
  --ies-day-sat-col-bg: rgba(232, 240, 254, 0.4); /* 週次の時間表の法定外休日の列 */
  --ies-day-locked-col-bg: rgba(200, 200, 200, 0.25); /* 週次の時間表の締め済みの列 */
  --ies-day-sun-text: #dc3545;              /* 法定休日の日付の文字 */
  --ies-day-sat-text: #0d6efd;              /* 法定外休日の日付の文字 */

  /* 日報の時間表（日次・週次） */
  --ies-grid-line: #e9ecef;                 /* 1 時間ごとの罫線 */
  --ies-grid-line-sub: #f0f0f0;             /* 30 分ごとの破線 */
  --ies-grid-axis-line: #dee2e6;            /* 時刻軸・列の区切り */
  --ies-time-label: #888;                   /* 時刻の文字 */
  --ies-work-hours-bg: rgba(255, 243, 205, 0.5);      /* 勤務時間帯（日次） */
  --ies-work-hours-bg-weak: rgba(255, 243, 205, 0.4); /* 勤務時間帯（週次） */
  --ies-break-bg: rgba(148, 163, 184, 0.45);          /* 休憩時間帯 */

  /* その他の部品 */
  --ies-row-stripe-bg: #f8f9fa;             /* 縞模様の偶数行（単価の月別表） */
  --ies-swatch-outline: #333;               /* プロジェクト色の選択中の枠 */

  /* JavaScript が描く部品の色（canvas に描くグラフは getComputedStyle で読む） */
  --ies-chart-text: #666;                   /* 予定 vs 実績グラフの文字（Chart.js の既定値） */
  --ies-chart-grid: rgba(0, 0, 0, 0.06);    /* 予定 vs 実績グラフのグリッド線 */
  --ies-chart-tick: #aaa;                   /* 予定 vs 実績グラフの軸の見出し */
  --ies-chart-sales-line: rgba(70, 70, 70, 0.7); /* 予定 vs 実績グラフの売上額ライン */
  --ies-hourly-leave-rgb: 13, 110, 253;     /* 日報の時間有給ブロック（枠と背景） */
  --ies-hourly-leave-text: #084298;         /* 日報の時間有給ブロックの文字 */
}

/* ===== 基本設定 ===== */
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* ===== アプリシェルレイアウト ===== */
/* ヘッダー・フッターは常に画面に固定表示し、中央のコンテンツ領域（.container）のみが独立してスクロールする */
html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header {
  flex-shrink: 0;
}

.container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* コンテンツの実際のスクロール領域。ヘッダー・フッターの実寸に自動追従するため、
   ページ側は height:100% を指定するだけで残りの高さを埋められる */
main[role="main"] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.footer {
  flex-shrink: 0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ies-primary) !important;
  color: var(--ies-primary-text);
}

/* ===== 日付の意味の色（日報の日次・週次・月次） ===== */
/* 色相は意味と結び付いているため変数で持つ。テーマのときの値は theme.css */
.ies-day-sun-text {
  color: var(--ies-day-sun-text);
}

.ies-day-sat-text {
  color: var(--ies-day-sat-text);
}

/* ===== 休日カレンダーの年度別詳細（月カレンダー。設計書 05 の 7.5.1） ===== */
/* 1 か月分の表。日曜〜土曜の 7 列を等幅にする */
.holiday-month {
  table-layout: fixed;
  font-size: 0.875rem;
}

.holiday-month th,
.holiday-month td {
  text-align: center;
  padding: 0;
}

/* 日のマス。クリックで休日を設定するためボタンにする */
.holiday-day {
  display: block;
  width: 100%;
  padding: 0.35rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  line-height: 1.2;
}

.holiday-day:hover,
.holiday-day:focus-visible {
  outline: 2px solid var(--ies-primary);
  outline-offset: -2px;
}

/* 休日の色（法定休日は赤、法定外休日は青）。セルの背景と文字の両方に付ける */
.holiday-day[data-holiday-type="Statutory"] {
  background-color: var(--ies-day-sun-bg);
  color: var(--ies-day-sun-text);
}

.holiday-day[data-holiday-type="NonStatutory"] {
  background-color: var(--ies-day-sat-bg);
  color: var(--ies-day-sat-text);
}

/* 前後の月の日は薄く表示し、クリックできない */
.holiday-day-outside {
  color: var(--bs-secondary-color);
  opacity: 0.45;
  cursor: default;
}

/* 本日は枠線で示す */
.holiday-day-today {
  box-shadow: inset 0 0 0 2px var(--bs-warning);
  font-weight: 600;
}

/* ===== 処理待ちオーバーレイ ===== */
/* エクスポート・インポート等、時間のかかる処理の間、画面全体の操作をブロックする（site.js が data-busy / data-download 属性から自動制御） */
.busy-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.35);
  cursor: wait;
}

/* ===== 日報 日次画面のレイアウト ===== */

/* ページ枠。sm以上は viewport に収め、内部だけをスクロールさせる */
.dr-day-page {
  height: 100%;
  padding-bottom: 8px;
}

/* よく使う作業パネル + 時間表を並べる領域 */
.dr-day-body {
  flex: 1 1 0;
  min-height: 0;
}

/* 時間表。sm以上は残りの高さを全部使う */
.dr-day-grid {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

/* sm未満（幅の狭いスマホ）
   **1画面に収めるのをやめ、ページスクロールを許す。**
   時間表の中は指でスクロールできない（列に触れると新規作成ドラッグが始まり
   daily-report-grid.js が preventDefault する）ため、
   表示している高さがそのまま「見える時間帯の広さ」になる。
   日付ナビ・コメント欄と高さを取り合って潰れるより、はみ出してページを
   スクロールさせる方が実用的。body は overflow:hidden で main[role=main] が
   スクロールコンテナのため、ページ枠の高さを外すと main がスクロールする */
@media (max-width: 575.98px) {
  .dr-day-page {
    height: auto;
    min-height: 100%;
  }
  .dr-day-body {
    flex: 0 0 auto;
    min-height: auto;
  }
  /* 約 5 時間分。これ未満だと時間帯の把握が難しく実用にならない */
  .dr-day-grid {
    flex: 0 0 auto;
    min-height: 320px;
    height: 320px;
  }
}

/* ===== 日報 月次の備考・コメント列の表示切り替え ===== */

/* daily-report-monthly.js が #monthlyTable にクラスを付け外しする。
   列はサーバーで常に描画し、ここで隠すだけにする（設計書 01 の 4.5.1） */
#monthlyTable.dr-hide-remarks .dr-col-remarks,
#monthlyTable.dr-hide-comment .dr-col-comment {
  display: none;
}

/* ===== よく使う作業パネル（レスポンシブ） ===== */

/* sm未満：縦並びの上段。**内容に応じた高さにし、上限を超えたら内部スクロール。**
   固定高にすると 1 件しか無くても余白を取り、逆に上限が無いと 20 件登録された
   ときに時間表がページのはるか下へ押し出される。
   上限は「3 件ぶん + ヘッダー」を目安にしている（内部スクロールは
   #quickEntryButtons の overflow-y:auto が受け持つ） */
#quickEntryPanel {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
  /* ヘッダー 40px + ボタン 3 件ぶん 160px。4 件目以降は内部スクロールになる */
  max-height: 200px;
}

/* ボタンの並び。sm以上はパネルの残りの高さを埋める */
#quickEntryButtons {
  overflow-y: auto;
  padding: 0.25rem;
  flex: 1 1 0;
}

/* sm未満：パネルが内容に応じた高さになるため、**flex-basis を auto にする。**
   0 のままだとボタンの高さがパネルの高さに反映されず 0px に潰れる
   （親が内容依存・子が basis 0 の循環）。
   あわせて **min-height: 0 が必須。** flex アイテムの既定は min-height:auto で
   内容より小さくならないため、パネルの max-height を超えた分が外へはみ出し、
   overflow-y:auto が働かず内部スクロールできない */
@media (max-width: 575.98px) {
  #quickEntryButtons {
    flex: 0 1 auto;
    min-height: 0;
  }
  /* パネルからはみ出した分を漏らさない（内部スクロールに委ねる） */
  #quickEntryPanel {
    overflow: hidden;
  }
}

/* sm以上：左列 140px 固定。残りの高さを使う */
@media (min-width: 576px) {
  #quickEntryPanel {
    flex: 0 0 140px;
    width: 140px;
    max-height: none;
  }
}

/* ===== ナビゲーションバー ===== */
.navbar-ies {
  background-color: var(--ies-primary) !important;
}

/* ナビバー内のテキストリンクを白に統一 */
.navbar-ies .navbar-brand,
.navbar-ies .nav-link,
.navbar-ies .dropdown-toggle {
  color: var(--ies-primary-text) !important;
}

/* ホバー時は半透明白 */
.navbar-ies .nav-link:hover,
.navbar-ies .dropdown-toggle:hover {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ===== ログイン画面 ===== */
/* カード上部のヘッダー帯 */
.login-header {
  background-color: var(--ies-primary);
  color: var(--ies-primary-text);
  padding: 1rem;
  border-radius: 0.375rem 0.375rem 0 0;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ヘッダーの無いレイアウト（_LayoutLogin）の本文。**ここを縦にスクロールさせる。**
   body は overflow:hidden（共通の設定。ふだんの画面は main[role=main] がスクロールする）のため、
   指定が無いと画面より長い本文（二段階認証の登録の QR コードと入力欄など）の下が切れて操作できない。
   min-height:0 が無いと flex の子が中身の高さまで伸び、overflow が効かない */
.login-main {
  min-height: 0;
  overflow-y: auto;
}

/* ===== ボタン ===== */
/* IES カラーのカスタムボタン */
.btn-ies {
  background-color: var(--ies-primary);
  border-color: var(--ies-primary);
  color: var(--ies-primary-text);
}

.btn-ies:hover {
  background-color: var(--ies-primary-dark);
  border-color: var(--ies-primary-dark);
  color: var(--ies-primary-text);
}

.btn-ies:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--ies-primary-light);
}

/* IES カラーのアウトラインボタン。
   文字と枠は --ies-accent-text（暗いテーマでは本文の色。primary のままだと暗い背景に沈む） */
.btn-outline-ies {
  border-color: var(--ies-accent-text);
  color: var(--ies-accent-text);
  background-color: transparent;
}

.btn-outline-ies:hover {
  background-color: var(--ies-primary);
  border-color: var(--ies-primary);
  color: var(--ies-primary-text);
}

/* ===== テーブル ===== */
/* 一覧画面のテーブルヘッダーを IES カラーに */
.table-ies thead {
  background-color: var(--ies-primary);
  color: var(--ies-primary-text);
}

/* ===== フォーム ===== */
/* フォーカス時のボーダー・リングを IES カラーに統一 */
.form-control:focus,
.form-select:focus {
  border-color: var(--ies-primary-light);
  box-shadow: 0 0 0 0.25rem rgba(var(--ies-primary-rgb), 0.25);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ===== ユーティリティ ===== */
/* IES カラーのテキスト。
   --ies-accent-text を使う（暗いテーマでは本文の色。primary のままだと暗い背景に沈む） */
.text-ies {
  color: var(--ies-accent-text) !important;
}

/* IES カラーの背景（バッジ等に使用） */
.bg-ies {
  background-color: var(--ies-primary) !important;
  color: var(--ies-primary-text) !important;
}

/* IES カラーの薄い背景（アイコン背景等に使用） */
.bg-ies-light {
  background-color: var(--ies-primary-bg) !important;
}

/* ===== バリデーション ===== */
/* エラーなし時は validation-summary を非表示にする（ASP.NET Core 標準ルール） */
.validation-summary-valid {
  display: none;
}

/* ===== 管理メニュー カード ===== */
/* ホバー時にボーダーとシャドウで選択フィードバックを表示 */
.card-menu {
  border: 1px solid #e0e0e0;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.card-menu:hover {
  box-shadow: 0 2px 8px rgba(var(--ies-primary-rgb), 0.15);
  border-color: var(--ies-primary-light);
}

/* ===== ヘルプ（説明書）の検索結果 ===== */
/* 語句の強調（mark）の左右の余白を詰める。Bootstrap の既定の余白だと、語の途中に空白があるように見える */
.help-search-hit mark {
  padding: 0;
}

/* ===== ヘルプ（説明書）本文 ===== */
/* Markdown を変換した HTML 本文の見た目を整える */
.help-content h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.help-content h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid #e0e0e0;
}

.help-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.help-content p,
.help-content ul,
.help-content ol {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.help-content img {
  max-width: 100%;
  height: auto;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  margin: 0.5rem 0 1rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.help-content table {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
}

.help-content table th,
.help-content table td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #dee2e6;
}

.help-content table th {
  background-color: var(--ies-primary-bg);
}

.help-content code {
  background-color: #f1f3f5;
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
}

/* ===== よく使う作業の並べ替え（quick-entry-sort.js） ===== */

/* 掴める範囲はカード本体だけ。フッターの削除ボタンは通常のクリックに残す */
.qe-sort-handle {
  cursor: grab;
}

.qe-sort-item.qe-sort-dragging .qe-sort-handle {
  cursor: grabbing;
}

/* 掴んでいるカードは枠を強調して、どれを動かしているか分かるようにする */
.qe-sort-item.qe-sort-dragging {
  border-color: var(--ies-primary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 入れ替わりが目で追えるように、位置の変化を短く滑らかにする。
   掴んでいるカード自身は指に追従させたいので対象から外す */
.qe-sort-item:not(.qe-sort-dragging) {
  transition: transform 0.12s ease;
}

/* ===== 名刺の一括取込（設計書 09 の 9 章） ===== */

/* Step1〜4 の進み具合を示すバッジ。既定は薄いグレーで、現在の Step だけを IES ブルーで塗る */
.bulk-step-badge {
  background-color: #f1f3f5;
  color: #6c757d;
}

.bulk-step-badge.bulk-step-current {
  background-color: var(--ies-primary-bg);
  color: var(--ies-accent-text);
  font-weight: 500;
}

/* レビュー一覧の行。クリックで開閉するため、ホバーで反応することを示す */
.bulk-review-row:hover {
  background-color: var(--ies-primary-bg);
}

/* 読み取り中・登録中は共通の busy-overlay（z-index:2000）で画面全体をブロックするが、
   進捗バーだけはその手前に出して見せる。オーバーレイに隠れると進み具合が分からなくなるため */
.bulk-busy-front {
  position: relative;
  z-index: 2001;
}

/* ===== プロジェクト進捗ガント =====
   HTML + CSS Grid で組む。Chart.js や専用ライブラリは使わない（設計書 13 の 7.3）。
   ラベル列と日付の格子を横に並べ、行の高さ（--gantt-row-h）で位置を揃える。 */

.gantt {
    /* 行の高さは 2 つの列で共有する。ずれると行とバーの対応が崩れる */
    --gantt-row-h: 34px;
    --gantt-axis-h: 40px;
    --gantt-label-w: 300px;
    --gantt-day-w: 22px;
    --gantt-line: #dee2e6;

    display: flex;
    border: 1px solid var(--gantt-line);
    border-radius: 0.375rem;

    /* **ガントを 1 つのスクロール枠にする**（設計書 13 の 6.2）。縦・横とも枠の中でスクロールし、
       日付の行（上）とラベル列（左）を sticky で固定する。sticky は最も近いスクロール枠に対して効くため、
       枠をここ 1 つにまとめる（日付の格子の側には横スクロールを持たせない）。
       高さは画面の残りの高さまで（下の main.progress-gantt-page） */
    overflow: auto;

    /* **列の箱を中身の高さにする（枠の高さに縮めない）。** flex の既定（stretch）だと、ラベル列の箱が
       枠の高さに揃えられ、行はその箱からはみ出して並ぶ。sticky は自分の箱の中でしか固定されないため、
       最初に見えていた高さを越えてスクロールすると見出しが流れてしまう（2026-10-08 の動作確認で起きた） */
    align-items: flex-start;
}

/* **進捗ガントの画面は、縦のスクロールをガントの枠の 1 つだけにする**（設計書 13 の 6.18）。
   スクロールの入れ物（main）を縦の flex にし、見出し・選択と指標・操作の行は縮めず、ガントの枠に残りの高さを割り当てる。
   ガントの枠は中身の高さまで伸び、画面に収まらなければ残りの高さまで縮む（枠の中でスクロールする）。
   **最低 320px は保つ。** 残りがそれより低い画面だけ、main（ページ全体）がスクロールする（ガントが数行しか見えなくなるのを避ける）。
   高さを JS で測らないのは、画面の大きさの変更や知らせを閉じたときにも CSS なら追従するため */
main.progress-gantt-page {
    display: flex;
    flex-direction: column;
}

main.progress-gantt-page > * {
    flex-shrink: 0;
}

main.progress-gantt-page > .gantt {
    flex: 0 1 auto;
    min-height: 320px;
}

/* プロジェクト選択。指標と同じ行に並べるため、名前の長さに合わせる（画面より広くはしない。設計書 13 の 6.18） */
.progress-project-select {
    width: auto;
    max-width: 100%;
}

/* 表示中のプロジェクトの顧客名。閉じた選択欄にはグループの見出しが出ないため、選択欄の左に出す（設計書 13 の 6.19） */
.progress-project-customer {
    font-size: .875rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    /* 長い顧客名で選択欄を押し出さない。全文は title で見せる */
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 凡例（設計書 13 の 6.2・6.18）。ガントの下ではなく、操作の行の「凡例」ボタンから開くドロップダウンに出す */
/* **2 段組みにして高さを抑える。** 1 段だと 20 項目近くで画面の高さを超え、開いている間だけページが縦にスクロールしてしまう
   （2026-10-22 の動作確認）。それでも収まらない低い画面では、凡例の中だけをスクロールさせる */
.gantt-legend-menu {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    column-count: 2;
    column-gap: 1.5rem;
}

.gantt-legend-menu > span {
    display: block;
    margin-bottom: 0.25rem;
    break-inside: avoid;
}

@media (max-width: 767.98px) {
    .gantt-legend-menu {
        column-count: 1;
    }
}

/* ラベル列。横にスクロールしても左に固定する。格子（日付の行を含む）より手前に出す */
.gantt-labels {
    flex: 0 0 var(--gantt-label-w);
    width: var(--gantt-label-w);
    border-right: 2px solid var(--gantt-line);
    background: #fff;
    position: sticky;
    left: 0;
    z-index: 7;
}

/* 日付の格子。幅は中身（軸の列数）に合わせて伸ばし、スクロールはガントの枠に任せる */
.gantt-scroll {
    flex: 1 0 auto;
}

.gantt-chart {
    position: relative;
}

/* 軸（月と日）。ラベル列の頭とは高さを合わせる。
   縦にスクロールしても上に固定する（設計書 13 の 6.2）。計画バー・線・イナズマ線より手前に出す */
.gantt-axis,
.gantt-label-head {
    height: var(--gantt-axis-h);
    border-bottom: 1px solid var(--gantt-line);
    background: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 6;
}

.gantt-label-head {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    font-size: 0.8rem;
    color: #6c757d;
}

.gantt-axis-months,
.gantt-axis-days {
    display: grid;
    grid-auto-flow: column;
    height: calc(var(--gantt-axis-h) / 2);
    font-size: 0.7rem;
    line-height: calc(var(--gantt-axis-h) / 2);
}

.gantt-axis-month,
.gantt-axis-day {
    border-right: 1px solid var(--gantt-line);
    text-align: center;
    color: #6c757d;
    overflow: hidden;
    white-space: nowrap;
}

/* 休日は薄く色を敷く。営業日の感覚を合わせるため。
   **休日は既定の休日カレンダーで判定する（土日を曜日では判定しない。設計書 13 の 4.2・6.2）** */
.gantt-axis-day.is-holiday,
.gantt-col.is-holiday {
    background: #f1f3f5;
}

/* 表の休日の列。日付の行の下から格子の下端まで敷く。行より前に置くので、計画バー・線より奥に出る */
.gantt-col {
    position: absolute;
    top: var(--gantt-axis-h);
    bottom: 0;
    pointer-events: none;
}

.gantt-row {
    height: var(--gantt-row-h);
    border-bottom: 1px solid var(--gantt-line);
    position: relative;
}

/* ラベル側の行 */
.gantt-labels .gantt-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.5rem;
    font-size: 0.8rem;
    overflow: hidden;
    white-space: nowrap;
}

/* **マイルストーンの行は 2 行分の高さ。** 件数・進捗率に加えて
   SPI・工数効率も並べるため。ラベル列と格子で同じクラスを付けて高さを揃える */
.gantt-row-group {
    height: calc(var(--gantt-row-h) * 2);
}

.gantt-labels .gantt-row-group {
    background: #f8f9fa;
    font-weight: 600;
    /* 2 段に積むので縦並びにする */
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.1rem;
}

/* 2 段目の集計。名前より小さく、淡く */
.gantt-group-metrics {
    font-size: 0.72rem;
    font-weight: 400;
    color: #6c757d;
}

/* タスクはマイルストーンより右へ寄せる。**群の中身であることを字下げで示す**。
   字下げの中に並べ替えの取っ手を置く（設計書 13 の 6.9） */
.gantt-labels .gantt-row-task {
    padding-left: 0.75rem;
}

/* **親タスクの下は段ごとに字下げする**（設計書 13 の 4.14・6.2）。--gantt-depth は 1 段目が 1。
   マイルストーンの直下（1 段目）は従来のタスクと同じ位置 */
.gantt-labels .gantt-row-task,
.gantt-labels .gantt-row-taskgroup {
    padding-left: calc(0.75rem + (var(--gantt-depth, 1) - 1) * 1.1rem);
}

/* 親タスクの行。作業を持たないまとまりであることを、名前を太くして示す */
.gantt-labels .gantt-row-taskgroup {
    font-weight: 600;
}

.gantt-labels .gantt-row-taskgroup .gantt-task-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 親タスクの印（▸）。タスクの並べ替えの取っ手と同じ幅だけ場所を取る */
.gantt-taskgroup-icon {
    flex-shrink: 0;
    color: #6c757d;
    font-size: 0.7rem;
}

/* 配下を折りたたむ・開く印（▾／▸。設計書 13 の 6.15）。押せることが分かるよう、マウスを重ねると濃くする */
.gantt-collapse-toggle {
    flex-shrink: 0;
    line-height: 1;
}

.gantt-collapse-toggle:hover .gantt-taskgroup-icon {
    color: #212529;
}

/* 配下の無い親タスクの印。たためないため淡くする */
.gantt-taskgroup-icon.is-empty {
    opacity: 0.35;
}

/* 親タスクの計画期間（配下をまとめたもの）。細い棒の両端に下向きの爪を付ける。
   計画バーと形を変え、伸び縮みできないことを見た目で示す（設計書 13 の 6.2・7.3）。
   日表示では移動だけできる（.is-draggable。6.14） */
.gantt-summary-bar {
    position: absolute;
    top: calc(var(--gantt-row-h) / 2 - 3px);
    height: 6px;
    background: #495057;
    pointer-events: auto;
}

/* 爪はバーのすぐ下に垂らす（バーの中に重ねると隠れて見えない） */
.gantt-summary-bar::before,
.gantt-summary-bar::after {
    content: "";
    position: absolute;
    top: 100%;
    width: 0;
    height: 0;
    border-top: 7px solid #495057;
}

.gantt-summary-bar::before {
    left: 0;
    border-right: 6px solid transparent;
}

.gantt-summary-bar::after {
    right: 0;
    border-left: 6px solid transparent;
}

/* 配下がすべて完了したら淡くする（完了したタスクの計画バーと同じ扱い） */
.gantt-summary-bar.is-completed {
    opacity: 0.4;
}

/* ドラッグで配下をまとめて動かせる親タスクのバー（日表示。設計書 13 の 6.14）。
   細いため、上下に当たり判定を広げる（マイルストーンの線と同じ考え方）。タッチでもつかめるよう、スクロールより先にドラッグを受ける */
.gantt-summary-bar.is-draggable {
    cursor: grab;
    touch-action: none;
    user-select: none;
    /* 上下に透明な枠を足してつかめる範囲を広げ、見た目の位置は margin で戻す。
       色は枠の内側（padding-box）だけに塗る。両端の爪は枠の内側を基準に垂れるため位置は変わらない。
       **高さは枠の分（6px × 2）を足す。** Bootstrap は box-sizing: border-box のため、高さ 6px のままだと
       枠が高さを食い、色を塗る内側が 0 になってバーの本体が消える（爪だけが残る） */
    height: calc(6px + 12px);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    background-clip: padding-box;
    margin-top: -6px;
}

.gantt-summary-bar.is-dragging {
    cursor: grabbing;
    z-index: 5;
    background: #212529;
}

.gantt-legend-summary {
    display: inline-block;
    position: relative;
    width: 1.2rem;
    height: 4px;
    vertical-align: 3px;
    background: #495057;
}

/* 並べ替えの取っ手。ここだけでつかむ。タッチでもつかめるよう、取っ手の上ではスクロールより先にドラッグを受ける */
.gantt-reorder-handle {
    flex-shrink: 0;
    cursor: grab;
    color: #adb5bd;
    touch-action: none;
    user-select: none;
}

.gantt-labels .gantt-row-task .gantt-reorder-handle,
.gantt-labels .gantt-row-taskgroup .gantt-reorder-handle {
    margin-right: 0.35rem;
}

.gantt-reorder-handle:hover {
    color: #495057;
}

/* 並べ替え中につかんでいる行 */
.gantt-row.is-reordering {
    opacity: 0.45;
}

/* 並べ替えで落とす位置の線。ラベル列と格子の両方に同じ高さで引く */
.gantt-reorder-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px solid #0d6efd;
    z-index: 8;
    pointer-events: none;
}

.gantt-row-task .gantt-task-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 完了したタスク・到達したマイルストーンの行（ラベル列のみ。設計書 13 の 6.2）。
   **半透明の緑を重ねる。** ラベル列の地の色の上に乗るため、暗いテーマでも同じ規則で読める */
.gantt-labels .gantt-row.is-completed,
.gantt-legend-completed {
    background: rgba(25, 135, 84, 0.12);
}

/* マイルストーンの行は灰色の地を持ち、theme.css も塗り直すため、クラスを重ねて詳細度で上回る。
   タスクの行と見分けられるよう、少しだけ濃くする */
.gantt-labels .gantt-row.gantt-row-group.is-completed {
    background: rgba(25, 135, 84, 0.18);
}

.gantt-legend-completed {
    display: inline-block;
    width: 1.2rem;
    height: 0.9rem;
    vertical-align: -2px;
    border: 1px solid rgba(25, 135, 84, 0.35);
}

/* 備考ありの印。名前が省略されても見えるよう縮めない */
.gantt-remarks-icon {
    flex-shrink: 0;
    color: #6c757d;
    cursor: help;
}

/* 日付の縦罫線。行ごとに背景のグラデーションで引く */
.gantt-chart .gantt-row {
    background-image: repeating-linear-gradient(
        to right,
        var(--gantt-line) 0 1px,
        transparent 1px var(--gantt-day-w)
    );
}

/* 計画バー */
.gantt-bar {
    position: absolute;
    top: 6px;
    height: calc(var(--gantt-row-h) - 14px);
    border-radius: 3px;
    background: var(--gantt-bar-color, #4e79a7);
}

/* 保存後の通知。画面の右下に浮かせ、スクロールした先でも「元に戻す」を押せるようにする（設計書 13 の 6.8） */
.gantt-notice {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1050;
    width: min(420px, calc(100vw - 32px));
}

/* ドラッグで日程を変えられるバー（日表示の未完了タスク。設計書 13 の 6.8）。
   タッチでもつかめるよう、バーの上ではスクロールより先にドラッグを受ける */
.gantt-bar.is-draggable {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.gantt-bar.is-dragging {
    cursor: grabbing;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* 右端の取っ手。ここをつかむと終了日だけを変える */
.gantt-bar-handle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    border-radius: 0 3px 3px 0;
    background: rgba(0, 0, 0, 0.18);
}

/* ドラッグ中に出す、動かした先の日付と営業日数 */
.gantt-drag-label {
    position: absolute;
    top: 4px;
    z-index: 5;
    padding: 1px 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    color: #fff;
    background: rgba(33, 37, 41, 0.85);
    border-radius: 3px;
    pointer-events: none;
}

/* 完了したタスクは淡くする（設計書 13 の 6.2） */
.gantt-bar.is-completed {
    opacity: 0.35;
}

/* バーの右に出すステータス（設計書 13 の 6.2）。「ステータスを表示」を入れたときだけ出す。
   クリックは下のバー・線へ通す */
.gantt-status-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    font-size: 0.72rem;
    line-height: 1;
    white-space: nowrap;
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.gantt.show-status-labels .gantt-status-label {
    display: inline;
}

/* ドラッグ中はバーだけが動くため、元の場所に残る文字を隠す */
.gantt-bar.is-dragging + .gantt-status-label {
    visibility: hidden;
}

/* 着手済み（未完了だが日報の工数が付いている）は斜線を重ねる。
   進捗そのものではなく「手が付いた」ことだけを示すため、色は変えない
   （設計書 13 の 3.2・6.2） */
.gantt-bar.is-started {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.45) 0,
        rgba(255, 255, 255, 0.45) 3px,
        transparent 3px,
        transparent 7px
    );
}

/* クリティカルパス上のタスクは枠で強調する。
   色を変えるとプロジェクト色と混ざるため、枠線で示す */
.gantt-bar.is-critical {
    outline: 2px solid #dc3545;
    outline-offset: 1px;
}

/* 基準線（当初計画）。計画バーの下に細い線で重ねる */
.gantt-baseline {
    position: absolute;
    bottom: 3px;
    height: 3px;
    background: #6c757d;
    border-radius: 2px;
    opacity: 0.7;
}

/* 凡例の色見本 */
.gantt-legend-baseline {
    display: inline-block;
    width: 1.2rem;
    height: 3px;
    vertical-align: 3px;
    background: #6c757d;
}

.gantt-legend-started {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    vertical-align: -2px;
    background: #4e79a7;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.45) 0,
        rgba(255, 255, 255, 0.45) 3px,
        transparent 3px,
        transparent 7px
    );
}

.gantt-legend-critical {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    vertical-align: -2px;
    outline: 2px solid #dc3545;
    outline-offset: -2px;
}

/* 本日の列。**縦線にしない。** イナズマ線と見分けが付かなくなるため、
   列そのものに色を敷いて示す */
.gantt-today-col {
    position: absolute;
    top: var(--gantt-axis-h);
    bottom: 0;
    background: rgba(255, 193, 7, 0.22);
    border-left: 1px solid rgba(255, 193, 7, 0.8);
    border-right: 1px solid rgba(255, 193, 7, 0.8);
    pointer-events: none;
}

/* 軸の本日 */
.gantt-axis-day.is-today {
    background: #ffc107;
    color: #212529;
    font-weight: 600;
}

/* 凡例の本日の色見本 */
/* 凡例の休日の見本。色は表の休日の列と同じ（テーマ使用時の色は theme.css で合わせる） */
.gantt-legend-holiday {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    vertical-align: -2px;
    border: 1px solid var(--gantt-line, #dee2e6);
    background: #f1f3f5;
}

.gantt-legend-today {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    vertical-align: -2px;
    background: rgba(255, 193, 7, 0.22);
    border: 1px solid rgba(255, 193, 7, 0.8);
}

/* イナズマ線。格子の上に重ねる */
.gantt-lightning {
    position: absolute;
    top: var(--gantt-axis-h);
    left: 0;
    pointer-events: none;
}

/* マイルストーンの計画期間。菱形と菱形を破線で結ぶ */
/* 行の高さが 2 種類あるため、固定値ではなく割合で中央に置く */
.gantt-ms-span {
    position: absolute;
    top: 50%;
    margin-top: -1px;
    height: 0;
    border-top: 2px dashed #198754;
}

/* マイルストーンの菱形 */
.gantt-diamond {
    position: absolute;
    top: 50%;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    border: 2px solid #198754;
}

/* 管理者が日表示でドラッグできるマイルストーン（設計書 13 の 6.10）。
   線は細いため、上下に当たり判定を広げる。◆は線より手前に出してつかみやすくする */
.gantt-ms-span.is-ms-draggable {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.gantt-ms-span.is-ms-draggable::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -7px;
    height: 14px;
}

.gantt-diamond.is-ms-draggable {
    cursor: ew-resize;
    touch-action: none;
    user-select: none;
    z-index: 1;
}

.gantt-diamond.is-ms-draggable[data-ms-role="move"] {
    cursor: grab;
}

.gantt-ms-span.is-dragging,
.gantt-diamond.is-dragging {
    cursor: grabbing;
}

.gantt-diamond.is-achieved {
    background: #198754;
}

/* 計画終了日を超えるタスクがあるマイルストーン。橙色は「日程の矛盾・超過」の色（設計書 13 の 6.2） */
.gantt-ms-span.is-over {
    border-top-color: #fd7e14;
}

.gantt-diamond.is-over {
    border-color: #fd7e14;
}

.gantt-diamond.is-over.is-achieved {
    background: #fd7e14;
}

/* マイルストーンの行の「終了日超過 N 件」。ラベル列が狭いため縮めない */
.gantt-over-badge {
    flex-shrink: 0;
    font-weight: normal;
}

/* 先行関係の線。イナズマ線と同じ位置に重ね、クリックはバーへ通す（設計書 13 の 7.3） */
.gantt-deps {
    position: absolute;
    top: var(--gantt-axis-h);
    left: 0;
    pointer-events: none;
}

/* 赤はイナズマ線とクリティカルパスで使っているため灰色にする */
.gantt-dep-line {
    fill: none;
    stroke: #6c757d;
    stroke-width: 1.5;
}

/* 順序が矛盾する関係（後続の開始が先行の終了以前）は橙色の破線 */
.gantt-dep-line.is-conflict {
    stroke: #fd7e14;
    stroke-dasharray: 4 3;
}

.gantt-dep-arrow {
    fill: #6c757d;
}

.gantt-dep-arrow.is-conflict {
    fill: #fd7e14;
}

/* ===== 先行関係をガントで作る・外す（設計書 13 の 6.11） ===== */

/* つなぐ印（●）。**バーの右端の外に置く。** 内側の取っ手（終了日の変更）と場所を分け、取り違えないようにする。
   ふだんは隠し、バーにマウスを乗せたときだけ出す（バーが多いとうるさいため）。
   印はバーの子なので、印の上にいる間もバーの上にいることになり、消えない */
.gantt-link-handle {
    position: absolute;
    top: 50%;
    left: calc(100% + 3px);
    width: 11px;
    height: 11px;
    margin-top: -5.5px;
    border: 2px solid #6c757d;
    border-radius: 50%;
    background: #fff;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
    opacity: 0;
    transition: opacity 0.1s;
}

.gantt-bar:hover .gantt-link-handle,
.gantt-link-handle.is-active {
    opacity: 1;
}

.gantt-link-handle:hover,
.gantt-link-handle.is-active {
    border-color: #0d6efd;
    background: #0d6efd;
}

/* タッチ端末はマウスを乗せられないため、常に出す */
@media (hover: none) {
    .gantt-link-handle {
        opacity: 1;
    }
}

/* ドラッグ中の点線。格子の上に重ね、クリックは通す。固定した日付の行・左の列（z-index 6・7）より奥に置く */
.gantt-link-preview {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    overflow: visible;
    pointer-events: none;
}

.gantt-link-preview line {
    stroke: #0d6efd;
    stroke-width: 2;
    stroke-dasharray: 4 3;
}

/* 落とせるバーは緑の枠、落とせないバー（すでにつながっている・循環する）は点線の枠 */
.gantt-bar.is-link-target {
    outline: 2px solid #198754;
    outline-offset: 1px;
}

.gantt-bar.is-link-invalid {
    outline: 2px dashed #adb5bd;
    outline-offset: 1px;
}

/* ドラッグ中はどこでも十字のカーソル。落とせないバーの上では禁止のカーソル */
body.gantt-linking,
body.gantt-linking * {
    cursor: crosshair !important;
}

body.gantt-linking.is-invalid,
body.gantt-linking.is-invalid * {
    cursor: not-allowed !important;
}

/* 線の近く（クリックで外せる）では、線を太くして指の形のカーソルにする。選んだ線は青くする */
.gantt-chart.is-over-dep-line {
    cursor: pointer;
}

.gantt-dep-line.is-hover,
.gantt-dep-line.is-selected {
    stroke-width: 3;
}

.gantt-dep-line.is-selected {
    stroke: #0d6efd;
}

/* 線をクリックしたときの吹き出し。固定した日付の行・左の列より奥に置き、スクロールで一緒に流れる */
.gantt-dep-popover {
    position: absolute;
    z-index: 5;
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem;
    white-space: nowrap;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

/* 凡例のつなぐ印の見本 */
.gantt-legend-link {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    vertical-align: -1px;
    border: 2px solid #6c757d;
    border-radius: 50%;
}

/* 凡例の見本（先行関係の線・マイルストーンの超過） */
.gantt-legend-dep {
    display: inline-block;
    width: 1.4rem;
    vertical-align: middle;
    border-top: 2px solid #6c757d;
}

.gantt-legend-dep.is-conflict {
    border-top: 2px dashed #fd7e14;
}

.gantt-legend-ms-over {
    display: inline-block;
    width: 1.4rem;
    vertical-align: middle;
    border-top: 2px dashed #fd7e14;
}

/* 役割マーカー（作業・レビュー・承認） */
.gantt-roles {
    margin-left: auto;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    color: #6c757d;
}

/* ===== 進捗のカンバン（設計書 13 の 6.12） ===== */
/* 列は 未着手・段階・完了 の数だけ並べる（最大 8 列）。狭い画面では枠の中で横にスクロールする */
.kanban {
    display: grid;
    grid-template-columns: repeat(var(--kanban-columns, 5), minmax(11rem, 1fr));
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.kanban-column {
    display: flex;
    flex-direction: column;
    min-height: 12rem;
    background: rgba(var(--bs-body-color-rgb), 0.04);
    border: 2px solid transparent;
    border-radius: 0.5rem;
    transition: opacity 0.1s, border-color 0.1s;
}

.kanban-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.kanban-cards {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem;
}

.kanban-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.4rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.875rem;
    cursor: grab;
    user-select: none;
}

.kanban-card:hover {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.12);
}

.kanban-card.is-completed {
    opacity: 0.7;
}

/* 親タスクの経路（「画面設計 › 一覧画面」）。タスク名の上に小さく出す（設計書 13 の 6.12）。
   カードの中の要素は縮められるよう min-width を 0 にして、長い経路は省略する */
.kanban-card-name {
    min-width: 0;
}

.kanban-card-path {
    font-size: 0.72rem;
}

/* つかんでいる間、元の場所のカードは薄く残す */
.kanban-card.is-dragging {
    opacity: 0.35;
}

/* 指先に付いて動くカードの写し。下の列を elementFromPoint で調べるため、ポインターを通す */
.kanban-ghost {
    position: fixed;
    z-index: 1060;
    pointer-events: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    cursor: grabbing;
}

/* タッチ端末では取っ手からドラッグする。取っ手の上ではスクロールより先にドラッグを受ける */
.kanban-handle {
    touch-action: none;
    cursor: grab;
}

/* ドラッグ中、落とせる列は枠を付け、落とせない列は薄くする */
.kanban-column.is-droppable {
    border-color: rgba(var(--bs-primary-rgb), 0.35);
}

.kanban-column.is-over {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.08);
}

.kanban-column.is-blocked {
    opacity: 0.45;
}

/* グループをポップアップで選ぶ部品のチップ（部分ビュー _GroupPicker。設計書 02 の 3.4）。外す × を添える */
.group-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
}

/* × は文字に合わせて小さくする。btn-close は文字の大きさを基準に描かれる */
.group-chip-remove {
    font-size: 0.5rem;
}