* { box-sizing: border-box; }

/* 社外タスク作成時、未入力の必須項目を赤枠で示す（2026-07-17・「必須です」だけでは
   どの欄か分かりにくいとの指摘のため、具体的な欄を目立たせる） */
.field-missing { border-color: #e0574a !important; box-shadow: 0 0 0 2px rgba(224,87,74,0.2); }

body {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  background: #f2f5f8;
  margin: 0;
  color: #2b3542;
}

.app-header {
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg, #2d3a4a, #3d4f63);
  color: #fff;
  padding: 16px 26px;
  box-shadow: 0 2px 8px rgba(45,58,74,0.25);
}
.app-header h1 { font-size: 18px; margin: 0; flex-shrink: 0; font-weight: 600; letter-spacing: 0.02em; }

.view-switch { display: flex; gap: 8px; }
.view-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: #e2e8f0;
  padding: 7px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
}
.view-btn:hover { background: rgba(255,255,255,0.16); }
.view-btn.active { background: #3d7dca; border-color: #3d7dca; color: #fff; }

.new-task-btn {
  margin-left: auto;
  background: #3d7dca;
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(61,125,202,0.4);
  transition: background 0.15s, transform 0.15s;
}
.new-task-btn:hover { background: #2f68ac; transform: translateY(-1px); }

/* 手動更新ボタン（2026-07-13追加）：最新の状態を確実に読み込み直す */
.refresh-btn {
  margin-left: auto;
  background: #fff;
  color: #3d7dca;
  border: 1px solid #3d7dca;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s;
}
.refresh-btn:hover { background: #eef5fc; }
.refresh-btn:disabled { opacity: 0.5; cursor: default; }
.refresh-btn + .new-task-btn { margin-left: 10px; }

/* 確認待ちバッジ（2026-07-13追加）：部長に確認してほしいタスクの✋マーク */
.needs-check-badge {
  display: inline-block;
  background: #fff3cd;
  color: #8a6d1a;
  border: 1px solid #e6c34a;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  margin: 2px 0 4px;
  white-space: nowrap;
}

main { padding: 24px 28px; }

.view-panel { }

.member-columns {
  display: flex;
  gap: 18px;
  margin-bottom: 26px;
}

.member-column {
  flex: 1;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  min-height: 200px;
  box-shadow: 0 2px 10px rgba(45,58,74,0.07);
}

/* 完了リスト：売上集計ページと同じ構成（社内＝東日本／西日本、社外の順に縦積み）
   2026-07-20：横並びだとアコーディオン展開時に隣の列と重なって見えづらいため縦積みに変更 */
.completed-split { display: block; margin-top: 16px; }
.completed-split-top { margin-bottom: 16px; }
.completed-half { margin-bottom: 20px; }
.completed-half-title { font-size: 15px; margin: 0 0 10px; color: #2d3a4a; }
.member-column h2 {
  font-size: 15px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e2e8f0;
  color: #2d3a4a;
}

.unassigned-area {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(45,58,74,0.07);
}
.unassigned-area h2 { font-size: 15px; margin: 0 0 10px; color: #8a97a8; }

.card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 60px;
}
.card-list.drag-over { background: #e8f0f9; border-radius: 12px; }
.unassigned-list { flex-direction: row; flex-wrap: wrap; }
.unassigned-list .task-card { width: 220px; }

.task-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: grab;
  border-left: 6px solid #a3adba;
  background: #fafbfc;
  box-shadow: 0 1px 4px rgba(45,58,74,0.08);
  transition: transform 0.15s, box-shadow 0.15s;
}
/* 自分で作ったカード（Slack経由でない）は右上に折り目マークを付ける（2026-07-21追加） */
.task-card.manual-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 18px 18px 0;
  border-color: transparent #8a95a3 transparent transparent;
}
.task-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(45,58,74,0.14); }
.task-card.dragging { opacity: 0.4; }
.task-card:active { cursor: grabbing; }
/* 作業中チェックボックスがオンのカードは目立つ枠で強調する（2026-07-17追加） */
/* カード全体の枠強調は状態プルダウンの色分けと重複するため廃止（2026-07-20） */
.card-top { display: flex; align-items: flex-start; gap: 6px; }
.card-top h3 { flex: 1; }
/* 状態プルダウン：未着手＝灰／作業中＝赤／確認待ち＝黄（2026-07-20 pekopoko指定） */
.status-select {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 2px 6px;
  cursor: pointer;
}
.status-select.status-not_started { background: #e6e6e6; color: #5a6472; border-color: #cfd3d8; }
.status-select.status-in_progress { background: #fbe1df; color: #b0342a; border-color: #e0574a; }
.status-select.status-needs_check { background: #fff3cd; color: #8a6d1a; border-color: #e6c34a; }
.working-toggle {
  flex: 0 0 auto; display: flex; align-items: center; cursor: pointer;
  padding-top: 2px;
}
.working-checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: #3d7dca; }
/* 粒度バッジ：丸の中に大/中/小の頭文字を表示（2026-07-17・カードだけ見て未設定に気付けるように） */
/* 大=赤・中=黄・小=水色で色分け（2026-07-17・カード左枠の色よりやや彩度高めに指定） */
.grain-badge {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; background: #a3adba;
  margin-top: 1px;
}
.grain-badge-大 { background: #e6383a; }
.grain-badge-中 { background: #f2b705; color: #4a3b00; }
.grain-badge-小 { background: #00b8d9; }
/* 粒度バッジと見積書/納品書バッジを縦に並べる（2026-07-17・タイトルと横並びだと窮屈との指摘で改行に変更） */
.card-badges { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.doc-badge-row { display: flex; gap: 3px; }
/* 見積書/納品書 発行状況・Driveへの送信状況バッジ（2026-07-17追加） */
.doc-type-badge {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; margin-top: 0;
}
.doc-type-badge.doc-quote { background: #4d8fd1; }
.doc-type-badge.doc-invoice { background: #4a9d68; }
.doc-type-badge.doc-drive { background: #8a97a8; font-size: 12px; }
.drag-handle {
  color: #a8b2bd; font-size: 15px; cursor: grab; line-height: 1; user-select: none; flex: 0 0 auto; padding-top: 2px;
}
.drag-handle:active { cursor: grabbing; }
.task-card.color-red    { border-left-color: #e0574a; background: #fff2f0; }
.task-card.color-yellow { border-left-color: #e0a034; background: #fef8ec; }
.task-card.color-green  { border-left-color: #4a9d68; background: #f1f9f3; }
.task-card.color-blue   { border-left-color: #4d8fd1; background: #eef5fc; }
.task-card.color-grey   { border-left-color: #bbb0a1; background: #f5f2ed; opacity: 0.7; }

.task-card h3 { font-size: 14px; margin: 0 0 6px; color: #2b3542; }
.task-card .meta-line { font-size: 11px; color: #7a8697; margin: 2px 0; }

.progress-bar-outer {
  background: #efe6d8;
  border-radius: 5px;
  height: 7px;
  margin-top: 8px;
  overflow: hidden;
}
.progress-bar-inner {
  background: linear-gradient(90deg, #3d7dca, #6fa3d8);
  height: 100%;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); /* チェック時にグーンと伸びる */
}

.progress-bar-wrap {
  background: #efe6d8;
  border-radius: 7px;
  height: 14px;
  margin: 12px 0;
  overflow: hidden;
}
.progress-bar {
  background: linear-gradient(90deg, #3d7dca, #6fa3d8);
  height: 100%;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* モーダル */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(30,40,54,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
/* Driveに送るモーダルは、タスク詳細モーダルの中から開くため、その上に重なるよう
   高いz-indexを明示する（2026-07-17修正：DOM順の都合で詳細モーダルの下に隠れていた） */
#driveSendModal { z-index: 200; }
.modal {
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 12px 40px rgba(30,40,54,0.3);
}
.modal h2 { color: #2d3a4a; }
#slackDetailModal .modal { width: 600px; max-width: 90vw; }
/* カード詳細モーダルは情報量が多いため、画面を目一杯使いスクロールを減らす（2026-07-09） */
#detailModal .modal { width: 1120px; max-width: 96vw; max-height: 94vh; }
/* 左：タイトル直下の担当・期限などの基本情報／右：サブタスク・指示覚書。一目で全体を把握できるようにする */
.detail-columns { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 0 36px; align-items: start; }
.detail-col-left, .detail-col-right { min-width: 0; }
.slack-detail-readable {
  white-space: pre-wrap; word-break: break-word;
  font-size: 15px; line-height: 1.8; color: #2d3a4a;
  background: #f7f9fb; border-radius: 12px; padding: 18px 20px;
  margin-top: 12px; max-height: 60vh; overflow-y: auto;
}
.modal-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; font-size: 20px; cursor: pointer; color: #9aa7b6;
}
.modal-close:hover { color: #2d3a4a; }
.modal label { display: block; margin: 12px 0 4px; font-size: 13px; color: #64717f; }
.field-row { display: flex; gap: 12px; }
.field-row > div { flex: 1; }
.modal input[type=text], .modal input[type=date], .modal input[type=number], .modal select {
  width: 100%; padding: 7px 10px; border: 1px solid #d5dce4; border-radius: 8px; font-size: 13px;
  background: #fbfcfd;
}
.modal input:focus, .modal select:focus, .modal textarea:focus { outline: none; border-color: #3d7dca; }
.detail-meta p { font-size: 13px; margin: 4px 0; }
.subtask-list, #newSubtaskList { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 4px; }
#newSubtaskList li { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; }
.subtask-list li {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  padding: 4px 10px; background: #eef4fc; border: 1px solid #dce8f7; border-radius: 8px;
  cursor: grab; transition: box-shadow 0.15s;
}
.subtask-list li:hover { box-shadow: 0 1px 4px rgba(61,125,202,0.18); }
.subtask-list li.dragging { opacity: 0.4; }
.subtask-list li .drag-handle { font-size: 14px; }
.subtask-check-label { flex: 1; display: flex; align-items: center; gap: 8px; padding: 3px 4px; cursor: pointer; }
.subtask-check-label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.subtask-list li .subtask-label { flex: 1; }
.subtask-delete-btn {
  background: none; border: none; color: #999; cursor: pointer; font-size: 15px; padding: 0 4px; line-height: 1;
}
.subtask-delete-btn:hover { color: #d33; }
.add-subtask-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; align-items: center; }
.add-subtask-row input[type="text"] { flex: 1 1 140px; min-width: 100px; padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 13px; }
.add-subtask-row #addSubtaskBtn { width: auto; white-space: nowrap; margin-top: 0; flex: 0 0 auto; }
.add-subtask-row .attach-btn { width: auto; white-space: nowrap; margin-top: 0; flex: 0 0 auto; }
.contact-input { width: 140px; }
.submit-btn, #addSubtaskBtn {
  background: #3d7dca; color: #fff; border: none; padding: 10px 16px;
  border-radius: 20px; cursor: pointer; font-size: 13px; margin-top: 10px; font-weight: 600;
  box-shadow: 0 2px 6px rgba(61,125,202,0.35);
}
.submit-btn:hover { background: #2f68ac; }
.placeholder-note { font-size: 12px; color: #9aa7b6; }

/* 個人ダッシュボード */
.personal-select { margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.personal-select select { padding: 7px 12px; border-radius: 8px; border: 1px solid #d5dce4; background: #fff; }

/* カード単位の進捗コピーボタン */
.card-copy-btn { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 15px; padding: 4px 6px; border-radius: 6px; line-height: 1; }
.card-copy-btn:hover { background: #eef2f6; }

/* Slack受信・未対応タスクシート */
.inbox-area {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  margin-top: 26px;
  box-shadow: 0 2px 10px rgba(45,58,74,0.07);
}
.inbox-area h2 { font-size: 15px; margin: 0 0 10px; color: #3d4f63; }
/* 表が縦に長くなると、横スクロールバーが表の一番下＝ページの一番下まで行かないと
   出てこず使いにくいとの指摘（2026-07-17）。高さを制限して縦スクロールも中に収め、
   横スクロールバーが常に手の届く位置に出るようにした。見出し行は追従して固定表示にする。 */
.inbox-table-wrap { overflow-x: auto; overflow-y: auto; max-height: 480px; }
.inbox-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 980px;
}
.inbox-table th {
  text-align: left;
  padding: 7px 8px;
  border-bottom: 2px solid #e2e8f0;
  color: #94a1b0;
  font-size: 11px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.inbox-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #eef1f5;
  vertical-align: top;
}
.inbox-table input, .inbox-table select {
  padding: 4px 6px;
  border: 1px solid #d5dce4;
  border-radius: 6px;
  font-size: 12px;
  background: #fbfcfd;
}
/* nowrapで長いタイトルが1行に収まる幅まで列が伸び、依頼日との間が間延びしていた（2026-07-16指摘）。
   2行になってもいいので折り返し可にして列幅を詰める */
.inbox-title { font-weight: bold; max-width: 240px; white-space: normal; word-break: break-word; color: #2d3a4a; cursor: pointer; }
.inbox-title:hover { text-decoration: underline; }
/* 依頼日・担当者・企業名・金額・月の各ボックスを少しずつ詰めて、その分タスク名側に
   余裕を持たせた（2026-07-17指摘） */
.amount-input { width: 72px; }
.month-input { width: 42px; }
.inbox-table input[type="date"] { width: 112px; }
.inbox-table select[data-field="assignee"] { width: 88px; }
.inbox-table select[data-field="clientName"] { width: 130px; }
.slack-detail-cell { cursor: pointer; max-width: 240px; }
.detail-preview { color: #3d7dca; }
.detail-full {
  white-space: pre-wrap;
  font-size: 11px;
  background: #f2f5f8;
  border-radius: 8px;
  padding: 8px;
  margin: 4px 0 0;
  max-width: 320px;
}
.inbox-empty { color: #aab5c2; text-align: center; padding: 16px; }
.make-card-btn {
  background: #3d7dca;
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: 18px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  font-weight: 600;
}
.make-card-btn:hover { background: #2f68ac; }
.dismiss-inbox-btn {
  background: #fff;
  color: #7a8695;
  border: 1px solid #d5dce4;
  padding: 6px 12px;
  border-radius: 18px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  margin-left: 6px;
}
.dismiss-inbox-btn:hover { background: #f2f4f7; color: #5b6b7d; }

/* 完了リスト下段：カード化しなかったが対応済みの項目（2026-07-14追加） */
.dismissed-inbox-section { margin-top: 28px; }
.dismissed-inbox-toggle {
  display: block; width: 100%; text-align: left;
  font-size: 14px; color: #7a8695; font-weight: 600;
  background: none; border: none; padding: 8px 0; cursor: pointer;
}
.dismissed-inbox-toggle:hover { color: #3d7dca; }
.dismissed-inbox-body { margin-top: 8px; }
.dismissed-inbox-table { opacity: 0.85; }
.restore-inbox-btn {
  background: #fff;
  color: #3d7dca;
  border: 1px solid #cfe0f2;
  padding: 5px 12px;
  border-radius: 16px;
  cursor: pointer;
  font-size: 12px;
}
.restore-inbox-btn:hover { background: #eaf1fa; }

/* ボード最下部：最近完了したタスク */
.recent-completed-area {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  margin-top: 26px;
  box-shadow: 0 2px 10px rgba(45,58,74,0.07);
}
.recent-completed-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.recent-completed-header h2 { font-size: 15px; margin: 0; color: #3d4f63; }
.text-link-btn { background: none; border: none; color: #3d7dca; font-size: 12px; cursor: pointer; padding: 4px 8px; }
.text-link-btn:hover { text-decoration: underline; }
#recentCompletedList .task-card { opacity: 0.75; }
#recentCompletedList .task-card:hover { opacity: 1; }

/* Slack詳細ボックス（モーダル内） */
.slack-detail-box {
  white-space: pre-wrap;
  font-size: 12px;
  background: #f2f5f8;
  border-radius: 8px;
  padding: 10px;
  max-height: 180px;
  overflow-y: auto;
  font-family: inherit;
}
#detailModal .slack-detail-box { max-height: 260px; }
.empty-hint { color: #aab5c2; font-size: 12px; }
.demo-explainer { background: #eef5fc; border: 1px solid #cfe0f0; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; color: #3a5a78; margin-top: 8px; line-height: 1.5; }
.modal textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #d5dce4;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  background: #fbfcfd;
}
.attach-btn {
  background: #fff;
  color: #3d7dca;
  border: 1px dashed #3d7dca;
  padding: 9px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  margin-top: 8px;
  width: 100%;
}
.attach-btn:hover { background: #eaf1fa; }

/* 見積書・納品書 発行（2026-07-09） */
.document-list { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; }
.document-list li { padding: 4px 0; display: flex; align-items: center; gap: 8px; }
.document-list a { color: #3d7dca; }
.send-to-drive-btn {
  background: #fff; color: #5b6b7d; border: 1px solid #c3ccd6; border-radius: 12px;
  padding: 2px 8px; font-size: 11px; cursor: pointer;
}
.send-to-drive-btn:hover { background: #f4f6f8; }
.send-to-drive-btn:disabled { opacity: 0.6; cursor: default; }
.drive-sent-link {
  background: #eaf6ee; color: #2f7d4f; border: 1px solid #bfe4cc; border-radius: 12px;
  padding: 2px 8px; font-size: 11px; text-decoration: none;
}
.delete-document-btn {
  background: #fff; color: #b3392c; border: 1px solid #e8b4ac; border-radius: 12px;
  padding: 2px 8px; font-size: 11px; cursor: pointer;
}
.delete-document-btn:hover { background: #fdecea; }
.overwrite-drive-btn {
  background: #fff; color: #5b6b7d; border: 1px solid #c3ccd6; border-radius: 12px;
  padding: 2px 8px; font-size: 11px; cursor: pointer;
}
.overwrite-drive-btn:hover { background: #f4f6f8; }
.overwrite-drive-btn:disabled { opacity: 0.6; cursor: default; }
/* 発行モーダルの取引先表示：タスク側で決まっている値をそのまま出すだけの読み取り専用表示
   （2026-07-17・選び直しは不要との指摘でセレクトから固定表示に変更） */
.doc-client-display {
  background: #f4f6f8; border: 1px solid #d7dce2; border-radius: 6px;
  padding: 8px 10px; font-size: 14px; margin: 4px 0 12px;
}
.client-select-row { display: flex; gap: 8px; align-items: center; }
.client-select-row select, .client-select-row input { flex: 1; }
.client-select-row .attach-btn { width: auto; white-space: nowrap; margin-top: 0; }
.client-tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 16px; }
.client-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: #eef2f6; border-radius: 14px; padding: 3px 6px 3px 10px; font-size: 12px; color: #2b3542;
}
.client-tag-delete {
  border: none; background: none; color: #94a1b0; cursor: pointer; font-size: 13px;
  line-height: 1; padding: 2px 4px; border-radius: 50%;
}
.client-tag-delete:hover { background: #dde3e9; color: #c0392b; }
.pl-input { width: 80px; padding: 3px 5px; border: 1px solid #d5dce4; border-radius: 4px; font-size: 12px; text-align: right; }
/* 月別売上合計（P&L）：無駄に画面幅いっぱいへ引き伸ばさず、中身の分だけの幅にする（2026-07-16指摘） */
.pl-summary-table { width: auto; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(45,58,74,0.07); }
.pl-summary-table th, .pl-summary-table td { padding: 6px 10px; font-size: 12px; border-bottom: 1px solid #eee; white-space: nowrap; }
.pl-summary-table th { background: #2d3f52; color: #fff; text-align: center; }
.pl-summary-table td { text-align: right; }
.pl-summary-table td:first-child { text-align: left; }
.doc-items-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.doc-items-table th { text-align: left; font-size: 12px; color: #64717f; padding: 4px; }
.doc-items-table td { padding: 3px 4px; }
.doc-items-table input { width: 100%; padding: 5px 7px; border-radius: 6px; border: 1px solid #d5dce4; box-sizing: border-box; }
.doc-item-remove { background: none; border: none; color: #999; cursor: pointer; font-size: 15px; }
.doc-total-preview { font-weight: bold; margin-top: 10px; color: #2d3a4a; }

/* チェックボックス付与ボトムシート */
.bottom-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  animation: sheetUp 0.25s ease-out;
}
@keyframes sheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.bottom-sheet-inner {
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -6px 24px rgba(30,40,54,0.25);
  padding: 18px 26px 26px;
  max-width: 640px;
  margin: 0 auto;
}
.bottom-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bottom-sheet-header h3 { margin: 0; font-size: 15px; color: #2d3a4a; }
.bottom-sheet-header .modal-close { position: static; }
.sheet-hint { font-size: 12px; color: #94a1b0; margin: 6px 0 12px; }
.template-groups { max-height: 40vh; overflow-y: auto; margin-bottom: 14px; }
.template-group { margin-bottom: 14px; }
.template-group h4 { font-size: 13px; color: #3d4f63; margin: 0 0 6px; }
.template-items { display: flex; flex-wrap: wrap; gap: 8px; }
.template-item {
  display: flex; align-items: center; gap: 6px;
  background: #eaf1fa;
  color: #2f68ac;
  border: 1px solid #c7dbf0;
  padding: 7px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s, color 0.15s;
}
.template-item:has(input:checked) { background: #3d7dca; color: #fff; border-color: #3d7dca; }

/* 項目管理ページ */
.manage-group { background: #fff; border-radius: 16px; padding: 16px; margin-bottom: 16px; box-shadow: 0 2px 10px rgba(45,58,74,0.07); }
.manage-group h4 { color: #2d3a4a; }
.manage-group-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.manage-group-header h4 { margin: 0; }
.delete-group-btn { background: none; border: 1px solid #e0574a; color: #e0574a; border-radius: 14px; padding: 4px 12px; cursor: pointer; font-size: 12px; flex-shrink: 0; }
.delete-group-btn:hover { background: #fff2f0; }
.manage-add-row button:disabled, .delete-item-btn:disabled, .delete-group-btn:disabled { opacity: 0.5; cursor: default; }
.manage-item-list { list-style: none; padding: 0; margin: 0; }
.manage-item-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #eef1f5; font-size: 13px; }
.manage-item-input { flex: 1; border: 1px solid transparent; background: transparent; padding: 5px 8px; border-radius: 6px; font-size: 13px; }
.manage-item-input:hover, .manage-item-input:focus { border-color: #d5dce4; background: #fbfcfd; }
.delete-item-btn { background: none; border: 1px solid #e0574a; color: #e0574a; border-radius: 14px; padding: 4px 12px; cursor: pointer; font-size: 12px; flex-shrink: 0; }
.delete-item-btn:hover { background: #fff2f0; }
.manage-add-row { display: flex; gap: 8px; margin-top: 12px; }
.manage-add-row input { flex: 1; padding: 7px 12px; border: 1px solid #d5dce4; border-radius: 8px; font-size: 13px; background: #fbfcfd; }
.manage-add-row button { background: #3d7dca; color: #fff; border: none; padding: 7px 16px; border-radius: 18px; cursor: pointer; font-size: 13px; font-weight: 600; }
.manage-add-row button:hover { background: #2f68ac; }
.manage-add-group { background: #fff; padding: 16px; border-radius: 16px; box-shadow: 0 2px 10px rgba(45,58,74,0.07); margin-top: 6px; }
.delete-task-btn {
  margin-top: 18px;
  width: 100%;
  background: #fff;
  color: #e0574a;
  border: 1px solid #e0574a;
  border-radius: 10px;
  padding: 11px;
  cursor: pointer;
  font-size: 13px;
}
.delete-task-btn:hover { background: #fff2f0; }
.custom-checkbox-row { display: flex; gap: 8px; }
.custom-checkbox-row input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid #d5dce4;
  border-radius: 8px;
  font-size: 13px;
  background: #fbfcfd;
}
.custom-checkbox-row button {
  background: #3d7dca;
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.custom-checkbox-row button:hover { background: #2f68ac; }

/* トースト通知（alert()の代わり） */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #2d3a4a; color: #fff; padding: 12px 22px; border-radius: 24px;
  font-size: 13px; opacity: 0; transition: opacity 0.2s, transform 0.2s;
  pointer-events: none; z-index: 200; max-width: 90vw;
  box-shadow: 0 4px 16px rgba(30,40,54,0.3);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 完了確認モーダル */
.confirm-modal { width: 360px; text-align: center; }
.confirm-modal p { font-size: 15px; margin: 10px 0 20px; color: #2d3a4a; }
.confirm-btn-row { display: flex; gap: 10px; justify-content: center; }
.confirm-no-btn, .confirm-yes-btn { padding: 10px 20px; border-radius: 18px; font-size: 13px; cursor: pointer; font-weight: 600; }
.confirm-no-btn { background: #fff; border: 1px solid #d5dce4; color: #64717f; }
.confirm-yes-btn { background: #3d7dca; border: none; color: #fff; box-shadow: 0 2px 6px rgba(61,125,202,0.35); }
.confirm-no-btn:hover { background: #f2f5f8; }
.confirm-yes-btn:hover { background: #2f68ac; }

/* 完了リスト */
.completed-filters {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px;
  background: #fff; padding: 14px; border-radius: 14px; box-shadow: 0 2px 10px rgba(45,58,74,0.07);
}
.completed-filters input, .completed-filters select {
  padding: 7px 12px; border: 1px solid #d5dce4; border-radius: 8px; font-size: 13px; background: #fbfcfd;
}
.completed-filters input { flex: 1; min-width: 180px; }
.completed-filters button {
  background: #fff; border: 1px solid #d5dce4; border-radius: 18px; padding: 7px 14px; cursor: pointer; font-size: 12px; color: #7a8697;
}
.completed-filters button:hover { background: #f2f5f8; }
.column-picker {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  background: #fff; padding: 8px 14px; border-radius: 10px; margin-bottom: 16px;
  font-size: 12px; color: #5b6b7d; box-shadow: 0 2px 10px rgba(45,58,74,0.07);
}
.column-picker-label { font-weight: 600; color: #3d4f63; }
.column-picker label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.completed-section { margin-bottom: 26px; }
.completed-section h3 { font-size: 14px; color: #3d4f63; margin-bottom: 10px; }

/* 完了リスト：テーブル形式（金額集計用） */
.completed-table {
  width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(45,58,74,0.07); font-size: 13px;
}
.completed-table th, .completed-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #eef1f4; }
.completed-table th { background: #f7f9fb; color: #5b6b7d; font-weight: 600; }
.completed-table .amount-col { text-align: right; white-space: nowrap; }
.completed-table tfoot td { font-weight: 700; color: #2d3a4a; border-top: 2px solid #d5dce4; border-bottom: none; }
.completed-table tr.completed-row-clickable { cursor: pointer; }
.completed-table tr.completed-row-clickable:hover td { background: #f4f8fc; }
/* 社外タスクの見積書/納品書 発行状況バッジ（2026-07-17・完了リストで発行漏れに気付けるように） */
.doc-status-badge { display: inline-block; padding: 3px 8px; border-radius: 10px; font-size: 11px; white-space: nowrap; margin: 1px 3px 1px 0; }
.doc-status-badge.doc-issued { background: #eaf6ee; color: #2f7d4f; }
.doc-status-badge.doc-missing { background: #fdecea; color: #b3392c; font-weight: 700; }
.completed-row-actions { display: flex; gap: 6px; white-space: nowrap; }
.revert-task-btn, .edit-task-btn {
  background: #fff; color: #3d7dca; border: 1px solid #3d7dca; border-radius: 14px;
  padding: 4px 10px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.edit-task-btn { color: #5b6b7d; border-color: #c3ccd6; }
.revert-task-btn:hover { background: #eaf1fa; }
.edit-task-btn:hover { background: #f4f6f8; }

/* Slack同期ボタン */
#syncSlackBtn {
  font-size: 12px; padding: 4px 10px; border-radius: 14px; border: 1px solid #d5dce4;
  background: #fff; cursor: pointer; vertical-align: middle; margin-left: 8px;
}
#syncSlackBtn:hover { background: #f2f5f8; }
#syncSlackBtn:disabled { opacity: 0.6; cursor: default; }
.sync-status { font-size: 11px; color: #7a8697; margin-left: 6px; }

/* チーム負荷 */
.load-chart { display: flex; flex-direction: column; gap: 16px; }
.load-row { background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 2px 10px rgba(45,58,74,0.07); }
.load-row h3 { margin: 0 0 8px; font-size: 14px; color: #2d3a4a; }
.load-bar-outer { background: #efe6d8; border-radius: 8px; height: 18px; overflow: hidden; }
.load-bar-inner { background: linear-gradient(90deg, #3d7dca, #6fa3d8); height: 100%; display: flex; align-items: center; padding-left: 8px; color: #fff; font-size: 11px; }
.load-bar-inner.over { background: linear-gradient(90deg, #c0392b, #e0685c); }
.over-capacity-badge { color: #c0392b; font-size: 12px; font-weight: 600; }
.load-capacity-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; }
.capacity-input { width: 60px; padding: 3px 5px; border: 1px solid #d5dce4; border-radius: 4px; font-size: 12px; text-align: right; }

/* 売上集計（2026-07-12追加） */
.revenue-subheading { font-size: 14px; color: #3d4f63; margin: 14px 0 6px; }
/* 社内エリアの月目標入力・達成率表示（2026-07-20追加） */
.revenue-target-row { font-size: 12px; color: #5a6472; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.revenue-target-input { border: 1px solid #d8dde3; border-radius: 4px; padding: 2px 6px; }
.revenue-target-save-btn { border: 1px solid #d8dde3; border-radius: 4px; background: #f0f2f5; padding: 2px 10px; cursor: pointer; font-size: 12px; }
.achievement-note { font-size: 12px; color: #2c5f9e; background: #eef5fc; border-radius: 6px; padding: 6px 10px; margin: 0 0 8px; }
/* 社内（東日本・西日本）・社外を縦に積んで表示する（2026-07-20：横並びだとアコーディオン展開時に
   隣の列と重なって見えづらくなるため、2026-07-17の横並びから変更） */
.revenue-split { display: block; }
.revenue-split-top { margin-bottom: 20px; }
.revenue-col { min-width: 240px; margin-bottom: 20px; }
.revenue-col .revenue-table { margin-bottom: 0; }
.revenue-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(45,58,74,0.07); }
.revenue-table th { background: #2d3f52; color: #fff; padding: 8px 10px; font-size: 13px; text-align: left; }
.revenue-table td { padding: 8px 10px; font-size: 13px; border-bottom: 1px solid #eee; }
.revenue-table tr.revenue-total td { font-weight: bold; background: #eef2f6; }
.empty-note { color: #888; font-size: 13px; }
/* 月の行クリックで案件明細を展開（2026-07-17追加・0件月でも常に12ヶ月分表示する） */
.revenue-month-row { cursor: pointer; }
.revenue-month-row:hover td { background: #eaf2fb; }
.revenue-month-toggle { font-weight: 600; color: #2d3f52; }
.revenue-month-detail-row td { background: #f8fafc; padding: 10px; }
#revenueCsvBtn { background: #2d7d46; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; }
#revenueCsvBtn:hover { background: #256339; }

/* 企業別×月別 売上マトリクス（2026-07-16）：Excel/スプレッドシートに近い見た目にする
   （枠線グリッド・数値は右寄せ・月列は横スクロールしても固定表示） */
.client-matrix-table {
  /* table-layout:fixedで列幅を「均等」に固定する。中身の長さに関わらず全列同じ幅にして、
     はみ出す企業名は折り返す（2026-07-16「極端すぎ・均等幅にして」指摘への対応） */
  table-layout: fixed; border-collapse: collapse;
  box-shadow: none; border: 1px solid #c8ced6;
}
.client-matrix-table th, .client-matrix-table td {
  width: 90px; padding: 4px 6px; font-size: 12px; border: 1px solid #d7dce2;
  white-space: normal; word-break: break-word;
}
.client-matrix-table th {
  background: #f1f3f5; color: #2b3542; font-weight: 600; text-align: center; vertical-align: bottom;
}
.client-matrix-table th:first-child, .client-matrix-table td:first-child { width: 70px; }
.client-matrix-table td { text-align: right; background: #fff; }
.client-matrix-table td.matrix-month-toggle { text-align: left; }
.client-matrix-table tr:nth-child(even) td { background: #fafbfc; }
/* 1列目（月）はExcelの見出し列のように横スクロールしても常に見える位置に固定する */
.client-matrix-table th:first-child, .client-matrix-table td:first-child {
  position: sticky; left: 0; z-index: 1; background: #f1f3f5;
  border-right: 2px solid #b9c1cb;
}
.client-matrix-table tr:nth-child(even) td:first-child { background: #eceff1; }
.client-matrix-month-row { cursor: pointer; }
.client-matrix-month-row:hover td { background: #eaf2fb; }
.client-matrix-month-row:hover td:first-child { background: #dcebf9; }
.matrix-month-toggle { font-weight: 600; color: #2d3f52; }
.client-matrix-table tr.revenue-total td { background: #eef2f6; font-weight: bold; position: static; }
.client-matrix-table tr.revenue-total td:first-child { position: sticky; background: #dfe6ec; }
.client-matrix-detail-row td {
  background: #f7f9fb; padding: 10px 14px; white-space: normal; text-align: left;
  position: static; border: 1px solid #d7dce2;
}
/* 月の内訳（本業のシートの「納品書：日付／企業名／項目／金額」と同じ並びの表） */
/* 年間マトリクス（横に長い）のtd幅に引っ張られて無駄な余白ができないよう、
   この表自体は中身の分だけの幅にする（2026-07-16「無駄な隙間をなくそう」指摘） */
.month-detail-table { width: auto; border-collapse: collapse; background: #fff; font-size: 12px; }
.month-detail-table th, .month-detail-table td { padding: 5px 10px; white-space: nowrap; border: 1px solid #d7dce2; }
.month-detail-table th { background: #e9edf1; color: #2b3542; text-align: center; font-weight: 600; }
/* 列：①日付 ②企業名 ③案件名 ④仕入 ⑤備考 ⑥売上(別) ⑦粗利 ⑧操作 */
.month-detail-table td:nth-child(3) { white-space: normal; max-width: 280px; }
.month-detail-table td:nth-child(4),
.month-detail-table td:nth-child(6),
.month-detail-table td:nth-child(7) { text-align: right; }
.month-detail-table td:nth-child(8) { text-align: center; }
.month-detail-table tr:nth-child(even) td { background: #fafbfc; }
.month-detail-table tr.month-detail-total td { background: #eef2f6; font-weight: bold; text-align: right; }