.page {
  min-width: 0;
}

.header {
  margin-bottom: 4px;
}

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

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

.statGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* ★絞り込みのまとまり（D-165）★ — 編集モード中は `<fieldset disabled>` で中の入力・ボタンをまとめて無効にする。
   fieldset の既定の枠・余白は外し、並びは .toolbar と同じ横並び */
.filterSet {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.filterSet:disabled,
.pagerSet:disabled {
  opacity: 0.5;
}

.filterSet:disabled *,
.pagerSet:disabled * {
  cursor: not-allowed;
}

/* ページ送りを包む fieldset（編集モード中に無効にするためだけ。見た目は変えない） */
.pagerSet {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* ★編集 / 保存 / キャンセル（D-165）★ — 絞り込みの行の右端。
   ★幅は固定★（「編集」⇔「保存（{n}件）・キャンセル」、JP/EN で行の折り返しが変わらないように） */
.editActions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
  width: 220px;
}

/* 見た目は `SystemScreen.module.css` の .saveButton / .resetButton に揃えてある */
.editButton {
  min-width: 96px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--bd);
  background: transparent;
  color: var(--tx-d);
  cursor: pointer;
  white-space: nowrap;
}

.editButtonPrimary {
  min-width: 112px;
  border-color: transparent;
  background: var(--pr-d);
  color: var(--pr);
}

.editButton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 編集モード中だけ出す案内（絞り込みとページ送りを使えない理由）と、保存に失敗した件数 */
.editNotice {
  margin: -8px 0 12px;
  font-size: 12px;
  color: var(--tx-m);
}

.editFailed {
  margin-top: 4px;
  font-weight: 600;
  color: var(--ng);
}

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

.dateInput {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--bd);
  background: var(--sf-h);
  color: var(--tx);
  /* 枠のどこを押してもカレンダーが開くので、枠全体を押せる見た目にする（ユーザー指示 2026-10-06。D-162） */
  cursor: pointer;
}

.dateSep {
  font-size: 12px;
  color: var(--tx-m);
}

/* 分類（ホールディングス / 屋号）のセレクト。モック:609/:612 と同じ見た目。
   ★`font-family` は書かない★（CLAUDE.md §0-3。日本語フォントは globals.css が正） */
.select {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--bd);
  background: var(--sf-h);
  color: var(--tx);
}

/* ★分類（ホールディングス / 顧客）のセレクトは固定幅（ユーザー指示 2026-10-06。D-162）★ —
   選んだ名前の長さで幅が変わらないように。はみ出す名前は「…」で切り、全文は `title`（hover）で読む */
.masterSelect {
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statusButtons {
  display: flex;
  gap: 6px;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.itemCard {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 12px;
  border-left: 3px solid var(--severity-color, var(--bd));
  padding: 16px 20px;
}

/* ★変えた行（下書きがある行）の目印（D-165）★ — 背景をうっすら色付けする。
   ★左の帯（border-left）は分類の色なので変えない★ */
.itemCardChanged {
  background: color-mix(in srgb, var(--pr) 8%, var(--sf));
}

/* ★本清掃が成功した事前チェック異常のカード（ユーザー指示 2026-10-07。D-171 の案2）★ — 中身を控えめにする。
   ★カード全体（.itemCard）に opacity をかけないこと★ — 子で 1 に戻せず、編集モードのプルダウン（.statusSelect）と
   備考の入力欄（.noteInput）まで薄くなる。★操作部品は不透明度 1 のまま★（ここに足さない）。
   保存失敗の文言（.rowError）も薄くしない（読み落とさないため） */
.itemCardSubdued .itemBadges,
.itemCardSubdued .facility,
.itemCardSubdued .scheduleLine,
.itemCardSubdued .batteryLine,
.itemCardSubdued .detectedLine,
.itemCardSubdued .statusBadge,
.itemCardSubdued .statusTime {
  opacity: 0.6;
}

.itemRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.itemMain {
  flex: 1;
  min-width: 250px;
}

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

.serial {
  font-size: 12px;
  font-family: var(--font-geist-mono), ui-monospace, monospace;
  color: var(--tx-m);
}

.facility {
  font-size: 14px;
  font-weight: 600;
  color: var(--tx);
}

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

/* 事前チェックの行の「予定: HH:MM — 備考」（通常モードで備考があるときだけ付ける。D-165）。
   ★備考を1行に収める（ユーザー指示 2026-10-06。D-162）★ — 前置き「予定: HH:MM —」は縮めず、
   備考（.noteText）だけが残りの幅で縮んで「…」になる */
.scheduleLineNote {
  display: flex;
  align-items: baseline;
  gap: 0.25em;
  min-width: 0;
}

.schedulePrefix {
  flex-shrink: 0;
  white-space: nowrap;
}

.detectedLine {
  font-size: 11px;
  color: var(--tx-m);
  margin-top: 4px;
}

.batteryLine {
  font-size: 11px;
  color: var(--tx-m);
  margin-top: 4px;
}

.statusBadge {
  font-size: 12px;
  padding: 4px 14px;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
}

/* ★通常モードの事前チェックの行のバッジ（D-165）★ — 編集モードのプルダウン（.statusSelect）と同じ幅・高さにして、
   モードを切り替えても列の幅と行の高さが変わらないようにする */
.statusBadgeFixed {
  display: block;
  box-sizing: border-box;
  width: 120px;
  padding: 4px 8px;
  border: 1px solid transparent;
  text-align: center;
}

/* ★事前チェックの行の対応状況プルダウン（ユーザー指示 2026-10-06。D-161）★
   色は .statusBadge と同じ（.statusResolved 等を重ねて付ける）。
   ★幅は固定★（JP/EN や選んだ値で列の幅が変わらないように。"In progress" と ▼ が収まる幅）。
   ブラウザ既定の見た目は外し、▼ を自前で描く（`currentColor` なので状態の文字色に揃う。
   `ErrorsScreen.module.css` の .statusSelect と同じ作り）。
   ★`font-family` は書かない★（globals.css が select に inherit 済み。CLAUDE.md §0-3） */
.statusSelect {
  display: block;
  width: 120px;
  font-size: 12px;
  font-weight: 600;
  /* 右の padding は ▼ のぶん */
  padding: 4px 24px 4px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 13px) 50%,
    calc(100% - 9px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}

.statusSelect:hover {
  border-color: currentColor;
}

.statusSelect:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 1px;
}

.statusSelect:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* 選択肢の一覧は OS 描画なので、色付き背景を引き継がず通常の配色で出す */
.statusSelect option {
  background: var(--sf);
  color: var(--tx);
}

/* 解消のときだけプルダウンの下に出す解消日時（旧ボタンの「解消 (日時)」の日時部分） */
.statusTime {
  margin-top: 2px;
  /* 11px では読みにくいので 12px（ユーザー指示 2026-10-06。D-162） */
  font-size: 12px;
  color: var(--tx-m);
  white-space: nowrap;
}

.statusColumn {
  flex-shrink: 0;
}

/* ★通常モードの備考（D-165）★ — 文字だけ（押しても何も起きない）。
   ★文字の長さで枠の大きさを変えない（D-162 / D-164）★ — `.scheduleLineNote` の中で「予定: HH:MM —」の
   残りの幅を全部取り、はみ出す分は「…」で切る。全文は `title`（hover）で読む */
.noteText {
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

.noteInput {
  display: block;
  width: 100%;
  margin-top: 4px;
  font-size: 12px;
  /* textarea は globals.css の font-family: inherit の対象外。指定しないと日本語がブラウザ既定フォントに落ちる */
  font-family: inherit;
  line-height: 1.5;
  padding: 5px 7px;
  color: var(--tx);
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 6px;
  /* ★大きさは固定（D-162 / D-165）★ — 2行ぶんの高さ・幅は列いっぱい。長い入力は中でスクロールし、つまみで広げさせない */
  box-sizing: border-box;
  height: calc(2 * 1.5em + 12px);
  overflow-y: auto;
  resize: none;
}

.noteInput:focus {
  outline: none;
  border-color: var(--ac);
}

.noteInput:disabled {
  opacity: 0.6;
  cursor: progress;
}

.rowError {
  margin-top: 6px;
  font-size: 11px;
  color: var(--ng);
}

/* ★`background` の一括指定にしないこと★ — `.statusSelect` の ▼（background-image）が消える。
   .statusBadge は背景画像を持たないので、background-color でも見た目は変わらない */
.statusResolved {
  background-color: var(--ok-d);
  color: var(--ok);
}

.statusInProgress {
  background-color: var(--wn-d);
  color: var(--wn);
}

.statusUnresolved {
  background-color: var(--ng-d);
  color: var(--ng);
}

.empty {
  padding: 24px 20px;
  font-size: 13px;
  color: var(--tx-m);
  text-align: center;
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 12px;
}

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

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