.page {
  min-width: 0;
}

/* モックはタイトルと検索欄を1行に並べる（d-watch-mock.jsx:1040）。
   他画面と違い、この画面にはサブタイトルもStatCardも無い */
.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: 180px;
}

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

.tableWrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  /* 全列の幅の合計 = シリアル 160 + 施設名 190 + 曜日 112 + 時間 150 + 有効 88 */
  min-width: 700px;
  /* ★列幅を言語によらず固定する★（2026-10-01 ユーザー指摘「言語切り替え時に表などの位置も動く」）。
     既定の auto は見出しの文字で列幅が決まるため、JP/EN を切り替えると列ごとに幅が動く。
     幅は TSX の <colgroup> に付けた .col* で決める */
  table-layout: fixed;
}

/*
 * ---- 列幅（★JP と EN の見出しの広い方を下回らないこと★）----
 * 見出しは 11px・太字・字間0.6px・左右余白 計24px・折り返し禁止（.th）。幅は余白込みの列幅。
 * ★施設名列にも幅を付け、表の余った幅は全列に幅の比で配る★（ユーザー指示 2026-10-06
 * 「3つとも同じように調整して」。D-167 追記）。旧: 施設名列だけ幅を付けず、余りを全部受け持っていた
 * （最小時 700 - 510 = 190px。広い画面では施設名列だけが大きく空いていた）。
 * ★列を広げたら min-width も同じだけ広げること★（横スクロールの境目がずれるため）。
 * 見出しの訳語を変えたら、ここの幅も見直すこと（lib/i18n.ts）。
 */

/* 施設名 / FACILITY（D-167 追記）。旧来の最小幅 190px をそのまま使う（min-width は 700px のまま）。
   長い施設名は .td の overflow-wrap で列の中で折り返す */
.colFacility {
  width: 190px;
}

/* シリアル / SERIAL（見出し 約70px / 約71px）。中身は等幅12px で15桁（例 8111R5628060011）約132px */
.colSerial {
  width: 160px;
}

/* 曜日 / DAYS（見出し 約47px / 約55px）。中身はサーバー生成のラベルで、
   最長は曜日6つの連結（例「月火水木金土」）約102px */
.colDays {
  width: 112px;
}

/* 時間 / TIME（見出し 約47px / 約55px）。中身は「02:00 - 翌04:30」で約126px */
.colTime {
  width: 150px;
}

/* 有効 / ACTIVE（見出し 約47px / 約71px）。中身は ● / ○ のみ */
.colActive {
  width: 88px;
}

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

.row {
  border-bottom: 1px solid color-mix(in srgb, var(--bd) 13%, transparent);
}

/* 無効スケジュールは行全体を薄くする（モック: opacity: s.on ? 1 : 0.5）。
   `.row` と併用する（AlertsScreen の statusBadge + statusResolved と同じ足し方）。
   行を消さないのは、登録済みの台帳として「無効な状態で存在すること」を
   見せる画面だから（lib/schedules/query.ts の filterSchedules も active で絞らない） */
.rowInactive {
  opacity: 0.5;
}

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

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

/* 「有効」列。●/○ を大きめに出すのでフォントサイズはモック準拠（18px） */
.tdActive {
  padding: 12px;
  text-align: center;
  font-size: 18px;
  line-height: 1;
}

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

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