* { 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 {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

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;
}

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

.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;
}

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

/* マイショートカット（ツールバーのドロップダウン）。 */
.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;
}

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

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

.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;
}

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

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

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 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;
}

.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;
}

/* 一覧+下部詳細パネル画面用。高さは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;
}

#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 {
    display: none !important;
  }

  .print-only {
    display: block;
  }

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

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

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

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

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

.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;
}

.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;
}

.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;
}

/* 支出日報（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;
}

/* 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;
}