/*
 * エラー一覧（`/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;
}

/* ★「紐づく予定」の絞り込み（指示書BH §4）。EN の "Schedule: All" が収まる幅★ */
.scheduleFilterSelect {
  width: 160px;
  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）。
   ★子要素ごと（`> *`）に薄くする★ — fieldset 自体に opacity をかけると、カードの区切り線（`.toolbar` の border-bottom）まで薄くなるため。
   「～」「指定なし（全期間）」も含めて全部薄くする（アラート・D-Sec と同じ見た目。D-181） */
.toolbar:disabled > * {
  opacity: 0.5;
}

/* 中の部品すべてを禁止カーソルにする（`.dateInput` / `.checkLabel` の `cursor: pointer` より詳細度が高い。アラート・D-Sec と同じ） */
.toolbar:disabled * {
  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;
}

/* 編集中はページ送りの部品すべてを押せない見た目にする（`AlertsScreen.module.css` / `DsAlertsScreen.module.css` と同じ）。
   ★`button` を足して詳細度を上げる★ — `.pagerFieldset:disabled *` だけだと
   `Pagination.module.css` の `.step:disabled { cursor: default }` と詳細度が同じで、CSS の読み込み順で勝ち負けが変わるため */
.pagerFieldset:disabled button,
.pagerFieldset:disabled * {
  cursor: not-allowed;
}

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

/*
 * ★列幅を固定する（`table-layout: fixed`）★ — JP/EN の切替で列幅や位置が動かないように
 * （`CleanLogTable.module.css` と同じ作法。2026-10-01 ユーザー指摘「言語切り替え時に表などの位置も動いてしまいます」）。
 *
 * ★9列★（2026-10-27 ユーザー指示で、種類の2行目だったエラー内容を「詳細」の列として備考の左に出す。指示書BE §12）。
 * ★詳細の列だけ幅を指定しない★（`<col>` に class なし）— 表の残りの幅を受け持ち、広い画面ほど詳細が広がる。
 * ★施設名は表の幅の 9%・種類は 12%★ — 広い画面では少し広がる（D-166 の「右が空く」「施設名が細る」を避ける）。
 *   ★却下した配分★: 施設名・種類・詳細の3列で等分（狭い画面で詳細が 133px しか取れない）／
 *   詳細を 200px 固定にして施設名・種類で等分（広い画面で種類の列だけが空いて広がる）／
 *   D-166 以前の、備考が残りを受け持つ・施設名だけが残りを受け持つ配分。
 * ほかの列は px で固定する。値は ★言語によらず同じ★。
 *
 * 幅の決め方: 「JP / EN の見出しの大きい方」と「セルの中身」の大きい方 + 余裕。
 *   見出しは 11px・太字・大文字化・字間 0.6px、左右の padding 12px ずつ（`.th`）を含む。★見出しは折り返さない★。
 *   並べ替える見出しは SortableTh（左右 6px＋間隔 3px＋印 9px）。
 *   文字の幅は 2026-10-27 にブラウザ（canvas の measureText。globals.css のフォントスタック）で測った値。
 *   - 検知時刻 120 : 見出し EN「DETECTED AT」≒113 / 中身「10/5 19:05」(13px) ≒70
 *   - 施設名 9%（表が最小幅のとき ≒102）: 見出し EN「FACILITY」≒75 / 長い店名は列の中で折り返す
 *   - シリアル 140 : 見出し ≒66 / 中身「8111R5628060033」(13px・15文字) ≒111 + padding 24 = 135（旧 160 は 134 + 余裕の見積もり）
 *   - 種類 12%（表が最小幅のとき ≒136。1440px で ≒137）: 見出し EN「TYPE」≒53 / 中身は生値で長さが読めない（「D-S_CONTROL_FAILURE」≒149）。
 *     ★長い値は「_」の後ろで折り返す★（画面が `<wbr>` を入れる。「D-S_CONTROL_」「FAILURE」の2行）。
 *     ★2026-10-27 ユーザー指示「詳細を少し縮めて、種類を長くして」★（9% では「D-」「S_CONTROL_FAILU」「RE」の3行に割れていた）
 *   - レベル 90    : 見出し EN「LEVEL」≒63 / 中身「CRITICAL」≒86
 *   - 紐づく予定 110 : 見出し EN「SCHEDULE」≒87 / 中身「事前チェック」≒62・「（30分前）」≒69 の2行に折り返す（旧 150）
 *   - 対応状況 150 : 見出し EN「STATUS」≒76 / 中身はバッジ・プルダウンとも 120px 固定（下の `.statusBadge` / `.statusSelect`。D-181）＋ 左右の padding 24
 *                   （"In progress" ＋ ▼ ≒110 が収まる）。★列の幅（150）は変えない★（D-165）
 *   - 詳細（残り。表が最小幅のとき 60 以上。1440px で ≒67）: 見出し EN「DETAILS」≒72 / 中身はエラー内容（日英）。★長い文字は折り返す（「…」で切らない）★
 *   - 備考 223     : 見出し EN「NOTE」≒55 / 中身は通常モードが1行（「…」で切る）、編集モードが2行の入力欄（旧 160 → 120 → 180 → 238 → 247 → 223）
 *     ★2026-10-27 ユーザー指示★ ①「もう少し備考欄を大きくして、詳細欄との空白を埋めて」で備考 120 → 180・詳細の最小 196 → 136
 *     ②「詳細の長さは今の6割くらいに」で、1440px での詳細 ≒144 → ≒86 にし、空いた分を備考へ（180 → 238）
 *     ③「もう10％縮めて」で、1440px での詳細 ≒86 → ≒77、備考 238 → 247
 *     ④「詳細を少し縮めて、種類を長くして」で、種類 9% → 12%（1440px で ≒103 → ≒137）・詳細 ≒77 → ≒67・備考 247 → 223（固定列の合計 857 → 833）
 *
 * ★表の最小幅 = (固定列の合計 + 詳細の最小幅) ÷ (1 − 施設名と種類の割合の合計)★（`min-width` の calc）
 *   = (833 + 60) ÷ (1 − 0.21) = 893 ÷ 0.79 ≒ 1130px（旧 1132・1129・1130px。D-180 項10 の「1440×900 で横スクロールが出ない」を保つ。
 *   そのときの表の入れ物は縦スクロールバーありで ≒1139px）。★割合（9% / 12%）を変えたら 0.79 も直すこと★。
 *   表が最小幅のとき: 施設名 ≒101.7px・種類 ≒135.6px・詳細 ≒60px。
 * これより狭い画面では、包んでいる `.tableWrap`（`overflow-x: auto`）が横スクロールになる。
 */
.table {
  --col-detected: 120px;
  --col-facility: 9%;
  --col-serial: 140px;
  --col-type: 12%;
  --col-level: 90px;
  --col-schedule: 110px;
  --col-status: 150px;
  --col-detail-min: 60px;
  --col-note: 223px;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: calc(
    (
        var(--col-detected) + var(--col-serial) + var(--col-level) + var(--col-schedule) +
          var(--col-status) + var(--col-note) + var(--col-detail-min)
      ) / 0.79
  );
}

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

.colFacility {
  width: var(--col-facility);
}

.colType {
  width: var(--col-type);
}

.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 と同じ配色）。
 * ★幅は 120px 固定★（「対応中」と "In progress" で幅が変わらないように。バッジと同じ幅。アラート・D-Sec と同じ。D-181）。
 * ブラウザ既定の見た目は外し、▼ を自前で描く（`currentColor` なので状態の文字色に揃う）。
 */
.statusSelect {
  display: block;
  width: 120px;
  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）★ — ★編集モードのプルダウン（.statusSelect）と同じ 120px・同じ高さ★（モードを切り替えても形が変わらない。アラート・D-Sec と同じ。D-181） */
.statusBadge {
  display: block;
  box-sizing: border-box;
  width: 120px;
  padding: 4px 8px;
  border: 1px solid transparent;
  text-align: center;
  font-size: 12px;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
}

/* 解消のときだけバッジ・プルダウンの下に出す解消日時。★左寄せ（3画面とも。D-181）★ */
.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);
}

/* その他（note_required）で備考が空のあいだは警告色（指示書BE §6）。フォーカス中も維持する */
.noteInputRequired,
.noteInputRequired:focus {
  border-color: var(--ng);
}

/* 「詳細」の列（エラー内容。指示書BE §3 / §12）。★長い文字は折り返す（「…」で切らない）★ —
   日本語は自然に折り返し、英語や識別子のような長い綴りは `overflow-wrap: anywhere` で列の中で切る（隣の列に重ねない） */
.errorContentText {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 「-」（選べない行）・「未選択」・「不明(id)」は薄い色 */
.errorContentMuted {
  color: var(--tx-m);
}

/* 編集モードのボタン。★列幅いっぱい・左寄せ・文字は折り返す★（高さは中身に合わせて伸びる） */
.errorContentButton {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 3px 8px;
  font-size: 12px;
  color: var(--tx-d);
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 6px;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.errorContentButton:hover {
  border-color: var(--ac);
}

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

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

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