/* 清掃面積（指示書AN 段階5）。
   ★モックに対応する画面が無い★ため、レイアウトは既存画面
   （ReportsScreen.module.css / RescueRequiredCard.module.css / DetailLogScreen.module.css）
   の寸法・色づかいをそのまま踏襲している（★同じアプリの中で見た目の流儀を増やさない★）。
   色は app/globals.css の CSS変数（`[data-theme]` で切り替わる）を参照し、JS 側で色を持たない。
   ★★`font-family` をここで宣言しないこと★★ — 宣言すると body のフォントスタック
   （欧文 ＋ 日本語フォントの明示）が効かなくなり、日本語が中国語フォントに
   フォールバックして漢字が中華字形になる（CLAUDE.md §0-3）。 */

.page {
  min-width: 0;
}

/* ---- ヘッダ ---- */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

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

/* ---- 絞り込み（draft → 検索ボタンで確定） ---- */

.toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}

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

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

.dateInput {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--bd);
  background: var(--sf-h);
  color: var(--tx);
  /* 枠全体を押せる（onClick で showPicker。D-162）と分かるように */
  cursor: pointer;
}

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

.searchBtn {
  font-size: 12px;
  color: #fff;
  background: var(--pr);
  border: none;
  border-radius: 6px;
  padding: 6px 16px;
  cursor: pointer;
}

/* ---- 数値カード ---- */

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 16px 20px;
  min-width: 0;
}

.cardLabel {
  font-size: 12px;
  color: var(--tx-d);
  margin-bottom: 6px;
}

.cardValue {
  font-size: 24px;
  font-weight: 700;
  color: var(--tx);
  line-height: 1.2;
  /* 3桁区切りでも桁が多いので、狭い幅では折り返させる（横スクロールを出さない） */
  overflow-wrap: anywhere;
}

/* 単位は数値より小さく添える（`AREA_UNIT` の文字列そのものは lib/config が持つ） */
.cardUnit {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx-d);
  margin-left: 3px;
}

/* ★「直近2年ぶん」の注記★（指示書AN §2-2 / 落とし穴10）。
   消さないこと — 3年目に数字が減ったときの問い合わせを防ぐための一文。 */
.note {
  font-size: 11px;
  color: var(--tx-m);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* ---- 内訳 ---- */

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

.breakdownHeader {
  padding: 12px 20px;
  border-bottom: 1px solid var(--bd);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* 粒度タブ。レポート画面の週次/月次トグル（.periodToggle）と同じ見た目に揃える */
.scopeTabs {
  display: flex;
  background: var(--sf-h);
  border-radius: 6px;
  border: 1px solid var(--bd);
  overflow: hidden;
}

.scopeTab {
  font-size: 12px;
  padding: 6px 16px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--tx-d);
  font-weight: 400;
}

.scopeTabActive {
  background: var(--pr);
  color: #fff;
  font-weight: 600;
}

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

/* 表は横に伸びうるので、はみ出しはこの器の中だけで起こす */
.tableWrap {
  overflow-x: auto;
}

/* ★粒度を切り替えて取り直している間の表★ — 前の行を薄く残す（画面全体を入れ替えるとスクロールが飛ぶ。指示書BC 2-4） */
.tableLoading {
  opacity: 0.5;
}

/* ★列幅は言語によらず固定する★（2026-10-01 ユーザー指摘「言語切り替え時に表などの位置も動いてしまいます」）。
   既定（table-layout: auto）は見出しの文字幅で列幅が決まり、JP/EN の切替で列幅が
   最大 44px 変わっていた。★`table-layout: fixed` + `<colgroup>` の幅で固定する★。
   ★名前の列にも 240px の幅を付け、表の余った幅は全列に幅の比で配る★（ユーザー指示 2026-10-06
   「清掃面積の表も同じように調整して」。D-167 追記。旧: 名前の列だけ幅を指定せず余りを全部受け持っていた）。
   幅（セルの左右 padding 20px×2 を含む）は、切替前の実測（画面幅1440px・表の幅1151px。縦スクロールバーが出ると約 1139px）の
   ★JP と EN の大きいほう★に揃えた:
     - 清掃面積 / 清掃対象面積 208px … 実測 JP 164/206・EN 208/184。値「1,234,567,890㎡」13px でも ≒97px
     - 完了率   184px … 実測 JP 142・EN 184（Completion）
     - 清掃実施回数 208px … 実測 JP 206・EN 169。値「12,345,678」≒65px
   計 808px（＋名前 240px）。★列を広げたら min-width も同じだけ広げること★（横スクロールの境目がずれるため）。 */
.table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  /* 全列の幅の合計 = 名前 240px + 固定列 808px（名前は見出し「ホールディングス」≒88px + padding 40px が入る） */
  min-width: 1048px;
}

/* 名前の列（D-167 追記）。長い名前は `.tdName` で列の中で折り返す */
.colName {
  width: 240px;
}

.colArea {
  width: 208px;
}

.colRate {
  width: 184px;
}

.colCount {
  width: 208px;
}

.table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-m);
  text-align: left;
  padding: 10px 20px;
  border-bottom: 1px solid var(--bd);
  white-space: nowrap;
  /* 万一収まらない見出しは隣の列に重ねず「…」で切る（列幅は上で固定済み） */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ★`.table th`（詳細度 0,1,1）より強くするため `.table` を前に付ける★ — 単独の `.thNum`（0,1,0）だと
   `.table th` の `text-align: left` に負け、数値（右寄せ）と見出し（左寄せ）の位置がずれていた
   （ユーザー指摘 2026-10-06「項目と数値の場所がズレています」。D-168） */
.table .thNum {
  text-align: right;
}

.table .thName {
  text-align: left;
}

.table td {
  padding: 10px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--bd) 35%, transparent);
  vertical-align: top;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* 列幅は固定（table-layout: fixed では td の min-width は効かない。最低幅は .table の min-width が持つ）。
   長い名前は列の中で折り返す（区切りの無い英数字の連続でも、隣の列にはみ出さない） */
.tdName {
  overflow-wrap: anywhere;
}

.rowName {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
}

/* 所属（施設なら屋号、屋号ならホールディングス） */
.rowParent {
  font-size: 11px;
  color: var(--tx-m);
  margin-top: 2px;
}

.tdNum {
  font-size: 13px;
  color: var(--tx);
  text-align: right;
  white-space: nowrap;
}

/* ---- 「もっと表示（あと{n}件）」／「閉じる」 ---- */

.footer {
  padding: 10px 20px;
  border-top: 1px solid var(--bd);
  text-align: center;
}

.linkBtn {
  font-size: 12px;
  color: var(--pr);
  background: none;
  border: none;
  cursor: pointer;
}

/* ---- 3段（読み込み中 / エラー / 0件） ---- */

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

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

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