* { box-sizing: border-box; }

/* ブラウザ既定のUAスタイル[hidden]{display:none}は、labelなど個別要素へのdisplay指定(author CSS)に
   優先度で負けて無効化されてしまう（オリジン優先順位はUA<author）。hidden属性は要素の種類を問わず
   常に確実に隠したいので、!importantで明示的に上書きする。 */
[hidden] { display: none !important; }

body {
  font-family: -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", sans-serif;
  background: #f5f6f8;
  margin: 0;
  color: #222;
}

.center-card {
  max-width: 360px;
  margin: 80px auto;
  background: white;
  padding: 32px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.center-card h1 {
  text-align: center;
  font-size: 20px;
  margin-bottom: 24px;
}

label {
  display: block;
  margin-bottom: 16px;
  font-size: 14px;
}

input, select, textarea {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

textarea {
  font-family: inherit;
}

button {
  padding: 10px 16px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

button:hover {
  background: #1d4ed8;
}

button:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
}

.center-card button {
  width: 100%;
}

.error {
  color: #dc2626;
  font-size: 13px;
  margin-top: 8px;
}

.info {
  color: #16a34a;
  font-size: 13px;
  margin-top: 8px;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: white;
  border-bottom: 1px solid #e5e7eb;
}

.topbar .brand {
  font-weight: bold;
  color: #111;
  transition: color 0.3s ease;
  white-space: nowrap;
}

/* 【実験】kuromoji辞書の読み込み中であることを示す一時的な表示 */
.topbar .brand.brand-loading {
  color: #aaa;
}

/* スマホ用の折りたたみトグル。デスクトップでは非表示（.topbar-collapsibleを常時展開表示するため）。
   「☰」等のグリフはフォントによって表示されない（豆腐文字になる）端末があったため、
   CSSのみで3本線アイコンを描画する（box-shadowで上下の線、本体の背景色で中央の線を表現）。 */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 9px 10px;
  cursor: pointer;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 20px;
  height: 2px;
  background: #333;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: relative;
}

.nav-toggle-icon::before {
  top: -6px;
}

.nav-toggle-icon::after {
  top: 4px;
}

/* nav/ショートカット/ユーザー情報/ログアウトをまとめて1つの折りたたみ単位にする。
   デスクトップでは従来通りtopbarの残り幅いっぱいに並べるだけのラッパーとして機能する。 */
.topbar-collapsible {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.topnav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.topnav a {
  color: #444;
  text-decoration: none;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 4px;
}

.topnav a:hover {
  background: #f0f0f0;
}

.topnav a.active {
  background: #2563eb;
  color: white;
}

.nav-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #dc2626;
  color: white;
  font-size: 11px;
  font-weight: bold;
  vertical-align: middle;
}

.message-unread-row {
  font-weight: bold;
}

.message-body {
  white-space: pre-wrap;
  word-break: break-word;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 12px;
  margin: 12px 0;
  max-height: 40vh;
  overflow-y: auto;
}

.topbar #userInfo {
  flex: 1;
  text-align: right;
  color: #555;
  font-size: 14px;
}

/* スマホでは項目数が多いnavが折り返して縦に何行も占有してしまうため、ハンバーガートグルで
   折りたたむ（初期状態は非表示、#navToggleクリックで.openを付け外しする）。 */
@media (max-width: 700px) {
  .topbar {
    flex-wrap: wrap;
  }

  .nav-toggle {
    display: block;
  }

  .topbar-collapsible {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    order: 10;
  }

  .topbar-collapsible.open {
    display: flex;
  }

  .topnav {
    flex-direction: column;
    gap: 0;
  }

  .topbar #userInfo {
    text-align: left;
    padding: 6px 12px;
  }
}

/* マスタ管理（地域・発注元・単位・分類・物品・工賃・業者・税率・社員・ユーザーのドロップダウン）。
   見た目は.topnav aと揃える（元々トップレベルのnavリンクだったものをまとめただけのため）。 */
.master-menu {
  position: relative;
}

.master-menu-toggle {
  background: none;
  border: none;
  color: #444;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.master-menu-toggle:hover {
  background: #f0f0f0;
}

.master-menu-toggle.active {
  background: #2563eb;
  color: white;
}

.master-menu-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  min-width: 160px;
  padding: 4px;
}

.master-menu-dropdown a {
  color: #444;
  text-decoration: none;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 4px;
}

.master-menu-dropdown a:hover {
  background: #f0f0f0;
}

.master-menu-dropdown a.active {
  background: #2563eb;
  color: white;
}

.master-menu-group-label {
  color: #888;
  font-size: 12px;
  padding: 8px 12px 2px;
}

.master-menu-dropdown a.master-menu-child {
  padding-left: 24px;
}

/* マイショートカット（ツールバーのドロップダウン）。 */
.shortcut-menu {
  position: relative;
}

.shortcut-menu-toggle {
  background: none;
  border: none;
  color: #444;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.shortcut-menu-toggle:hover {
  background: #f0f0f0;
}

.shortcut-menu-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  min-width: 240px;
  max-width: 360px;
  max-height: 400px;
  overflow-y: auto;
  padding: 4px 0;
}

.shortcut-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
}

.shortcut-menu-item:hover {
  background: #f5f6f8;
}

.shortcut-menu-item a {
  color: #2563eb;
  text-decoration: none;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shortcut-menu-item a:hover {
  text-decoration: underline;
}

.shortcut-remove {
  background: none;
  border: none;
  color: #dc2626;
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  flex-shrink: 0;
}

.shortcut-menu-empty {
  padding: 8px 12px;
  font-size: 13px;
  color: #888;
}

/* 各ページタイトル横の「ショートカットに追加」「この画面のURLコピー」ボタン
   （header.jsが<h1>を包む形で挿入する）。 */
.page-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.shortcut-add-btn {
  font-size: 13px;
  white-space: nowrap;
}

.url-copy-btn {
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
}

.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: white;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.filter-bar-row {
  display: flex;
  align-items: end;
  gap: 20px;
  flex-wrap: wrap;
}

/* スマホでのみ表示する検索条件の折りたたみトグル（資料庫）。デスクトップは常時展開のため不要。 */
.search-toggle-btn {
  display: none;
}

/* .filter-barはlabel（ラベル文字の下に入力欄を積む縦積み）を各画面で共通利用しているため、
   スマホでは1項目ごとの縦の占有が大きくなりがち。ラベル文字と入力欄を横並びにし、
   縦の高さを詰める（.filter-barを使う全画面に効くが、狭い画面での圧縮は一律望ましいはず）。 */
@media (max-width: 700px) {
  .filter-bar {
    padding: 10px;
    gap: 6px;
  }

  .filter-bar-row {
    gap: 8px;
  }

  .filter-bar label,
  .filter-bar-row label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    font-size: 12px;
  }

  .filter-bar label input,
  .filter-bar label select,
  .filter-bar-row label input,
  .filter-bar-row label select {
    width: auto;
    flex: 1 1 auto;
    min-width: 60px;
    margin-top: 0;
    padding: 4px 6px;
    font-size: 13px;
  }
}

.filter-bar label {
  margin-bottom: 0;
  font-size: 13px;
}

.filter-bar input[type="date"] {
  width: auto;
}

.filter-bar input[type="range"] {
  width: 120px;
  margin-top: 0;
  vertical-align: middle;
}

.filter-bar input[type="number"] {
  width: 4.5em;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-box fieldset {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px 12px 12px;
  margin: 0 0 12px;
}

.modal-box fieldset legend {
  padding: 0 6px;
  font-size: 13px;
  color: #555;
}

.modal-box fieldset .checkbox-label {
  margin-bottom: 6px;
}

.checkbox-label input {
  width: auto;
  margin-top: 0;
}

.actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}

.actions-row.spread {
  justify-content: space-between;
}

.row-heading {
  margin: 0;
}

.header-actions-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.filter-status {
  font-size: 13px;
  color: #555;
}

.filter-bar #addBtn,
.filter-bar .add-btn-group {
  margin-left: auto;
}

.add-btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-small {
  padding: 3px 10px;
  font-size: 12px;
}

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
}

.modal-overlay:not([hidden]) {
  display: flex;
}

.modal-box {
  background: white;
  padding: 24px;
  border-radius: 8px;
  max-width: 640px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.modal-box.wide {
  max-width: 960px;
}

.modal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.modal-header-row h2 {
  margin: 0;
}

/* 集計明細モーダルのテーブル部分。約15行分でスクロール対象にする（コピー/閉じるボタンは常に見える位置に残す）。 */
.modal-scroll-15 {
  max-height: 560px;
  overflow-y: auto;
}

.split-form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 700px) {
  .split-form-fields { grid-template-columns: 1fr; }
  .modal-box.wide { max-width: 640px; }
}

.bulk-paste-area {
  width: 100%;
  min-height: 160px;
  font-family: monospace;
  white-space: pre;
}

.bulk-instructions {
  margin: 12px 0;
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}

.bulk-instructions p {
  margin: 2px 0;
}

.confirm-message {
  white-space: pre-wrap;
}

/* 物品一括追加ウィザードの進行ステータス表示部。5段階を横並びで示し、現在地・完了済みを色分けする。 */
.bulk-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  font-size: 13px;
}

.bulk-stage {
  padding: 4px 10px;
  border-radius: 12px;
  background: #f1f5f9;
  color: #64748b;
}

.bulk-stage.current {
  background: #2563eb;
  color: white;
  font-weight: bold;
}

.bulk-stage.done {
  background: #dbeafe;
  color: #1d4ed8;
}

.bulk-stage-arrow {
  color: #94a3b8;
}

.bulk-body p {
  margin: 6px 0;
  line-height: 1.6;
}

.bulk-body .bulk-flow {
  font-weight: bold;
  color: #1d4ed8;
}

/* システムが自動で行ったこと（クリップボードへのコピー）の報告行。ユーザーへの指示行と区別するため4文字分インデントする。 */
.bulk-body .bulk-system-note {
  padding-left: 4em;
  color: #555;
}

.bulk-rules-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 13px;
  color: #444;
}

.bulk-rules-table th,
.bulk-rules-table td {
  border: 1px solid #ddd;
  padding: 2px 8px;
  line-height: 1.3;
  text-align: left;
  vertical-align: top;
}

.bulk-rules-table th {
  background: #f8fafc;
}

.bulk-rules-table td:nth-child(2) {
  text-align: center;
}

tr.selected td {
  background: #dbeafe !important;
}

tr.disabled-row td {
  color: #ea580c;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 32px;
  font-size: 14px;
}

.detail-grid .label {
  color: #666;
  display: inline-block;
  min-width: 90px;
}

.detail-row-money {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 詳細パネルの2カラムグリッドで、値が長くなりがちな項目（複数資格の列挙など）を1行全幅にする。 */
.detail-row-full {
  grid-column: 1 / -1;
}

/* ラベル＋複数行の値（資格の列記など）で、2行目以降の左端をラベル分の字下げで1行目とそろえる。 */
.detail-row-list {
  display: flex;
}

.detail-row-list-value {
  flex: 1 1 auto;
}

.detail-row-money .money-value {
  width: 130px; /* 「100,000,000円」がちょうど収まる幅 */
  text-align: right;
}

.text-right {
  text-align: right;
}

.detail-split {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.detail-split .detail-grid {
  flex: 2 1 auto;
}

.detail-staff {
  flex: 1 1 220px;
  border-left: 1px solid #eee;
  padding-left: 24px;
}

.detail-staff h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: #666;
}

.staff-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.staff-list li {
  padding: 4px 0;
  border-bottom: 1px solid #f5f5f5;
}

.link-btn {
  background: none;
  border: none;
  color: #2563eb;
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  text-decoration: underline;
}

.link-btn.danger {
  color: #dc2626;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr; }
}

main {
  max-width: 800px;
  margin: 24px auto;
  padding: 0 16px;
}

main.wide {
  max-width: 1100px;
}

main h1 {
  margin: 0 0 16px;
  font-size: 1.6em;
}

@media (max-width: 700px) {
  main h1 {
    font-size: 1.25em;
  }
}

/* 一覧+下部詳細パネル画面用。高さはJS(fitListPageHeight)がビューポートから算出して設定する。
   一覧のみをflex:1+overflow-yでスクロール対象にし、詳細パネルは常に画面内に収まるようにする。 */
main.list-page {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  margin: 0 auto;
  padding-top: 16px;
  padding-bottom: 16px;
}

main.list-page > * {
  flex: 0 0 auto;
}

main.list-page .table-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 80px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* 列幅が狭いセルでの折り返しは許すが、行が際限なく縦に伸びないよう最大2行に制限し、
   はみ出す分は省略記号で切る（横スクロールなしで一覧全体を見られるようにする）。
   line-clampをtd自体に付けるとdisplay:table-cellが上書きされ表全体のレイアウトが崩れるため、
   セル内部に置いたdivにのみ適用する。 */
#genbaTable td {
  overflow: hidden;
}

/* 1列目（変更/削除/損益/詳細ボタン）は他列と違い2行クランプ対象ではないため、overflow:hiddenを
   継承させない。継承させたままだと、狭い画面で列幅が自動的に圧縮された際にボタンごと
   見えなくなってしまう（横スクロールで見えるはずが、切り取られて存在ごと消えていた）。
   ボタンを横並びのままにすると必要幅が大きく圧縮の影響を受けやすいため、縦積みにして
   1ボタン分の幅だけで収まるようにする（横並びでの見えなくなり方をより確実に回避する）。 */
#genbaTable td:first-child {
  overflow: visible;
}

/* 変更/削除/損益/詳細を2×2で並べる（縦1列4段だと他のセルの2行クランプに対して行の高さが
   無駄に高くなるため、2行に収まる配置にする）。 */
.genba-row-actions {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 2px 10px;
  white-space: nowrap;
}

/* モバイルでは列幅の自動圧縮で現場名が2文字程度しか見えなくなるため、5〜6文字分の最小幅を確保する。 */
@media (max-width: 700px) {
  #genbaTable td:nth-child(4),
  #genbaTable th:nth-child(4) {
    min-width: 6em;
  }
}

#genbaTable .cell-clamp {
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

main.list-page .card {
  max-height: 40vh;
  overflow-y: auto;
}

/* 通常表示では隠し、印刷時だけ表示する行（絞込条件など、紙面へ残したい情報用。
   filterStatusを持たない画面向け）。ページ側でtextContentを設定して使う。 */
.print-only {
  display: none;
}

/* 印刷時は「一覧+固定高さでスクロール」をやめ、全行が紙面に収まる（複数ページに渡る）よう
   高さ制限とoverflowを解除する。@media printはブラウザの印刷機能（Ctrl+P等）を使ったときに
   自動的に適用され、閉じれば画面表示用のスタイルに戻るため、専用ボタンやJSでの前後処理は不要。
   .filter-bar自体ではなく中の.filter-bar-row（絞込の入力欄・ボタン類）だけを隠すのは、
   .filter-barの直下に置かれているfilterStatus/print-only行（絞込ステータス文）を
   紙面に残すため（.filter-barごと隠すと道連れで消えてしまう）。 */
@media print {
  .topbar,
  .filter-bar-row,
  .shortcut-add-btn,
  .url-copy-btn {
    display: none !important;
  }

  .print-only {
    display: block;
  }

  main.list-page {
    height: auto !important;
    overflow: visible !important;
  }

  main.list-page .table-scroll,
  main.list-page #assignmentTablesContainer {
    overflow: visible !important;
    max-height: none !important;
  }

  main.list-page .card {
    max-height: none !important;
    overflow: visible !important;
  }

  .table-scroll thead th {
    position: static;
  }

  /* .demen-table（出面表の集計ビュー）の1列目（社員/現場名）はposition:stickyで画面上は
     常に見える位置に固定しているが、印刷時にstickyのまま残すと、用紙サイズ（特にA3）
     によっては本来の位置からずれて左側に大きな余白が生じることがあったため、印刷時は
     通常の配置に戻す（sticky自体は横スクロール中の可視性のためのものでprint時は不要）。 */
  .demen-table th:first-child,
  .demen-table td:first-child {
    position: static !important;
  }

  #listTable td:first-child,
  #listTable th:first-child,
  #genbaTable td:first-child,
  #genbaTable th:first-child {
    display: none;
  }

  /* 出面表（demen.html）の社員×日付／現場×日付ビュー：画面表示用の1枚の横長い表
     （#mainTable）は印刷時は隠し、日数分割済みの#printChunks側だけを印字する。 */
  #pivotTableWrap.has-print-chunks {
    display: none !important;
  }
}

/* 出面表の印刷用分割テーブル。1チャンク＝1ページとして改ページする
   （最後のチャンクの後ろは改ページ不要）。 */
.demen-print-chunk {
  page-break-after: always;
  margin-bottom: 12px;
}

.demen-print-chunk:last-child {
  page-break-after: auto;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.btn-secondary {
  background: #9ca3af;
}

.btn-secondary:hover {
  background: #6b7280;
}

.btn-copy {
  background: #16a34a;
}

.btn-copy:hover {
  background: #15803d;
}

/* モバイルでは一括追加・エクセル用コピーを非表示にする（どちらもExcelクリップボード連携が
   前提の機能で、スマホでは実質使えないため）。一括追加ボタンはマスタ管理画面にしか無いため
   絞り込み不要だが、エクセル用コピーは出面表・現場詳細・予算実績明細でも使われているため、
   それらのボタンには.keep-on-mobileを付けて対象から除外する。 */
@media (max-width: 700px) {
  #bulkAddBtn,
  .btn-copy:not(.keep-on-mobile) {
    display: none;
  }
}

.field-label.invalid {
  color: #dc2626;
}

.sub-card {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: none;
}

.filter-box {
  padding: 8px 12px 2px;
  margin-bottom: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fafafa;
  font-size: 13px;
}

.filter-box label {
  margin-bottom: 6px;
  font-size: 13px;
}

.filter-box input,
.filter-box select,
.filter-box button {
  font-size: 13px;
  padding: 6px 8px;
  margin-top: 2px;
}

.money-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.money-row input {
  flex: 1;
  text-align: right;
}

.money-suffix {
  white-space: nowrap;
  color: #555;
}

.field-hint-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-hint-row input {
  width: 80px;
  flex: 0 0 auto;
}

.field-hint-row .hint-text {
  font-size: 12px;
  color: #666;
}

.select-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.select-row select {
  flex: 1;
}

.select-row .link-btn {
  white-space: nowrap;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

th, td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

th {
  background: #fafafa;
}

/* table自体にborder-radius+overflow:hiddenを付けるとposition:stickyが効かなくなるため、
   角丸は.table-scroll側（実際のスクロールコンテナ）に持たせ、見出し行だけ上端に固定する。 */
.table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-top: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.card h2 {
  margin: 0 0 12px;
  font-size: 16px;
}

.card form label {
  max-width: 320px;
}

/* 現場詳細（予算・支出集計） */
.summary-layout {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.summary-table {
  flex: 1 1 420px;
}

.summary-table th, .summary-table td {
  font-size: 13px;
}

.kikan-block {
  flex: 0 0 220px;
}

.date-nav {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
}

/* 自社情報（own-company.html）のロゴアップロード */
.logo-upload-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.logo-upload-item {
  flex: 0 0 200px;
}

.logo-upload-item h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.logo-preview {
  width: 200px;
  height: 120px;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  margin-bottom: 8px;
  overflow: hidden;
}

.logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.logo-upload-item .btn-secondary {
  margin-left: 8px;
}

.date-nav button {
  padding: 4px 8px;
  font-size: 12px;
}

.kikan-grid {
  grid-template-columns: 1fr;
  gap: 4px;
}

.chart-block {
  flex: 1 1 360px;
}

.chart-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #555;
  margin-bottom: 8px;
}

.chart-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-radius: 2px;
  vertical-align: middle;
}

.chart-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.chart-row-label {
  flex: 0 0 32px;
  font-size: 12px;
  color: #555;
}

.chart-bar {
  flex: 1 1 auto;
  display: flex;
  height: 24px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}

.chart-seg {
  height: 100%;
}

.chart-seg-clickable {
  cursor: pointer;
}

.chart-seg-clickable:hover {
  filter: brightness(1.15);
}

/* 予算・支出集計表の諸費用/工賃/委託セル（クリックで明細ポップアップ）。 */
.clickable-cell {
  cursor: pointer;
}

.clickable-cell:hover {
  background: #f0f4f8;
}

.chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #888;
  margin-left: 40px;
}

.note-text {
  font-size: 12px;
  color: #888;
  margin-top: 8px;
}

/* 操作方法の説明などをたたんでおける汎用の<details>。既定で閉じておき、必要なときだけ開く。 */
.note-details {
  margin-top: 8px;
}

.note-details summary {
  cursor: pointer;
  font-size: 12px;
  color: #2563eb;
  user-select: none;
}

.note-details .note-text:first-of-type {
  margin-top: 8px;
}

/* 資料庫「メール設定」モーダル */
.mail-address-row {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}

.mail-address-row input {
  flex: 1;
  font-family: monospace;
}

.allowed-sender-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.allowed-sender-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}

/* 支出日報（harai-nippou.html）。main.list-page の可変高さレイアウトに乗せ、.nippou-layout自体を
   flex:1 1 autoで残り高さいっぱいに広げる。左は上下2パネル+スプリッター、右は1パネルで、
   どちらも中の.table-scrollだけが縦スクロール対象（main.list-page .table-scrollのグローバル指定を利用）。 */
main.list-page > .nippou-layout {
  flex: 1 1 auto;
  min-height: 0;
}

.nippou-layout {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: 24px;
}

.nippou-left {
  flex: 1 1 55%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 高さは既定で50/50（flex:1 1 0）。#nippouSplitterのドラッグでpx固定値に切り替える。 */
.nippou-panel {
  flex: 1 1 0;
  min-height: 0;
  margin-top: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
  flex-direction: column;
}

.nippou-splitter {
  flex: 0 0 auto;
  height: 10px;
  margin: 4px 0;
  cursor: row-resize;
  position: relative;
}

.nippou-splitter::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: #cbd5e1;
}

.nippou-right {
  flex: 1 1 45%;
  min-width: 0;
  min-height: 0;
  margin-top: 0;
  display: flex;
  flex-direction: column;
}

/* main.list-page .card { max-height: 40vh; overflow-y: auto; }（一覧+下部詳細パネル画面用の指定）が
   支出日報の各パネルにもかかってしまい、flexで計算した実際の高さより低い40vhで頭打ちになっていたため、
   ここだけ解除する。 */
main.list-page .nippou-panel,
main.list-page .nippou-right {
  max-height: none;
  overflow-y: visible;
}

.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 16px;
}

.page-header-row h1 {
  margin: 0;
}

.page-header-row .date-nav {
  margin-bottom: 0;
}

.page-header-genba {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.page-header-genba .label {
  color: #666;
}

.panel-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.panel-heading-row h2,
.panel-heading-row h3 {
  margin: 0;
}

.panel-heading-info {
  font-size: 13px;
  color: #555;
  white-space: nowrap;
}

/* 選択予算の支出履歴の並び順ラジオ（新->/古->）。見出し行に収まるよう1行・コンパクト表示。 */
.category-radio-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-radio-inline .checkbox-label {
  font-size: 12px;
  gap: 2px;
}

.category-radio-inline .checkbox-label input {
  transform: scale(0.8);
}

/* 予算一覧は列数の割に列幅が狭いため、折り返しは許しつつ行の高さを最大3行に制限し、
   はみ出す分は省略記号で切る（#genbaTable .cell-clampと同じ手法。line-clampはtd直付けだと
   display:table-cellが上書きされ表全体のレイアウトが崩れるため、セル内部のdivにのみ適用する）。 */
#nippouYosanTable td {
  overflow: hidden;
}

#nippouYosanTable .cell-clamp {
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* 指定日の支出一覧は最大4行に制限（同じ手法、#nippouYosanTableより1行多い）。 */
#dayHaraiTable td {
  overflow: hidden;
}

#dayHaraiTable .cell-clamp {
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* 選択中の予算の支出履歴のコピー・変更・削除ボタンを縦3段に並べる。 */
.action-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

@media (max-width: 700px) {
  /* ヘッダー（現場名/現場損益に戻る/無効を含む/日付操作）がnowrapで1行に押し込められ、
     各項目の幅が極端に狭くなって文字が縦に1文字ずつ折り返されていたため、折り返しを許可する。 */
  .header-actions-group {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .page-header-genba {
    flex-wrap: wrap;
  }

  /* 3つの一覧（予算一覧・指定日の支出一覧・選択予算の支出履歴）を、指定日の支出・予算一覧・
     選択予算の支出履歴の順で縦積みにする。.nippou-leftはdisplay:contentsで自身のボックスを
     消し、中の2パネルを.nippou-layoutの直接の子として扱えるようにすることでorderが効くようにする
     （デスクトップの上下2分割用スプリッターは縦積みでは不要なので隠す）。 */
  .nippou-layout {
    flex-direction: column;
  }
  .nippou-left {
    display: contents;
  }
  #dayHaraiPanel {
    order: 1;
    flex: 0 0 auto;
  }
  .nippou-right {
    order: 2;
    flex: 0 0 auto;
  }
  #selectedYosanHaraiPanel {
    order: 3;
    flex: 0 0 auto;
  }
  .nippou-splitter {
    display: none;
  }

  /* 3つの一覧の各行を、横に長い1行ではなく2段のカード状に表示する。操作ボタン列は2段分をまたいで
     左側に固定し、残りの項目は2行×必要列数のグリッドに自動で流し込む（grid-auto-flow:columnにより
     DOM順で上から下へ、1列分埋まったら次の列へ進む＝結果的に常に2段になる）。
     同じ<table>内でヘッダー行(通常のtable-row)とデータ行(display:grid)が混在すると、
     データが入った瞬間にブラウザのテーブル列幅計算が崩れてヘッダーごと消えることがあったため、
     table/thead/tbodyもすべてtable系表示から切り離し、ヘッダー行は横並びのflexとして独立させる。 */
  #nippouYosanTable,
  #dayHaraiTable,
  #selectedYosanHaraiTable,
  #nippouYosanTable thead,
  #dayHaraiTable thead,
  #selectedYosanHaraiTable thead,
  #nippouYosanTable tbody,
  #dayHaraiTable tbody,
  #selectedYosanHaraiTable tbody {
    display: block;
  }
  #nippouYosanTable thead tr,
  #dayHaraiTable thead tr,
  #selectedYosanHaraiTable thead tr {
    display: flex;
  }
  #nippouYosanTable thead th,
  #dayHaraiTable thead th,
  #selectedYosanHaraiTable thead th {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  #nippouYosanTable tbody tr,
  #dayHaraiTable tbody tr,
  #selectedYosanHaraiTable tbody tr {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    column-gap: 14px;
    row-gap: 2px;
    padding: 8px 4px;
  }
  #nippouYosanTable td,
  #dayHaraiTable td,
  #selectedYosanHaraiTable td {
    border-bottom: none;
    padding: 0;
    white-space: nowrap;
  }
  #nippouYosanTable td:first-child,
  #dayHaraiTable td:first-child,
  #selectedYosanHaraiTable td:first-child {
    grid-row: 1 / span 2;
  }
  #nippouYosanTable .cell-clamp,
  #dayHaraiTable .cell-clamp {
    -webkit-line-clamp: 1;
  }
}

/* 3つの一覧共通、行クリックの明細ポップアップ。クリック座標の近くに出す簡易ポップオーバー。 */
.row-detail-popup {
  position: fixed;
  z-index: 40;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 12px 16px;
  max-width: 320px;
  font-size: 13px;
}

.row-detail-popup dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
}

.row-detail-popup dt {
  color: #666;
  white-space: nowrap;
}

.row-detail-popup dd {
  margin: 0;
  word-break: break-all;
}

/* 支出日報の日付選択カレンダー（VC++版igcos2の日付ピッカーを踏襲。native <input type="date"> の
   ポップアップはCSS/JSから中身を一切触れないため、自前の月グリッドに置き換えている）。 */
.calendar-picker {
  position: relative;
  display: inline-block;
}

.calendar-input {
  width: 110px;
  padding: 4px 8px;
  margin-top: 0;
  font-size: 13px;
  text-align: center;
}

/* トグルボタンは.date-nav（ページ右側のグループ）の中にあり右端に寄っているため、left:0で右へ
   開くとビューポート右端をはみ出して横スクロールが出てしまう。right:0で左へ開く。 */
.calendar-popup {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 12px;
  width: 260px;
}

.calendar-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: bold;
}

.calendar-grid {
  width: 100%;
  border-collapse: collapse;
}

.calendar-grid th {
  background: none;
  font-size: 12px;
  font-weight: normal;
  color: #555;
  padding: 4px 0;
  border-bottom: none;
  text-align: center;
}

.calendar-grid th:first-child { color: #dc2626; }
.calendar-grid th:last-child { color: #2563eb; }

.calendar-grid td {
  padding: 2px;
  border-bottom: none;
  text-align: center;
  font-size: 13px;
}

.calendar-grid td.other-month {
  color: #ccc;
}

/* .date-nav button { padding:4px 8px; font-size:12px; }（クラス+要素セレクタ、詳細度(0,1,1)）が
   カレンダーポップアップ内の丸ボタンにも祖先経由でかかり、単一クラスの.calendar-day-btn(0,1,0)では
   上書きできないため、.calendar-popupを付けて詳細度(0,2,0)に上げている。 */
.calendar-popup .calendar-day-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  background: none;
  color: #222;
  font-size: 13px;
  line-height: 1;
}

.calendar-popup .calendar-day-btn:hover {
  background: #f0f4f8;
}

/* 背景色・文字色はここでは変えず、リング(box-shadow)だけで「支出あり」を示す。
   background/colorをここで設定すると、詳細度の都合で.selectedの背景色・文字色と
   競合し（このルールの方が詳細度が高く勝ってしまい）、選択中かつ支出ありの日が
   白背景に白文字で数字が消えるバグになっていたため、プロパティを完全に分離した。 */
.calendar-popup .calendar-day-btn.has-harai {
  box-shadow: 0 0 0 2px #dc2626 inset;
}

.calendar-day-btn.today {
  font-weight: bold;
  color: #2563eb;
}

.calendar-day-btn.selected {
  background: #2563eb;
  color: white;
}

.calendar-popup-footer {
  margin-top: 8px;
  text-align: center;
}

/* 工種詳細（kousyu-detail.html） */
.kousyu-switch-row {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.kousyu-switch-row label {
  margin-bottom: 0;
}

.kousyu-switch-row select {
  width: auto;
}

.category-radio {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

/* 区分ラジオを行の中央に、他の項目は右端に寄せる（中央の項目の幅に関わらず真ん中に来るよう
   左右を同じ1frの空き列にしている） */
.category-center-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 12px;
}

.category-center-row .category-radio {
  grid-column: 2;
  margin-bottom: 0;
  justify-content: center;
}

.category-center-row > .checkbox-label {
  grid-column: 3;
  justify-self: end;
  margin-bottom: 0;
}

.yosan-harai-layout {
  display: flex;
  gap: 24px;
  margin-top: 12px;
  align-items: flex-start;
}

.yosan-panel, .harai-panel {
  flex: 1 1 50%;
  min-width: 0;
}

.yosan-panel h3, .harai-panel h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

#kousyuTable td {
  line-height: 1.5;
}

/* main.list-page .table-scrollは元々縦スクロールのみ想定していたが、出面表のカレンダー系ビュー
   （1ヶ月分の日付列を横に並べる）は横方向にもあふれるため、横スクロールも許可する
   （既存の一覧表は列幅がコンテナ内に収まるため、この追加は見た目に影響しない）。 */
main.list-page .table-scroll {
  overflow-x: auto;
}

/* 出面表（demen.html）のビュー切替タブ */
.view-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.view-tabs button {
  background: white;
  color: #2563eb;
  border: 1px solid #2563eb;
  padding: 6px 14px;
}

.view-tabs button:hover {
  background: #eff6ff;
}

.view-tabs button.active {
  background: #2563eb;
  color: white;
}

/* 出面表のカレンダー系ビュー（社員×日付／現場×日付）・現場×社員ビュー共通のテーブル装飾。
   行見出し列（社員名／現場・工種名）は横スクロール中も常に見えるようsticky化する。
   table-layout:fixedは<colgroup>（列幅スライダーで指定した1日分の幅）を実際に反映させるために必要
   （現場×社員ビューのように<colgroup>が空のときはブラウザの自動幅に戻る）。 */
.demen-table {
  table-layout: fixed;
}

.demen-table th, .demen-table td {
  text-align: center;
  white-space: nowrap;
  padding: 4px 8px;
  font-size: 12px;
  overflow: hidden;
}

.demen-table th:first-child, .demen-table td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: white;
  z-index: 1;
}

.demen-table thead th:first-child {
  z-index: 2;
}

.demen-table .demen-genba-row td:first-child {
  font-weight: bold;
  background: #f8fafc;
}

.demen-table .demen-genba-row td {
  background: #f8fafc;
  font-weight: bold;
}

.demen-table .demen-kousyu-row td:first-child {
  padding-left: 20px;
  font-weight: normal;
}

.demen-table .col-sat { background: #eff6ff; }
.demen-table .col-sun { background: #fef2f2; }
.demen-table .demen-genba-row .col-sat,
.demen-table .demen-genba-row .col-sun { background: #f8fafc; }

/* 社員×日付ビューで「表示」が社員＋重機・車両のとき、1つのtableの中で社員行・重機行を区切る
   ラベル行。colspanの単独tdは（ブラウザによっては）position:stickyが効かず横スクロールで
   ラベルが見えなくなるため、他の行と同じ列数のtdを並べる構成にした（1列目のみラベル文字）。
   1列目はtd:first-childのposition:sticky/left/z-indexをそのまま受けるので、横スクロール時も
   名前列と同様にラベルが画面左端に留まる。ここでは背景・文字装飾だけを行全体に対して上書きする。 */
.demen-table .demen-section-row td {
  background: #eef2f7;
  font-weight: bold;
}
.demen-table .demen-section-row td:first-child {
  text-align: left;
  padding: 6px 8px;
}

/* 休日マスタ（holidays.html）に登録されている日付は、背景色（土日）とは別に文字色を赤にする。 */
.demen-table th.holiday { color: #dc2626; }

.demen-cell-total {
  font-weight: bold;
}

/* 社員休暇（employee-vacations.html）：社員×日付のグリッドで稼働可能時間を記録する。 */
.vacation-table th, .vacation-table td {
  text-align: center;
  white-space: nowrap;
  padding: 4px 8px;
  font-size: 12px;
}

.vacation-table th:first-child, .vacation-table td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: white;
  z-index: 1;
}

.vacation-table thead th:first-child { z-index: 2; }

.vacation-emp-cell .link-btn { margin-right: 6px; }

.vacation-table .col-sat { background: #eff6ff; }
.vacation-table .col-sun { background: #fef2f2; }
.vacation-table th.holiday { color: #dc2626; }

.vacation-cell { cursor: pointer; }
.vacation-cell:hover { background: #f0f0f0; }
.vacation-cell.vacation-day-off { color: #dc2626; font-weight: bold; }

.vacation-popup {
  position: absolute;
  z-index: 50;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 12px;
  min-width: 220px;
}

.vacation-popup-label {
  display: block;
  margin-bottom: 8px;
}

.vacation-popup input {
  width: 100%;
  box-sizing: border-box;
}

/* 人員配置計画（assignment-schedule.html）：現場×社員×日付のグリッドで割当時間を記録する。
   社員休暇(.vacation-table)とほぼ同じ見た目だが、2ヶ月連続表示・月見出し行・範囲選択・
   未来日の紫フォント・社員休暇参照によるブロック表示が追加で必要なため専用クラスにする。 */
.assignment-table th, .assignment-table td {
  text-align: center;
  white-space: nowrap;
  padding: 4px 8px;
  font-size: 12px;
}

/* 月見出し行（colspanで月をまたぐ）はデフォルトの中央揃えだと月の途中あたりに文字が来て
   紛らわしいため、月の1日目の位置（セル左端）に文字が来るよう左揃えにする。 */
.assignment-header-months th {
  text-align: left;
}

/* 工種セレクトで「すべて」を選んだとき、工種の数だけ表(見出し付き)を縦に並べて表示する。
   コンテナ自体をmain.list-page .table-scroll相当のflex:1+overflow-y領域にすることで、
   フィルタバーは画面上部に固定したまま、表の並び全体だけが縦スクロールする（単一表のときの
   挙動と揃える）。各表(.assignment-scroll)は個別にoverflow-xを持つため横スクロールは表ごと。 */
main.list-page #assignmentTablesContainer {
  flex: 1 1 auto;
  min-height: 80px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.assignment-kousyu-section {
  margin-bottom: 24px;
}

.assignment-kousyu-heading {
  font-size: 15px;
  margin: 0 0 6px;
}

/* 社員絞込・重機絞込のキーワード欄は5文字程度に絞って、他の絞込項目と横並びに収める。 */
.assignment-keyword-input { width: 5em; }

/* 工種に必要資格を満たす社員がいない日に付ける警告マーク（日ヘッダのセル内）。クリックで原因を表示する。 */
.assignment-alert-mark {
  display: inline-block;
  margin-left: 2px;
  color: #eab308;
  cursor: pointer;
}

.assignment-table th:first-child, .assignment-table td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: white;
  z-index: 1;
}

.assignment-table thead th:first-child { z-index: 2; }

/* 「社員＋重機・車両」表示時、1つのtableの中で社員tbody・重機tbodyを区切るラベル行。
   1列目のみラベル文字、残りは空td（他の行と同じ列数）にすることで、1列目が
   td:first-childのposition:sticky/left/z-indexをそのまま受け、横スクロールしても
   ラベルが名前列と同様に画面左端に留まる。ここでは背景・文字装飾だけを行全体に上書きする。 */
.assignment-table .assignment-section-row td {
  background: #eef2f7;
  font-weight: bold;
}
.assignment-table .assignment-section-row td:first-child {
  text-align: left;
  padding: 6px 8px;
}

.assignment-emp-cell .link-btn { margin-right: 6px; }

.assignment-table .col-sat { background: #eff6ff; }
.assignment-table .col-sun { background: #fef2f2; }
.assignment-table th.holiday { color: #dc2626; }

.assignment-cell { cursor: pointer; }
.assignment-cell:hover { background: #f0f0f0; }

/* 今日を含め未来の日付は紫フォント（編集可否の判定とは別軸。今日自体は編集可否上は過去扱い）。 */
.assignment-cell.assignment-future { color: #7c3aed; font-weight: bold; }

/* 社員休暇に「休み」の記録がある日は割当不可、クリックしても反応しない見た目にする。 */
.assignment-cell.assignment-blocked {
  cursor: not-allowed;
  background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 4px, #e5e7eb 4px, #e5e7eb 8px);
}
.assignment-cell.assignment-blocked:hover { background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 4px, #e5e7eb 4px, #e5e7eb 8px); }

/* ドラッグで選択した範囲（同一社員の複数日）のハイライト。範囲削除ボタン表示中であることを示す。 */
.assignment-cell.assignment-selected { background: #dbeafe; outline: 2px solid #2563eb; outline-offset: -2px; }

/* 今日を含む過去日は「過去も設定可」がオフの間は編集不可（見た目でも分かるよう薄くする）。 */
.assignment-cell.assignment-locked { cursor: not-allowed; opacity: 0.6; }

/* 範囲選択時の一括設定（まとめて配置／時間入力＋OK）の入力欄。 */
.range-minutes-input { width: 80px; }

.assignment-popup {
  position: absolute;
  z-index: 50;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 12px;
  min-width: 220px;
}

.assignment-popup-label {
  display: block;
  margin-bottom: 8px;
}

.assignment-popup input {
  width: 100%;
  box-sizing: border-box;
}

.demen-cell-detail {
  font-size: 10px;
  color: #666;
  line-height: 1.3;
  font-weight: normal;
  white-space: normal;
}

/* 出面表エントリー画面（demen.html）：左に社員一覧、右に対象日に工事期間中の現場（工種）の
   受入れボックスを並べ、社員カードをドラッグ&ドロップで各ボックスに割り当てる。 */
.demen-entry-board {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* 「表示」が社員＋重機・車両のとき、社員・重機車両の各一覧を個別に折りたためるようにするため、
   各一覧は<details>にし、外側の.demen-side-listsで縦に並べる（単独表示のときも<details>のまま
   でよく、見た目上は開いた状態のh3とほぼ変わらないため分岐は設けない）。 */
.demen-side-lists {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.demen-employee-list {
  background: white;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.demen-employee-list summary {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

.demen-kenki-filter-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.demen-kenki-filter-row input,
.demen-kenki-filter-row select {
  font-size: 13px;
  padding: 6px 8px;
}

.demen-employee-filter {
  width: 100%;
  margin-bottom: 8px;
  padding: 6px 8px;
  font-size: 13px;
}

.demen-employee-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  font-size: 13px;
  cursor: grab;
  user-select: none;
}

.demen-employee-card:active {
  cursor: grabbing;
}

.demen-employee-card.dragging,
.demen-assign-chip.dragging {
  opacity: 0.4;
}

.demen-employee-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demen-employee-daily-total {
  flex: 0 0 auto;
  font-weight: bold;
  color: #555;
}

.demen-kousyu-boxes {
  flex: 1 1 auto;
  min-width: 0;
}

.demen-genba-group {
  margin-bottom: 16px;
}

.demen-genba-group h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: #444;
}

.demen-genba-group-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.demen-kousyu-box {
  flex: 0 0 220px;
  background: white;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 10px;
}

.demen-kousyu-box.drag-over {
  border-color: #2563eb;
  background: #eff6ff;
}

.demen-kousyu-box-title {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 8px;
}

.demen-kousyu-box-body {
  min-height: 40px;
}

.demen-kousyu-box-empty {
  font-size: 12px;
  color: #aaa;
}

/* 「表示」が社員＋重機・車両のとき、1つのボックス内で社員・重機車両を区切って見せるための小見出し。
   単独表示のときはサブセクション自体は使うがタイトルは出さない（区切る対象が1種類しかないため）。 */
.demen-kousyu-box-subsection:not(:last-child) {
  margin-bottom: 10px;
}

.demen-kousyu-box-subtitle {
  font-size: 11px;
  color: #888;
  margin-bottom: 4px;
}

.demen-assign-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  margin-bottom: 4px;
  background: #f8fafc;
  border-radius: 4px;
  font-size: 12px;
}

/* 重機・車両のチップは社員チップと区別できるよう、うっすら色味を変える。 */
.demen-kenki-chip {
  background: #f0fdf4;
}

.demen-assign-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demen-assign-hours {
  cursor: pointer;
  color: #2563eb;
  font-weight: bold;
  white-space: nowrap;
}

.demen-assign-hours:hover {
  text-decoration: underline;
}

.demen-assign-category {
  cursor: pointer;
  color: #b45309;
  white-space: nowrap;
}

.demen-assign-category:hover {
  text-decoration: underline;
}

.demen-assign-remove {
  padding: 0 4px;
  background: none;
  color: #dc2626;
  font-weight: bold;
}

.demen-assign-remove:hover {
  background: none;
  color: #991b1b;
}

.demen-hours-edit-input {
  width: 56px;
  padding: 2px 4px;
  font-size: 12px;
}

/* 資料ストック機能（materials.html）。main.list-page内で.table-scroll同様、ここだけが
   縦方向に伸縮・スクロールする領域になるようflex:1 1 autoで上書きする。 */
main.list-page .materials-body {
  flex: 1 1 auto;
  min-height: 80px;
  display: flex;
  gap: 12px;
  overflow: hidden;
}

.materials-folders {
  flex: 0 0 220px;
  overflow-y: auto;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  background: #fff;
  padding: 4px;
}

.materials-folder-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.materials-folder-item:hover {
  background: #f1f5f9;
}

.materials-folder-item.selected {
  background: #e0ecff;
  font-weight: bold;
}

.materials-folder-item.drag-over {
  outline: 2px dashed #2563eb;
  background: #e0ecff;
}

.materials-folder-count {
  color: #6b7280;
  font-size: 12px;
}

.materials-folder-item.indent {
  padding-left: 26px;
}

.materials-folder-item .folder-edit-btn {
  font-size: 12px;
}

.materials-folders .btn-small {
  width: 100%;
  margin-bottom: 6px;
}

.genba-check-list {
  max-height: 40vh;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px;
  margin: 8px 0;
}

.genba-check-list .checkbox-label {
  display: block;
  margin-bottom: 6px;
}

/* 建機車両管理の追加・変更モーダルに埋め込む必要資格チェックリスト（.genba-check-listと同じ見た目）。 */
.required-qualification-list {
  max-height: 30vh;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px;
  margin: 4px 0 8px;
}

.required-qualification-list .checkbox-label {
  display: block;
  margin-bottom: 6px;
}

.materials-grid-wrap {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  background: #fff;
  padding: 8px;
}

/* 選択中の現場フォルダのURLをコピーするアイコン（サムネイル表示領域の右上）。
   「個人用」「すべて」表示中はJS側でhiddenにする（対象の現場が無いため）。 */
.materials-folder-url-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.materials-grid {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 120px;
}

.materials-grid-wrap.drag-over {
  outline: 2px dashed #2563eb;
  background: #eef4ff;
}

.materials-grid.size-large {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.materials-grid.size-small {
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
}

.material-card {
  cursor: pointer;
  border-radius: 6px;
  padding: 6px;
  text-align: center;
}

.material-card:hover {
  background: #f1f5f9;
}

.material-card-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 4px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.material-card-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.material-card-checkbox {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  width: 16px;
  height: 16px;
}

.material-card-view-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
  padding: 2px 6px;
  font-size: 11px;
  background: rgba(37, 99, 235, 0.85);
  border-radius: 4px;
}

.material-card-view-btn:hover {
  background: rgba(29, 78, 216, 0.95);
}

.materials-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.material-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: #64748b;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.02em;
}

.material-icon-badge.large {
  width: 160px;
  height: 160px;
  font-size: 18px;
}

.material-card-name {
  margin-top: 4px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.material-card-meta {
  font-size: 11px;
  color: #6b7280;
}

.material-detail-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 160px;
  margin-bottom: 12px;
}

.material-detail-preview img {
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
}

.btn-secondary.danger {
  background: #dc2626;
}

.btn-secondary.danger:hover {
  background: #991b1b;
}

/* 資料庫（materials.html）のスマホ対応。フォルダ一覧（サイドバー）とファイル一覧を
   左右並びから上下に積み替え、フォルダ一覧は横スクロールする帯（チップ状）に変える
   （縦に長いリストのまま積むと画面の大半をフォルダ一覧が占有してしまうため）。 */
@media (max-width: 700px) {
  main.list-page .materials-body {
    flex-direction: column;
  }

  .materials-folders {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
    max-height: none;
  }

  .materials-folder-item {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .materials-grid-wrap {
    flex: 1 1 auto;
    min-height: 200px;
  }

  .materials-bulk-bar {
    flex-wrap: wrap;
  }

  /* 検索条件（キーワード・期間・種別・サイズ等）は項目数が多く、1行ずつ縦に積むと
     画面の大半を占有してファイル一覧が見えなくなるため、既定では折りたたんでおく。 */
  .search-toggle-btn {
    display: inline-block;
  }

  #searchFieldsRow {
    display: none;
    width: 100%;
  }

  #searchFieldsRow.open {
    display: flex;
  }
}

/* 休日マスタ（holidays.html）。1年分を3列×4行の月カレンダーで表示する。 */
.holiday-year-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.holiday-month {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 12px;
}

.holiday-month h3 {
  text-align: center;
  margin: 0 0 8px;
}

.holiday-month table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.holiday-month th,
.holiday-month td {
  text-align: center;
  padding: 4px 2px;
  font-size: 12px;
}

.holiday-day {
  cursor: pointer;
  border-radius: 4px;
}

.holiday-day:hover {
  background: #f0f0f0;
}

.holiday-day.holiday {
  color: #dc2626;
  font-weight: bold;
}

@media (max-width: 900px) {
  .holiday-year-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .holiday-year-grid {
    grid-template-columns: 1fr;
  }
}

/* スケジュール（schedule.html、サイボウズ風。まず個人用のみ）。 */
.schedule-nav {
  display: flex;
  gap: 4px;
}

.schedule-nav-label {
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
}

.schedule-time-row {
  display: flex;
  gap: 12px;
}

/* 予定編集ダイアログ上部の「コピー／1週間後／1か月後に新規予定をつくる」ボタン行（編集時のみ表示）。 */
.schedule-duplicate-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

.schedule-duplicate-row button {
  font-size: 12px;
}

#scheduleBody {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 日・週表示：終日行＋時刻の目盛り＋日ごとの列。ヘッダー・終日行は固定、タイムラインだけが
   縦スクロールする（.schedule-timeline-scrollがflex:1で残り高さを占有する）。 */
.schedule-timeline-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.schedule-day-header-row,
.schedule-allday-row {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
}

.schedule-time-gutter {
  flex: 0 0 56px;
  padding: 4px 6px;
  font-size: 11px;
  color: #888;
  text-align: right;
  border-right: 1px solid #e5e7eb;
}

.schedule-day-header,
.schedule-allday-cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 4px;
  border-right: 1px solid #f1f3f5;
}

.schedule-day-header {
  text-align: center;
  font-weight: bold;
  font-size: 13px;
}

.schedule-day-header.today { background: #eff6ff; }
.schedule-day-header.col-sun, .schedule-day-header.holiday { color: #dc2626; }
.schedule-day-header.col-sat { color: #2563eb; }

.schedule-holiday-name {
  font-size: 10px;
  font-weight: normal;
  color: #dc2626;
}

.schedule-allday-cell {
  min-height: 28px;
  cursor: pointer;
}

.schedule-timeline-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  position: relative;
}

.schedule-timeline-grid {
  position: relative;
  display: flex;
}

.schedule-time-gutter-tall {
  flex: 0 0 56px;
  position: relative;
  border-right: 1px solid #e5e7eb;
}

.schedule-hour-label {
  position: absolute;
  left: 0;
  right: 4px;
  transform: translateY(-6px);
  font-size: 11px;
  color: #888;
  text-align: right;
}

.schedule-day-col {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  border-right: 1px solid #f1f3f5;
  cursor: pointer;
  /* タッチでの範囲ドラッグ中に、ブラウザ標準の縦スクロールジェスチャーと競合しないようにする。 */
  touch-action: none;
}

.schedule-day-col.col-sun { background: #fef9f9; }
.schedule-day-col.col-sat { background: #f8fbff; }

.schedule-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid #f1f3f5;
}

.schedule-event-chip {
  background: #2563eb;
  color: white;
  border-radius: 4px;
  padding: 2px 6px;
  margin-bottom: 2px;
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.schedule-timed-event {
  /* left/widthは重なり判定(layoutOverlappingEvents)の結果に応じてJS側で常に設定する
     （重ならない予定は列数1として、実質left:2px; width:calc(100% - 4px)相当になる）。 */
  position: absolute;
  z-index: 1;
  margin-bottom: 0;
}

/* 非公開の予定（共有機能は今後対応、現時点では表示色だけ変える）。 */
.schedule-event-chip.private {
  background: #16a34a;
}

/* ログインユーザーに紐づく社員が社員休暇(employee-vacations.html)で稼働可能時間を
   記録している日に、終日欄・月表示セルの先頭に出す休暇インジケーター。予定チップとは違い
   クリック操作は持たない（編集は社員休暇画面で行う想定のため）。 */
.schedule-vacation-chip {
  background: #f97316;
  color: white;
  border-radius: 4px;
  padding: 2px 6px;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: bold;
}

/* 時間軸をドラッグして予定の範囲を選ぶときのプレビュー表示（ポインター追従、操作の邪魔をしない）。 */
.schedule-drag-preview {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 2;
  background: rgba(37, 99, 235, 0.25);
  border: 1px dashed #2563eb;
  border-radius: 4px;
  pointer-events: none;
}

/* 月表示：CSSグリッドの週7列。セル内の予定チップは3件まで表示し、残りは「他N件」にまとめる。
   セル・「他N件」のクリックはいずれもその日の日表示へジャンプする（月表示自体には
   予定エントリー導線を持たせず、日表示に寄せることで操作を単純にする）。 */
.schedule-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(90px, 1fr);
  flex: 1 1 auto;
  overflow-y: auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.schedule-month-dow {
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  padding: 6px 0;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
}

.schedule-month-dow.col-sun { color: #dc2626; }
.schedule-month-dow.col-sat { color: #2563eb; }

.schedule-month-cell {
  display: flex;
  flex-direction: column;
  padding: 4px;
  border-right: 1px solid #f1f3f5;
  border-bottom: 1px solid #f1f3f5;
  overflow: hidden;
  cursor: pointer;
}

.schedule-month-cell.outside-month { background: #fafafa; color: #bbb; }
.schedule-month-cell.today { background: #eff6ff; }

.schedule-month-cell-date {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 2px;
}

.schedule-month-cell-date .schedule-holiday-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.schedule-month-cell.col-sun .schedule-month-cell-date,
.schedule-month-cell.holiday .schedule-month-cell-date { color: #dc2626; }
.schedule-month-cell.col-sat .schedule-month-cell-date { color: #2563eb; }

.schedule-month-cell-events {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.schedule-month-more {
  font-size: 10px;
  color: #888;
}

/* 個人グループ管理（user-groups.html）：グループ名の右にボタンを並べる行、メンバー一覧、
   メンバー追加用のセレクト＋ボタンの行。 */
.inline-edit-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.member-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 12px;
  max-height: 240px;
  overflow-y: auto;
}

.member-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid #f1f3f5;
}

.member-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

/* スケジュール共有機能：予定チップの編集可否は「誰が登録したか」で決まる（他人が登録した
   予定はクリックしても編集できないため、既定のカーソルに戻す）。日・週・月表示自体は
   他ユーザーのスケジュールにも予定を登録できるため、列・セル側にはreadonly指定をしない。 */
.schedule-event-chip.readonly { cursor: default; }

/* 月表示：セルをドラッグして複数日にまたがる終日予定の範囲を選ぶときのプレビュー表示。 */
.schedule-month-cell.drag-selected {
  background: rgba(37, 99, 235, 0.12);
  outline: 2px dashed #2563eb;
  outline-offset: -2px;
}

/* 週（共有）表示：列を日付、行をユーザーとした一覧テーブル。社員休暇(vacation-table)と
   同じ「1列目（ユーザー名）を横スクロール時に固定」パターンを使う。 */
.schedule-shared-week-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.schedule-shared-week-table th, .schedule-shared-week-table td {
  border: 1px solid #f1f3f5;
  padding: 6px 8px;
  vertical-align: top;
  min-width: 130px;
}

.schedule-shared-week-table thead th {
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  background: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 1;
}

.schedule-shared-week-table th:first-child, .schedule-shared-week-table td:first-child {
  position: sticky;
  left: 0;
  background: white;
  z-index: 1;
  min-width: 100px;
  text-align: left;
  font-weight: bold;
}

.schedule-shared-week-table thead th:first-child { z-index: 2; }

.schedule-shared-week-table thead th.col-sun, .schedule-shared-week-table thead th.holiday { color: #dc2626; }
.schedule-shared-week-table thead th.col-sat { color: #2563eb; }
.schedule-shared-week-table thead th.today { background: #eff6ff; }
.schedule-shared-week-table tbody td.col-sun { background: #fef9f9; }
.schedule-shared-week-table tbody td.col-sat { background: #f8fbff; }
.schedule-shared-week-table tbody td { cursor: pointer; }

.schedule-shared-week-table .schedule-event-chip { margin-bottom: 2px; }

/* 週（共有）表示：セルをドラッグして複数日にまたがる終日予定の範囲を選ぶときのプレビュー表示
   （月表示の.schedule-month-cell.drag-selectedと同じ見た目）。 */
.schedule-shared-week-table tbody td.drag-selected {
  background: rgba(37, 99, 235, 0.12);
  outline: 2px dashed #2563eb;
  outline-offset: -2px;
}

/* ---- 見積書の明細ツリー（mitsumori-edit.html） ---- */
/* 1行1<tr>に詰め込むと名称欄が数文字しか見えず入力しにくいため、1明細＝2〜3段のカード状
   ブロックにした。階層はブロック自体のmargin-leftで表現し、ブロック先頭の余白がそのまま
   インデントの視認領域を兼ねる（列を増やして表現しない）。 */
.mitsumori-line-block {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 5px 8px;
  margin-bottom: 3px;
}

.mitsumori-line-row1, .mitsumori-line-row2 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 3px;
}

/* .mitsumori-line-fieldは共通スタイルのlabel(margin-bottom:16px)を包むため、
   ここで明示的に0へ上書きしないとカードが無駄に高くなる。inputも同様にpadding/
   margin-topを詰める（通常フォームの入力欄より小さくして良い前提のミニ表示）。 */
.mitsumori-line-field {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: #6b7280;
  gap: 1px;
  margin-bottom: 0;
}
.mitsumori-line-field input, .mitsumori-line-field select {
  font-size: 13px;
  color: #111827;
  padding: 3px 5px;
  margin-top: 0;
}
.mitsumori-line-field.field-nm { flex: 2; min-width: 160px; }
.mitsumori-line-field.field-kikaku { flex: 1.5; min-width: 160px; }
.mitsumori-line-field.field-bikou { flex: 1.1; min-width: 120px; }
.mitsumori-line-field.field-master { flex: 2; min-width: 150px; }
.mitsumori-line-field.field-suu { width: 90px; }
.mitsumori-line-field.field-tani { width: 70px; }
.mitsumori-line-field.field-tanka { width: 100px; }
.mitsumori-line-field.field-kingaku { width: 130px; }
.mitsumori-kingaku-value {
  font-size: 15px;
  font-weight: bold;
  text-align: right;
  padding-top: 2px;
}

.mitsumori-line-actions-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px dashed #d1d5db;
}
.mitsumori-line-actions-row button {
  padding: 3px 8px;
  font-size: 12px;
}
/* 「操作ボタンを表示」をオフにしたときの簡易表示モード：入力・確認に集中したいときに使う。 */
.mitsumori-lines-container.hide-actions .mitsumori-line-actions-row { display: none; }

/* 折りたたみ開閉アイコン。row1の入力欄と下端を揃え、子が無い行では非表示（disabled時visibility:hidden
   でスペースだけ残し、行の縦位置がガタつかないようにする）。 */
.mitsumori-collapse-toggle {
  flex: 0 0 auto;
  align-self: flex-end;
  width: 22px;
  height: 26px;
  margin-bottom: 1px;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  color: #374151;
  border: 1px solid #9ca3af;
  border-radius: 4px;
  background: #e5e7eb;
  cursor: pointer;
}
.mitsumori-collapse-toggle:hover {
  background: #d1d5db;
}
.mitsumori-collapse-toggle:disabled {
  visibility: hidden;
}

/* 階層ごとに背景色を変える。単一色の濃淡だと違いが分かりにくいとのフィードバックを受け、
   2階層ごとに色相を変える（青→緑→黄→紫→グレー）。各組の中では明度だけ変えて奇数/偶数を区別する。 */
.mitsumori-level-1 { background: hsl(210, 70%, 95%); }
.mitsumori-level-2 { background: hsl(210, 65%, 87%); }
.mitsumori-level-3 { background: hsl(150, 55%, 93%); }
.mitsumori-level-4 { background: hsl(150, 50%, 84%); }
.mitsumori-level-5 { background: hsl(48, 85%, 88%); }
.mitsumori-level-6 { background: hsl(45, 80%, 77%); }
.mitsumori-level-7 { background: hsl(270, 45%, 94%); }
.mitsumori-level-8 { background: hsl(270, 40%, 86%); }
.mitsumori-level-9 { background: hsl(220, 8%, 93%); }
.mitsumori-level-10 { background: hsl(220, 8%, 84%); }

/* 表紙カスタマイズ機能のデザイナー画面。キャンバスはA4(210x297mm)を3px/mmで縮小表示し、
   ドラッグで動かした位置(px)を都度mmへ換算してfield.x/yに保持する。 */
.cover-designer-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.cover-designer-palette {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cover-designer-palette button {
  text-align: left;
}
.cover-designer-palette button.cover-palette-piece {
  margin-left: 16px;
  font-size: 0.9em;
}
.cover-designer-canvas-wrap {
  flex: 0 0 auto;
  background: #e5e7eb;
  padding: 16px;
  border-radius: 4px;
  overflow: auto;
}
.cover-designer-canvas {
  position: relative;
  width: 630px;
  height: 891px;
  background: #fff;
  border: 1px solid #9ca3af;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.cover-field-box {
  position: absolute;
  cursor: move;
  padding: 2px 4px;
  border: 1px dashed #93c5fd;
  background: rgba(239, 246, 255, 0.85);
  white-space: nowrap;
  user-select: none;
}
.cover-field-box.selected {
  border: 2px solid #2563eb;
  background: rgba(219, 234, 254, 0.95);
}
.cover-designer-properties {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.badge {
  display: inline-block;
  font-size: 0.8em;
  padding: 1px 6px;
  border-radius: 3px;
  background: #e5e7eb;
  color: #374151;
}

/* 見積明細のマスタ選択ポップアップ。物品・工賃・業者を同時に並べて表示する（既存の
   kousyu-detail.html等のような区分ラジオでの1パネル切替とは異なる新レイアウト）。
   3区分ぶん縦に積むためscroll無しで画面に収まるよう、共通スタイルのlabel(margin-bottom:16px)・
   input/select(padding:8px)・button(padding:10px 16px)をこのポップアップ内だけ詰める。 */
#masterPickerModal .modal-box {
  max-width: 600px;
}
#masterPickerModal label {
  margin-bottom: 6px;
  font-size: 12px;
}
#masterPickerModal input,
#masterPickerModal select {
  padding: 4px 6px;
  margin-top: 2px;
  font-size: 13px;
}
#masterPickerModal button {
  padding: 5px 10px;
  font-size: 13px;
}
.master-picker-section {
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 8px;
}
.master-picker-section:last-child {
  margin-bottom: 0;
}
/* 3区分を見分けやすくするための背景色分け（mitsumori-level-*と同系統のパステル）。 */
.master-picker-section-buppin { background: hsl(210, 60%, 96%); }
.master-picker-section-kouchin { background: hsl(150, 45%, 95%); }
.master-picker-section-gyousya { background: hsl(270, 40%, 96%); }

/* 選択ボタンはこのポップアップ内で最も押してほしい操作なので、他の青ボタンより
   目立つオレンジにする（schedule-vacation-chipと同じ色を流用）。 */
.btn-accent {
  background: #f97316;
}
.btn-accent:hover {
  background: #ea580c;
}
.master-picker-section h3 {
  margin: 0 0 4px;
  font-size: 14px;
}