/* 部品:ボタン・入力・表・div表・バッジ・知らせ・メモ・消込みの✓(docs/design/ui/001-design-system.md セクション3.3)。
   既存のクラス名・マークアップに当てる。色はトークンだけを参照する。 */

/* --- ボタン。既定(クラスなし)は副。:where()で詳細度を0にし、.btn-primary・.btn-danger が必ず勝つようにする --- */
:where(main button:not(.memo-icon):not(.row-match-icon), main input[type=submit], .btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 32px; padding: 0 var(--space-3);
  border: 1px solid var(--border-input); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--text-sm); font-weight: 600; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
:where(main button:not(.memo-icon):not(.row-match-icon), main input[type=submit], .btn):hover { background: var(--surface-subtle); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger { color: var(--expense); border-color: var(--expense); }
.btn-danger:hover { background: var(--danger-bg); }
:where(main button, main input[type=submit], .btn):disabled { opacity: 0.5; cursor: not-allowed; }
/* 表の中は28px */
td :where(button:not(.memo-icon):not(.row-match-icon), input[type=submit]), .entry-cell :where(button, input[type=submit]) { min-height: 28px; }
/* ボタンのフォームは、行に並べるときに余白を持たない */
form.button_to { display: inline; margin: 0; }

/* --- 入力・選択・チェックボックス --- */
main input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
main select, main textarea {
  min-height: 32px; padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--text-sm);
  transition: border-color 120ms ease-out;
}
main textarea { min-height: 0; }
main input:focus, main select:focus, main textarea:focus { border-color: var(--accent); }
main input:disabled, main select:disabled, main textarea:disabled { background: var(--surface-subtle); }
main input[type=number] { text-align: right; font-variant-numeric: tabular-nums; }
main input[type=checkbox], main input[type=radio] { accent-color: var(--accent); }
td input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]), td select { min-height: 28px; }

/* --- 表。縦罫線なし・横罫線だけ。ページの本文の中の表にクラスなしで当てる --- */
.table-wrap { overflow-x: auto; margin-bottom: var(--space-4); }
.table-wrap > table, .table-wrap > .entry-table { margin-bottom: 0; }

main table {
  border-collapse: collapse; margin-bottom: var(--space-4);
  font-size: var(--text-sm); line-height: 1.4;
}
main th, main td { padding: var(--space-2) var(--space-3); text-align: left; vertical-align: middle; border: 0; border-bottom: 1px solid var(--border); }
main th { background: var(--surface-subtle); color: var(--text-muted); font-weight: 600; }
main th.num, main td.num { text-align: right; }
main tbody tr:hover > td, main tbody tr:hover > th { background: var(--surface-subtle); }
main tfoot td, main tfoot th, main tr.total-row > td, main tr.total-row > th {
  background: var(--surface-subtle); font-weight: 600; border-top: 1px solid var(--text-faint);
}

/* --- 行の入力表(div表。.entry-table)。表と同じ見た目 --- */
.entry-table { display: table; border-collapse: collapse; width: 100%; margin-bottom: var(--space-4); font-size: var(--text-sm); line-height: 1.4; }
.entry-row { display: table-row; }
.entry-row form { display: contents; }
.entry-cell { display: table-cell; padding: var(--space-2) var(--space-3); vertical-align: middle; border-bottom: 1px solid var(--border); }
.entry-row.header { font-weight: 600; }
.entry-row.header .entry-cell { background: var(--surface-subtle); color: var(--text-muted); }
.entry-row:not(.header):hover > .entry-cell, .entry-row:not(.header):hover form > .entry-cell { background: var(--surface-subtle); }
.entry-cell input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]), .entry-cell select {
  width: 100%; box-sizing: border-box; /* 枠は共通の --border-input(部品の境界。コントラスト3:1以上)のまま。装飾用の --border にしない(Copilotの指摘。PR #156) */
}
.entry-cell input:focus, .entry-cell select:focus { border-color: var(--accent); }

/* 縦に長い表は、見出しを固定する(デスクトップだけ。overflowが visible でない祖先があると sticky が効かなくなる) */
@media (min-width: 1100px) {
  .table-wrap { overflow-x: visible; }
  main thead th, .entry-row.header > .entry-cell {
    position: sticky; top: var(--sticky-top, var(--header-h)); z-index: 10;
  }
}
/* 狭い幅では、表は最小幅を保って横にスクロールする(列を畳まない) */
@media (max-width: 1099px) {
  .table-wrap > table, .table-wrap > .entry-table { min-width: 640px; }
  .table-wrap > .entry-table { min-width: 960px; }
}

/* 空の表の文 */
.empty { color: var(--text-muted); }

/* --- バッジ。状態の文字を必ず持つ(色だけで伝えない) --- */
.badge {
  display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 600; line-height: 1.4; white-space: nowrap;
  background: var(--neutral-bg); color: var(--neutral-fg);
}
.badge-unconfirmed { background: var(--warning-bg); color: var(--warning-fg); }
.badge-confirmed { background: var(--neutral-bg); color: var(--neutral-fg); }
.badge-missing { background: var(--danger-bg); color: var(--danger-fg); }
.badge-preliminary, .badge-matched, .badge-group, .badge-rule { background: var(--info-bg); color: var(--info-fg); }
.badge-forecast { background: var(--forecast-bg); color: var(--forecast-fg); border: 1px dashed var(--forecast-fg); }
.badge-case { background: var(--case-bg); color: var(--case-fg); }

/* --- 知らせ(.flash)。左に色の帯 --- */
.flash {
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  border-left: 4px solid var(--neutral-fg); border-radius: var(--radius);
  background: var(--neutral-bg); color: var(--neutral-fg);
}
.flash-notice { background: var(--success-bg); color: var(--success-fg); border-left-color: var(--success-fg); }
.flash-alert { background: var(--danger-bg); color: var(--danger-fg); border-left-color: var(--danger-fg); }
.flash ul { margin: var(--space-1) 0 0; }
.flash a { color: inherit; text-decoration: underline; }

/* --- 補足の文 --- */
.case-managed-note, .scope-note { font-size: var(--text-sm); color: var(--text-muted); }
.sync-day-hint { display: block; font-size: var(--text-xs); color: var(--warning-fg); }
.memo-indicator { display: block; font-size: var(--text-xs); color: var(--expense); }

/* --- 行メモ(002-screen-design.md 項目60)。textareaは既定で隠し、.openが付いた時だけ表示する --- */
.memo-icon { border: none; background: none; cursor: pointer; font-size: 1.1em; padding: 0; color: var(--text-muted); }
.memo-textarea { display: none; width: 14rem; height: 3.5rem; margin-top: var(--space-1); box-sizing: border-box; }
.memo-textarea.open { display: block; }

/* --- 消込みの✓(項目61)。opacityで隠す方式を維持する。
   visibility:hiddenだとフォーカス不可・タブ順序の対象外になり、キーボード操作者が辿り着けない(PR #98の指摘) --- */
.row-match-form { display: inline; }
.row-match-icon { opacity: 0; border: none; background: none; cursor: pointer; font-size: 1.1em; padding: 0; color: var(--accent); }
.ledger-row:hover .row-match-icon,
.row-match-icon:focus-visible { opacity: 1; }

/* --- 段階2で足す部品(docs/design/ui/001-design-system.md セクション5「段階2の設計」) --- */

/* aにbtnを付けたとき:ボタンと同じ色・下線なし(base.cssのa・a:hover・main p aに負けないよう、詳細度を上げる) */
a.btn, a.btn:hover { text-decoration: none; color: var(--text); }
a.btn.btn-primary, a.btn.btn-primary:hover { color: var(--on-accent); }
a.btn.btn-danger, a.btn.btn-danger:hover { color: var(--expense); }

/* 絞り込みのフォームの行 */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); }
.filter-bar select, .filter-bar input:not([type=hidden]):not([type=submit]) { min-width: 10rem; }

/* 登録のリンクなどの操作の行。段落の「 / 」の区切りは、gapで間を取るので見えなくする(文言・リンクは変えない) */
.page-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); font-size: 0; }
.page-actions > .btn { font-size: var(--text-sm); }

/* 0件の表示 */
.empty-state {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6); text-align: center; color: var(--text-muted);
}
.empty-state p { margin-bottom: var(--space-3); }
.empty-state p:last-child { margin-bottom: 0; }

/* 項目のフォーム(2列の表)。見出しの列は薄く、行のホバーの背景を付けない(入力の表であり、一覧ではない) */
.form-table { margin-bottom: 0; }
.form-table th { width: 9rem; background: transparent; color: var(--text-muted); vertical-align: top; }
.form-table tbody tr:hover > td, .form-table tbody tr:hover > th, .form-table tr:hover > td, .form-table tr:hover > th { background: transparent; }
.form-table input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .form-table select { max-width: min(100%, 28rem); }
.form-table textarea { width: 100%; max-width: min(100%, 28rem); }
/* 2列だけなので、狭い幅では上下に積んでも列の意味が崩れない(多列のデータの表は畳まない原則とは別) */
@media (max-width: 699px) {
  .form-table, .form-table tbody, .form-table tr, .form-table th, .form-table td { display: block; width: 100%; }
  .form-table th { border-bottom: 0; padding-bottom: 0; }
}

/* フォームの送信の行 */
.form-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }

/* 入力表のセルの列の幅(div表は列の幅を宣言できないので、セルにクラスを付けて、入力欄の最小幅を決める) */
.col-month { min-width: 7rem; }
.col-num { min-width: 8rem; }
.col-date { min-width: 9.5rem; }
.col-select { min-width: 11rem; }
.col-status { min-width: 11rem; }
.col-check { width: 4rem; text-align: center; }

/* 列が多い入力表(請求の9列→8列)は、狭い幅での最小幅を広げる */
@media (max-width: 1099px) {
  .table-wrap > .entry-table.entry-table--wide { min-width: 1100px; }
}

/* 新規の行(入力表の最後の「(新規)」の行)を、既存の行と見分ける */
.entry-row.is-new > .entry-cell, .entry-row.is-new form > .entry-cell {
  background: var(--surface-subtle); border-top: 1px solid var(--border-input);
}

/* リダイレクトのアンカー(#case-invoice-<id>)で来た行を強調する(純CSS。JSは要らない) */
.entry-row:target > .entry-cell, .entry-row:target form > .entry-cell { background: var(--accent-subtle); }

/* まとめて作るフォームの1行(ラベルの文字は、そのまま並ぶ) */
.bulk-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* 無効の行(顧客・エンドユーザーの「有効」が外れた行)。入力の文字を薄くする(入力欄の背景は変えない) */
.entry-row.is-inactive input:not([type=checkbox]):not([type=submit]), .entry-row.is-inactive select { color: var(--text-muted); }

/* --- 段階3で足す部品(docs/design/ui/001-design-system.md セクション5「段階3の設計」) --- */

/* 知らせの重要度:警告(赤。.flash-alert のまま)・注意(黄。.is-warning)・情報(青。.is-info)・成功(緑。.flash-notice)。
   クラス名は変えず、修飾を足す。 */
.flash.is-warning { background: var(--warning-bg); color: var(--warning-fg); border-left-color: var(--warning-fg); }
.flash.is-info { background: var(--info-bg); color: var(--info-fg); border-left-color: var(--info-fg); }
.flash details > summary { cursor: pointer; }
.flash details > ul { margin: var(--space-2) 0 0; }
.badge-warning { background: var(--warning-bg); color: var(--warning-fg); }

/* 状態の行(情報)。中の段落を横に並べる */
.status-strip {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  background: var(--info-bg); color: var(--info-fg); border-left: 4px solid var(--info-fg); border-radius: var(--radius);
}
.status-strip p { margin: 0; }
.status-strip a { color: inherit; text-decoration: underline; }
.status-strip .case-managed-note { color: inherit; }

/* 表の上の操作の行(左に年度の移動、右に単位の切替など) */
.table-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.table-toolbar > * { margin: 0; }

/* 文字の切替の組(<p class="segmented">。選んだものは strong、選べるものは a)。段落の「 / 」の区切りは見えなくする */
.segmented { display: inline-flex; align-items: center; font-size: 0; margin: 0 0 var(--space-3); }
.segmented-label { font-size: var(--text-sm); color: var(--text-muted); margin-right: var(--space-2); }
.segmented > a, .segmented > strong {
  font-size: var(--text-sm); line-height: 1.2; padding: 6px var(--space-3);
  border: 1px solid var(--border-input); background: var(--surface); color: var(--text-muted); text-decoration: none;
}
.segmented > a:hover { background: var(--surface-subtle); color: var(--text); text-decoration: none; }
.segmented > strong { background: var(--accent-subtle); color: var(--accent); font-weight: 600; }
.segmented > .segmented-label + * { border-radius: var(--radius) 0 0 var(--radius); }
.segmented > * + a, .segmented > * + strong { margin-left: -1px; }
.segmented > :last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.segmented > .segmented-label + :last-child { border-radius: var(--radius); }

/* 見出しセルの中の補足の文 */
.th-note { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--text-muted); white-space: normal; max-width: 9rem; margin-top: var(--space-1); }

/* 負の金額(文字は変えない。符号が出ている) */
.is-negative { color: var(--expense); }

/* 広い表の入れ物:縦にも横にもスクロールし、見出し・先頭列・合計列を固定する。
   固定は、この入れ物に対して効く(topは入れ物の上端。ヘッダーの高さに依存しない)。tabindex・role・aria-labelはビューで付ける */
.table-scroll {
  overflow: auto; margin-bottom: var(--space-4);
  max-height: calc(100vh - var(--header-h) - 2rem);
  max-height: calc(100dvh - var(--header-h) - 2rem);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
}
.table-scroll > table { width: max-content; min-width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }
.table-scroll th, .table-scroll td { border-bottom: 1px solid var(--border); background-color: var(--surface); }
/* 段階1の「main thead th」は、ページのスクロールに対するtop(--header-h)なので、入れ物の中では詳細度を上げて上書きする
   (入れ物の中でtopが96pxだと、見出しの上に空白が出る) */
.table-scroll thead th { position: sticky; top: 0; z-index: 3; background-color: var(--surface-subtle); }
@media (max-width: 699px) {
  .table-scroll { max-height: 70dvh; }
}

/* 「カード+幅いっぱい」の既定:カードの直下の表と、.table-wrap・.table-scrollの直下の表は、幅いっぱいにする(幅を絞る表は、max-widthを明示する) */
.card > table, .table-wrap > table { width: 100%; }

/* 確認の画面の実行の行(実行のフォームと、戻るリンクを1行に並べる) */
.confirm-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-4); }
.confirm-actions form { display: inline; margin: 0; }

/* 一括操作のバー(未確定キュー)。表の下に、画面の下端へ貼り付く。選択件数はCSSのカウンター(JSなし) */
.bulk-scope { counter-reset: bulk-selected; }
.bulk-scope input[name='group_ids[]']:checked,
.bulk-scope input[name='item_keys[]']:checked { counter-increment: bulk-selected; }
.bulk-bar {
  position: sticky; bottom: 0; z-index: 20;
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -4px 12px var(--shadow-color);
  padding: var(--space-3) var(--space-4);
}
.bulk-bar fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; border: 0; }
.bulk-bar legend { float: left; font-weight: 600; margin-right: var(--space-4); padding: 0; }
.bulk-bar p { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
/* 数えるのは「まとまり」(1まとまりに複数の入出金が入る)。件数と取り違えないよう、単位は「まとまり」にする */
.bulk-count::before { content: "選択: "; }
.bulk-count::after { content: counter(bulk-selected) "まとまり"; font-weight: 600; font-variant-numeric: tabular-nums; }
/* 明細の画面(3-4g)は、数えるのが「件」。元の規則と同じ詳細度なので、必ず後ろに書く */
.bulk-count.is-items::after { content: counter(bulk-selected) "件"; }
/* 「この検索結果の全部」を選んだときは、カウンターの数字が意味を持たないので、隠す(薄くすると文字のコントラストが足りない。:has()が無いブラウザでは隠れないだけ) */
.bulk-scope:has(input[name=select_all]:checked) .bulk-count { visibility: hidden; }
/* 狭い幅・高さが低い画面では、貼り付けず、表の下に置く(画面の下を占領しない) */
@media (max-width: 699px), (max-height: 600px) {
  .bulk-bar { position: static; box-shadow: none; }
}

/* 行ごとの確定のフォーム(最後の列)。科目の選択・今後も同じ・キーワード・確定のボタンを折り返して並べる */
.row-confirm { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; }
.row-confirm select { min-width: 14rem; }
.row-confirm input[name=keyword] { min-width: 10rem; }

/* 段落で積んだ入力欄のフォーム(ルール・月額マスタ・取り込みの記録)。ラベル・入力・補足の文が横に並び、狭いと折り返す */
.form-flow p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); }
.form-flow label { display: inline-flex; align-items: center; gap: var(--space-2); }
.form-flow input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]), .form-flow select { max-width: min(100%, 28rem); }
.form-flow li label { display: inline; }

/* 無効の行(ルール一覧の「無効」の行も含む)は、行全体の文字を薄くする */
tr.is-inactive > td { color: var(--text-muted); }
/* 狭い幅で、ページ全体が横にあふれないようにする。fieldsetの既定のmin-width(中身の最小幅)と、選択の中身の最長の選択肢が、
   折り返せない幅を作るため、min-widthを0にし、選択・入力は親の幅までに収める(未確定キュー・絞り込みの行) */
.bulk-bar fieldset { min-width: 0; }
.bulk-bar select, .bulk-bar input:not([type=checkbox]):not([type=submit]), .filter-bar select, .filter-bar input:not([type=checkbox]):not([type=submit]):not([type=hidden]) { max-width: 100%; }
.bulk-bar p, .filter-bar label { min-width: 0; }
.row-confirm select { max-width: 100%; }

/* --- 段階4:横あふれの予防(フレックスの子の既定のmin-width: autoを0にする)・ログイン・ボタンの折り返し --- */
:where(.filter-bar, .page-head, .card-head, .page-actions, .confirm-actions, .status-strip,
       .table-toolbar, .bulk-form, .form-flow p, .row-confirm, .entry-actions) > * { min-width: 0; }

/* 700px未満では、長いラベルのボタン(「ルールはそのままで、確定だけ付け替える」など)を折り返してよい */
@media (max-width: 699px) {
  :where(main button, main input[type=submit], .btn) {
    white-space: normal; text-align: center; height: auto; min-height: 32px; padding-block: 6px;
  }
}

/* ログインとメッセージの画面の入れ物(ナビは出ない) */
.auth-page { min-height: 60dvh; display: grid; place-items: center; }
.auth-card {
  width: 100%; max-width: 24rem; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8);
}
.auth-card .auth-app { margin: 0 0 var(--space-1); color: var(--text-muted); font-size: var(--text-sm); }
.auth-card h1 { margin-bottom: var(--space-6); }
.auth-card p { color: var(--text); }
.auth-card form { margin: 0; }
.btn-block { width: 100%; }
@media (max-width: 699px) {
  .auth-card { padding: var(--space-6); }
}

/* --- 縦に積むフォーム(段階4(b)。口座の編集)。項目は上にラベル・下に入力、注記は薄く --- */
.form-stack { max-width: 40rem; }
.form-stack > p { margin: 0 0 var(--space-4); }
.form-stack label { display: inline-block; margin-bottom: var(--space-1); }
.form-stack small { display: block; margin-top: var(--space-1); color: var(--text-muted); font-size: var(--text-sm); }
.form-stack .form-actions { margin-top: var(--space-2); }
.col-code { min-width: 9rem; }
.col-label { min-width: 14rem; }
.entry-cell .case-managed-note { display: block; margin-top: var(--space-1); }

/* --- 入金の突き合わせ(段階4(c))。請求書入金の1件ごとのまとまり --- */
.reconciliation-item { margin-bottom: var(--space-6); }
.reconciliation-item > h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); font-size: var(--text-lg); }
.reconciliation-item .sync-day-hint { margin-top: var(--space-1); }