/* 清掃面積（指示書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;
}
/* ★列幅は言語によらず固定する★（2026-10-01 ユーザー指摘「言語切り替え時に表などの位置も動いてしまいます」）。
既定（table-layout: auto）は見出しの文字幅で列幅が決まり、JP/EN の切替で列幅が
最大 44px 変わっていた。★`table-layout: fixed` + `<colgroup>` の幅で固定する★。
★名前の列にも 240px の幅を付け、表の余った幅は全列に幅の比で配る★（ユーザー指示 2026-10-06
「清掃面積の表も同じように調整して」。D-167 追記。旧: 名前の列だけ幅を指定せず余りを全部受け持っていた）。
幅（セルの左右 padding 20px×2 を含む）は、切替前の実測（画面幅1440px・表の幅1151px）の
★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);
}
