/*
 * D-Security アラート（`/ds-alerts`）。
 * ★編集モードの見た目はエラー一覧（`ErrorsScreen.module.css`）から写す★（指示書AX 段階5-2。新しい共通部品は作らない）。
 * ★`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;
  /* エラー一覧・アラートと同じ16px。★直す前もマージンの相殺で16px だった★（.header 4px と .subtitle 16px は足し算にならない。D-181） */
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

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

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

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

/*
 * ★編集モードのボタン★（`ErrorsScreen.module.css` の .editButton 等と同じ）。
 * ★幅は固定★ — 「編集」/ "Edit"・「保存（12件）」/ "Save (12)"・「保存中…」・「キャンセル」/ "Cancel" で
 *   位置が動かないように。
 */
.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;
}

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

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

.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（ホバー）で読む */
.masterSelect {
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/* 編集中（`.toolbar` の fieldset が disabled）は絞り込み全体を薄くする（アラートと同じ。D-181） */
.toolbar:disabled {
  opacity: 0.5;
}

/* ★select だけは薄さを戻す★ — Chromium の UA スタイルが `select:disabled` に opacity 0.7 を付けるため、
   fieldset の 0.5 と掛け算になって 0.35 まで薄くなる（input / textarea / button には UA の opacity は無い。D-181） */
.toolbar:disabled select {
  opacity: 1;
}

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

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

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

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

.pagerFieldset:disabled {
  opacity: 0.5;
}

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

/* ★編集モードで変えたカードの目印★（背景は `ErrorsScreen.module.css` の .rowChanged と同じ色。アラートも同じ形。D-181）。
   左の枠は種別の色（inline style）なので、背景と残りの枠で示す */
.itemCardChanged {
  background: var(--sf-h);
  border-top-color: var(--ac);
  border-right-color: var(--ac);
  border-bottom-color: var(--ac);
}

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

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

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

.noteLine {
  font-size: 12px;
  color: var(--tx-m);
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--sf-h);
  border-radius: 6px;
  border-left: 2px solid var(--bd);
  overflow-wrap: anywhere;
}

/*
 * カード右の対応状況（通常モードはバッジ、編集モードはプルダウン。解消のときは下に解消日時）。
 * ★両モードで幅 120px 固定★ — 切り替えで左の本文の幅が変わり、文字の折り返しが動かないように（アラート画面と同じ。D-181）。
 * ★備考の入力欄はここに出さない★（左の本文の `.noteInput`。指示書BA 項4）
 */
.statusColumn {
  flex-shrink: 0;
  width: 120px;
}

/*
 * ★対応状況のプルダウン★（`ErrorsScreen.module.css` の .statusSelect と同じ）。
 * 色分けは `.statusResolved` 等を重ねて付ける。★幅は 120px 固定★（バッジと同じ。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);
}

/* ★通常モードの対応状況（表示だけ。押しても何も起きない）★ — ★編集モードのプルダウンと同じ 120px・同じ高さ★（`AlertsScreen.module.css` の .statusBadge ＋ .statusBadgeFixed と同じ。D-181。旧: min-width 110px・右寄せ — 指示書AZ 4b） */
.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 {
  margin-top: 2px;
  font-size: 12px;
  color: var(--tx-m);
  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);
}

.noteInput {
  display: block;
  width: 100%;
  /* 通常モードの備考の行（.noteLine）と同じ位置から始める */
  margin-top: 6px;
  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;
  /* ★大きさは固定★ — 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: 8px;
  font-size: 11px;
  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;
}