/*
 * エラー一覧（`/errors`。D-160 / 指示書AW 段階5-3）。
 * ★見た目は既存画面から借りる★: ツールバー・カードは `DetailLogScreen.module.css`、
 *   固定幅の表は `CleanLogTable.module.css`、状態の色分け・備考は `AlertsScreen.module.css`。
 * ★`font-family` を独自に宣言しないこと★ — 宣言すると和文フォントが落ちて漢字が中華字形になる（CLAUDE.md §0-3）。
 *   ボタン・select・textarea の `font-family: inherit` だけは書く（globals.css のスタックを継がせるため。既存画面と同じ）。
 * ★色は app/globals.css の CSS 変数だけを使う★（新しい色を作らない）。
 */
.page {
  min-width: 0;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  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;
}

.count {
  font-size: 13px;
  color: var(--tx-d);
  white-space: nowrap;
}

/* 見出しの右: 件数と編集モードのボタン（D-165） */
.headerRight {
  display: flex;
  align-items: center;
  gap: 8px;
}

/*
 * ★編集モードのボタン（ユーザー指示 2026-10-06。D-165）★
 * ★幅は固定★ — 「編集」/ "Edit"・「保存（12件）」/ "Save (12)"・「保存中…」・「キャンセル」/ "Cancel" で
 *   位置が動かないように（12px・太字。最も長い「保存（12件）」≒72px + 左右の padding 28px）。
 * 主ボタンの見た目は `SystemScreen.module.css` の .saveButton / .resetButton（もとは `DetailLogScreen` の .csvBtn）に揃える
 */
.editButton {
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.startButton {
  width: 88px;
  border: 1px solid var(--bd);
  background: transparent;
  color: var(--tx);
}

.saveButton {
  width: 120px;
  border: 1px solid transparent;
  background: var(--pr-d);
  color: var(--pr);
}

.cancelButton {
  width: 100px;
  border: 1px solid var(--bd);
  background: transparent;
  color: var(--tx-d);
}

.saveButton:disabled,
.cancelButton:disabled {
  cursor: progress;
}

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

/* ★`<fieldset>` で書いている★（編集中に中の絞り込みをまとめて無効にするため。D-165）。既定の枠・余白は消す */
.toolbar {
  margin: 0;
  min-width: 0;
  border: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bd);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

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

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

.select,
.searchInput {
  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;
}

/* ★入力欄は固定幅★（placeholder が JP/EN で変わっても幅が動かないように。指示書AW 4-17） */
.searchFacility {
  width: 140px;
}

.searchType {
  width: 140px;
}

.checkLabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--tx-d);
  cursor: pointer;
  white-space: nowrap;
}

/* 編集中（`.toolbar` の fieldset が disabled）は絞り込みを薄くして押せない見た目にする（D-165） */
.toolbar:disabled .dateInput,
.toolbar:disabled .select,
.toolbar:disabled .searchInput,
.toolbar:disabled .checkLabel {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 編集モードの案内（絞り込み・ページ送りが無効な理由）と、保存に失敗した件数（D-165） */
.editNotice {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 8px 20px;
  font-size: 12px;
  color: var(--tx-m);
  border-bottom: 1px solid var(--bd);
}

.editNoticeError {
  color: var(--ng);
  font-weight: 600;
}

/* ページ送りを包む `<fieldset>`（編集中に無効にするため。D-165）。既定の枠・余白は消す */
.pagerFieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
  border: 0;
}

.pagerFieldset:disabled {
  opacity: 0.5;
}

/* ★狭い画面では表だけを横スクロールさせる★（ページ全体を横にはみ出させない） */
.tableWrap {
  overflow-x: auto;
}

/*
 * ★列幅を固定する（`table-layout: fixed`）★ — JP/EN の切替で列幅や位置が動かないように
 * （`CleanLogTable.module.css` と同じ作法。2026-10-01 ユーザー指摘「言語切り替え時に表などの位置も動いてしまいます」）。
 *
 * ★施設名と種類の2列だけ幅を指定しない★（`<col>` に class なし）— 表の残りの幅を ★2列で等分★ する
 *   （ユーザー指示 2026-10-06「エラーの施設名を少し短くしてシリアルと種類をもう少し余裕を持って表示してください」
 *   「右がすごい空いてる」。D-166）。シリアルは広めの固定幅。
 *   ★却下した配分★: 備考が残りを受け持つ（広い画面で空の備考の列が右に大きく空いた）／
 *   施設名だけが残りを受け持つ（1500px 前後で施設名が 120px まで細り、店名が3行に折り返した）。
 * ほかの列は px で固定する。値は ★言語によらず同じ★。
 *
 * 幅の決め方: 「JP / EN の見出しの大きい方」と「セルの中身」の大きい方 + 余裕。
 *   見出しは 11px・太字・大文字化・字間 0.6px、左右の padding 12px ずつ（`.th`）を含む。★見出しは折り返さない★。
 *   - 検知時刻 120 : 見出し EN「DETECTED AT」≒113 / 中身「10/5 19:05」(13px) ≒70
 *   - 施設名（残りの半分。最小 150）: 長い名前（例「メガバリューマート港南総本店」）は列の中で折り返す
 *   - シリアル 160 : 見出し ≒66 / 中身「8111R5628060033」(13px・15文字) ≒134 + 余裕
 *   - 種類（残りの半分。最小 150）: 見出し EN「TYPE」≒57 / 中身は生値で長さが読めない（「D-S_CONTROL_FAILURE」≒150）。長い値は折り返す
 *   - レベル 90    : 見出し EN「LEVEL」≒63 / 中身「CRITICAL」≒86
 *   - 紐づく予定 150 : 見出し EN「SCHEDULE」≒92 / 中身「事前チェック（30分前）」は2行に折り返す
 *   - 対応状況 150 : 見出し EN「STATUS」≒76 / 中身は通常モードがバッジ（"In progress" ≒100）、編集モードがプルダウン
 *                   （下の `.statusSelect`。列幅いっぱいの固定幅。"In progress" ＋ ▼ ≒110）。★どちらも収まる幅★（D-165）
 *   - 備考 160     : 見出し EN「NOTE」≒57 / 中身は通常モードが1行（「…」で切る）、編集モードが2行の入力欄
 *
 * ★表の最小幅 = 施設名・種類の最小幅 + 固定列の合計★（`min-width` の calc）= 150 × 2 + 830 = 1130px。
 * これより狭い画面では、包んでいる `.tableWrap`（`overflow-x: auto`）が横スクロールになる。
 */
.table {
  --col-detected: 120px;
  --col-facility-min: 150px;
  --col-serial: 160px;
  --col-type-min: 150px;
  --col-level: 90px;
  --col-schedule: 150px;
  --col-status: 150px;
  --col-note: 160px;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: calc(
    var(--col-facility-min) + var(--col-detected) + var(--col-serial) + var(--col-type-min) +
      var(--col-level) + var(--col-schedule) + var(--col-status) + var(--col-note)
  );
}

.colDetected {
  width: var(--col-detected);
}

.colSerial {
  width: var(--col-serial);
}

.colLevel {
  width: var(--col-level);
}

.colSchedule {
  width: var(--col-schedule);
}

.colStatus {
  width: var(--col-status);
}

.colNote {
  width: var(--col-note);
}

.th {
  padding: 10px 12px;
  font-size: 11px;
  color: var(--tx-m);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 1px solid var(--bd);
  white-space: nowrap;
  font-weight: 600;
  text-align: left;
}

.row {
  border-bottom: 1px solid var(--bd);
}

/* ★編集モードで変えた行の目印（D-165）★ — 背景を薄く色付けし、行の左端に色の帯を出す。
   帯は box-shadow で描く（border を足すと固定幅の列がずれる） */
.rowChanged {
  background: var(--sf-h);
}

.rowChanged > td:first-child {
  box-shadow: inset 3px 0 0 var(--ac);
}

/* ★固定レイアウトでは列が中身に合わせて広がらない★ので、長い値は列の中で折り返す（隣の列に重ねない） */
.td {
  padding: 12px;
  font-size: 13px;
  color: var(--tx);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.tdMuted {
  color: var(--tx-d);
}

.tdNowrap {
  white-space: nowrap;
}

/*
 * ★対応状況のプルダウン（ユーザー指示 2026-10-06。D-161）★
 * 色分けは `.statusResolved` 等を重ねて付ける（`AlertsScreen.module.css` の .statusBadge と同じ配色）。
 * ★幅は列いっぱいの固定幅★（「対応中」と "In progress" で幅が変わらないように。指示書AW 4-17）。
 * ブラウザ既定の見た目は外し、▼ を自前で描く（`currentColor` なので状態の文字色に揃う）。
 */
.statusSelect {
  display: block;
  width: 100%;
  font-size: 12px;
  /* 右の padding は ▼ のぶん */
  padding: 4px 24px 4px 8px;
  border-radius: 6px;
  font-weight: 600;
  font-family: inherit;
  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);
}

/* ★通常モードの対応状況（表示だけ。D-165）★ — `AlertsScreen.module.css` の .statusBadge と同じ形 */
.statusBadge {
  display: inline-block;
  font-size: 12px;
  padding: 4px 14px;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
}

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

/* ★`background` の一括指定にしないこと★ — `.statusSelect` の ▼（background-image）が消える */
.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);
}

/* ★備考の表示（通常モード。D-165）★ — 文字だけで、押しても何も起きない。
   ★文字の長さで枠の大きさを変えない（ユーザー指示 2026-10-06。D-162 / D-164）★ —
   幅は列いっぱい・高さは1行ぶん（line-height × 1 + 上下の枠）に固定する。列幅（`--col-note`）からはみ出す分は
   「…」で切り、全文は `title`（hover）で読む。空のときは枠だけ（文字は出さない） */
.noteText {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  line-height: 1.5;
  min-height: calc(1.5em + 2px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 枠は透明で確保しておく（もとの備考ボタンと同じ位置に文字を置く） */
  border: 1px solid transparent;
  padding: 0 4px;
}

.noteInput {
  display: block;
  width: 100%;
  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;
}

/* 保存に失敗した行（その行の直後の <tr>） */
.rowError {
  padding: 4px 12px 10px;
  font-size: 11px;
  color: var(--ng);
  border-bottom: 1px solid var(--bd);
}

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

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

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