.page {
  min-width: 0;
}

/* モックはタイトルと検索欄を左右に振り分けている（d-watch-mock.jsx の robot 画面） */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

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

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

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

/* 10列あるため、狭い画面では表だけを横スクロールさせる（ページ全体は横に伸ばさない） */
.tableWrap {
  overflow-x: auto;
}

/* ★`min-width: 1300px` を増やさないこと★（親の幅 1154px（縦スクロールバーが出ると約 1139px）を既に超えて横スクロールが出ている。
   下の .col* の合計 1300px（住所列 170px を含む）で収めてある。★min-width = 全列の幅の合計★を保つこと） */
.table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1300px;
  /* ★列幅を言語によらず固定する★（2026-10-01 ユーザー指摘「言語切り替え時に表などの位置も動く」）。
     既定の auto は見出しの文字で列幅が決まるため、JP/EN を切り替えると列ごとに最大29px 動いていた。
     幅は TSX の <colgroup> に付けた .col* で決める */
  table-layout: fixed;
}

/*
 * ---- 列幅（★JP と EN の見出しの広い方を下回らないこと★）----
 * 見出しは 11px・太字・字間0.6px・左右余白 計24px・折り返し禁止（.th）。
 * 幅は余白込みの列幅。測定値は 2026-10-01 監督の実測（画面幅1440px・auto 時の列幅 JP/EN）。
 * ★住所列にも幅を付け、表の余った幅は全列に幅の比で配る★（ユーザー指示 2026-10-06
 * 「3つとも同じように調整して」。D-167 追記。旧: 住所列だけ幅を付けず余りを全部受け持っていたため、
 * 広い画面では住所列だけが大きく広がっていた）。全列に幅があると table-layout: fixed は
 * 余りを各列の幅の比で配る。
 * 見出しの訳語を変えたら、ここの幅も見直すこと（lib/i18n.ts）。
 */

/* 施設名 / FACILITY（実測 237/215）。見出しは EN の約88px。
   中身は施設名で長いもの（例: 25文字）は2行に折り返す。よくある12文字前後は1行に収まる幅 */
.colName {
  width: 190px;
}

/* 都道府県 / PREFECTURE（実測 83/105）。EN 見出し約105px が最大。中身「神奈川県」は約72px */
.colPrefecture {
  width: 108px;
}

/* 住所 / ADDRESS（D-167 追記）。旧来の最小時の幅（1300 - 他の列 1130 = 170px）をそのまま付けたので
   min-width は変わらない。長い住所は .tdMuted で列の中で折り返す */
.colAddress {
  width: 170px;
}

/* 電話番号 / PHONE（実測 125/114）。中身が折り返し禁止（.tdPhone）なので中身で決める。
   「0120-000-0000」級の13文字で約116px */
.colPhone {
  width: 120px;
}

/* 責任者名 / MANAGER（実測 81/87）・担当者名 / CONTACT（実測 81/83）の共用。
   EN 見出し MANAGER 約87px が最大。氏名は空白で折り返せる */
.colPerson {
  width: 92px;
}

/* メール / EMAIL（実測 58/63）。実データは現状ほぼ空（"-"）だが、アドレスが入ると
   20文字で約132px あるため、見出しより広めに取り .tdEmail で途中改行させる */
.colEmail {
  width: 120px;
}

/* 監視 / MONITOR（実測 54/83）。EN 見出し約83px が最大。中身は ○ / ー のみ */
.colMonitor {
  width: 88px;
}

/* D-SEC（実測 71/64。JP/EN とも同じ文字列）。中身は ○ / ー のみ */
.colDsec {
  width: 72px;
}

/* ロボット（メーカー / 機種 / シリアル）/ ROBOT (MAKER / MODEL / SERIAL)（実測 236/238）。
   見出しが最も長い列。EN 約238px を下回らないよう余裕を持たせる。
   中身（メーカー・機種・シリアル）は約210px。「未対応」バッジが付くと超えるので .robotRow で折り返す */
.colRobots {
  width: 248px;
}

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

.thCenter {
  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: center;
}

/* ロボットを複数台持つ施設では行が高くなる。上揃えにしないと
   1台目のピルと施設名が縦にずれる */
.row {
  border-bottom: 1px solid color-mix(in srgb, var(--bd) 13%, transparent);
  vertical-align: top;
}

.td {
  padding: 12px;
  font-size: 13px;
  color: var(--tx);
  overflow-wrap: anywhere;
}

/* 列幅を固定したので、長い英数字（空白の無い文字列）がセルからはみ出さないよう
   どこでも折り返せるようにする（.tdName / .tdMuted / .td / .tdEmail） */
.tdName {
  padding: 12px;
  font-size: 13px;
  color: var(--tx);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tdMuted {
  padding: 12px;
  font-size: 12px;
  color: var(--tx-d);
  overflow-wrap: anywhere;
}

.tdPhone {
  padding: 12px;
  font-size: 12px;
  color: var(--tx-d);
  white-space: nowrap;
}

.tdEmail {
  padding: 12px;
  font-size: 11px;
  font-family: var(--font-geist-mono), ui-monospace, monospace;
  color: var(--tx-d);
  overflow-wrap: anywhere;
}

.tdMark {
  padding: 12px;
  text-align: center;
  font-size: 16px;
}

.markOn {
  color: var(--ok);
}

/* D-Sec は監視（緑）と区別するためアクセント色（シアン） */
.markOnSec {
  color: var(--ac);
}

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

.tdRobots {
  padding: 12px;
}

/* 列幅を固定したので、「未対応」バッジ付きで1行に収まらない場合はシリアルを次の行へ送る
   （折り返さないと隣の列の外＝表の右端へはみ出す） */
.robotRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

/* 1台1行。2台目以降だけ間隔を空ける（最終行に余白を残さない） */
.robotRow + .robotRow {
  margin-top: 6px;
}

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

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

/*
 * ★旧フッタ（`全{n}施設`）は components/ui/Pagination に置き換えた（指示書AA 段階5）★
 *   件数表示の文言と `.footer` のスタイルは Pagination.module.css 側にある。
 */

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