.page {
  min-width: 0;
}

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

.title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}

.subtitle {
  font-size: 13px;
  color: var(--tx-d);
  margin-top: 4px;
}

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

.dateInput {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--bd);
  background: var(--sf-h);
  color: var(--tx);
  /* 枠全体を押せる（onClick で showPicker。D-162）と分かるように */
  cursor: pointer;
}

.dateSep {
  color: var(--tx-m);
}

.backBtn {
  font-size: 12px;
  color: var(--tx-d);
  background: none;
  border: 1px solid var(--bd);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}

.card {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 12px;
  overflow: hidden;
}

.toolbar {
  padding: 16px 20px;
  border-bottom: 1px solid var(--bd);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.toolbarLeft,
.toolbarRight {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.select,
.searchInput {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--bd);
  background: var(--sf-h);
  color: var(--tx);
}

/* ホールディングス / 顧客のセレクトは★幅を固定する★（ユーザー指示 2026-10-06。D-162）—
   選んだ名前の長さで幅が変わり、ツールバーの並びがずれるため。切れた名前は title（ホバー）で読む */
.masterSelect {
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.searchInput {
  padding: 6px 10px;
}

.csvBtn {
  font-size: 12px;
  color: var(--pr);
  background: var(--pr-d);
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}

/*
 * ★CSVが出せないときのボタン（指示書AI 段階8）★
 *
 * ★`.csvBtn` と並べて見分けがつく見た目にする★ — 押せることを期待させない。
 * ★色は app/globals.css の CSS変数だけを使う★（新しい色を発明しない）。
 * ★`font-family` をここで宣言しないこと★ — 宣言すると和文フォントが落ちて
 *   漢字が中華字形になる（CLAUDE.md §0-3）。
 */
.csvBtnDisabled {
  font-size: 12px;
  color: var(--tx-m);
  background: var(--sf-h);
  border: 1px solid var(--bd);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: not-allowed;
}

.tableWrap {
  overflow-x: auto;
}

/*
 * CSVボタンの下に出す注記（指示書AA 段階3）
 *
 * ★ページ送りを付けても CSV は全件のまま★
 *   （app/api/clean-logs/export/route.ts が page / per_page を無視する契約）。
 *   「画面に見えている50件だけが出る」と誤解されないように1行で断る。
 */
.csvNote {
  padding: 0 20px 12px;
  text-align: right;
  font-size: 11px;
  color: var(--tx-m);
}

/*
 * ★CSVが出せない理由（指示書AI 段階8）★
 *
 * ★注記（`.csvNote`）と同じ場所に出す★が、★警告色にして読み飛ばされないようにする★。
 * ★`--wn` は app/globals.css の既存の変数★（新しい色を作らない）。
 */
.csvNoteBlocked {
  padding: 0 20px 12px;
  text-align: right;
  font-size: 11px;
  color: var(--wn);
}

/*
 * ★旧フッタ（`{total}件（表示 N件）`）は components/ui/Pagination に置き換えた★
 *   件数表示の文言と `.footer` のスタイルは Pagination.module.css 側にある。
 */

.error {
  padding: 16px 20px;
  font-size: 13px;
  color: var(--ng);
}

.loading {
  padding: 24px 20px;
  font-size: 13px;
  color: var(--tx-m);
  text-align: center;
}