/* 清掃レポート（report.html）・忘れ物管理（lost-items.html）・
   立替申告管理（expenses.html）の3画面で共有するスタイル。
   tokens.css → base.css の後に読む。

   3画面とも「検索条件バー＋集計バー＋1行1件の表」という同じ作りなので、
   画面ごとにCSSを分けず1枚にまとめてある（片方だけ直して見た目がずれるのを防ぐ）。
   骨組み（.head-in / main / .summary / footer）の寸法は staff-admin.css と同じ。 */


/* この画面の横幅。骨格（header/main/footer の余白）は base.css。 */
:root{--page-max:1400px;}


.head-in{max-width:var(--page-max); margin:0 auto; padding:18px 24px 0;
         display:flex; align-items:center; gap:10px; flex-wrap:wrap;}


/* 画面名。h1（20px）より一回り小さく、頭の1文字だけ赤くする。
   base.css に置くと dashboard/vendor の h1 まで縮むので各画面に持つ
   （理由は base.css の .head-in h1 のコメント）。 */
.head-in h1{font-size:19px; margin:0; letter-spacing:.02em;}


.head-in h1::first-letter{color:var(--red);}


/* 右端に操作をまとめる。最初の1つだけ左マージンを自動にして押しやる */
.head-in .spacer{margin-left:auto;}


/* 3画面を行き来するリンク。いま開いている画面は押せない見た目にする */
.btn-nav{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:6px 14px; border-radius:99px; font-size:12.5px; font-weight:700;
  text-decoration:none; white-space:nowrap;
}


.btn-nav:hover{border-color:var(--red); color:var(--red);}


.btn-nav.on{background:var(--red); border-color:var(--red); color:#fff; pointer-events:none;}


header{padding-bottom:14px;}


main{max-width:var(--page-max); margin:0 auto; padding:20px 24px;}


.summary{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:12px 16px; background:var(--red-tint);
  border:1px solid var(--red-line); border-radius:8px; margin-bottom:16px;
}


.summary .big{font-size:24px; font-weight:800; color:var(--red); line-height:1;}


.summary .lbl{color:var(--muted); font-size:13px;}


.summary .sep{width:1px; height:16px; background:var(--red-line);}


/* 件数クリックで該当行へ飛ぶところ（vendor.html・house.html と同じ操作） */
.summary .clickable{cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px;}


.summary .clickable:hover{color:var(--red-dark);}


/* 「要確認」の件数。summary バー自体がもともと赤系の地色なので、他の数字と
   同じ「赤文字」のままだと埋もれて目立たない。実際にフロントの判断が
   要る唯一の数字なので、塗りつぶしたバッジにして他と区別する
   （表の中の .rp-badge.alarm と同じ「要対応」の見た目にそろえてある）。 */
.rp-summary-alarm{
  display:inline-flex; align-items:center; gap:4px;
  background:var(--red); color:#fff; font-weight:800; font-size:14px;
  padding:4px 12px; border-radius:99px; cursor:pointer; line-height:1.3;
}


.rp-summary-alarm:hover{background:var(--red-dark);}


/* ────────────────────────────────────────────────
   検索条件バー（lib/searchbar.js）
   ──────────────────────────────────────────────── */

#searchbar{
  display:flex; gap:8px 14px; align-items:center; flex-wrap:wrap;
  padding:10px 14px; margin-bottom:14px;
  border:1px solid var(--line); border-radius:8px; background:#fafafa;
}


/* 折り返しを許す。期間の組（ボタン4つ＋日付2つ）は横に長いので、
   狭い画面で折り返せないとページ全体が横にはみ出す。 */
.sb-group{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}


.sb-label{color:var(--muted); font-size:12px; font-weight:700; white-space:nowrap;}


.sb-preset{
  border:1px solid var(--line); background:#fff; color:var(--muted);
  padding:4px 10px; border-radius:99px; font-size:12px; font-family:inherit;
  cursor:pointer; white-space:nowrap;
}


.sb-preset:hover{border-color:var(--red); color:var(--red);}


.sb-preset.on{background:var(--red); border-color:var(--red); color:#fff; font-weight:700;}


.sb-date, .sb-select, .sb-text{
  border:1px solid var(--line); border-radius:6px; background-color:#fff;
  padding:5px 8px; font-size:13px; font-family:inherit; color:var(--ink);
}


.sb-select{max-width:200px; padding-right:28px;}


.sb-select.sb-wide{max-width:260px;}


.sb-select:disabled{background:#f2f2f2; color:var(--muted); cursor:not-allowed;}


.sb-text{min-width:200px;}


.sb-tilde{color:var(--muted); font-size:12px;}


.sb-clear{
  margin-left:auto; border:1px solid var(--line); background:#fff; color:var(--muted);
  padding:5px 12px; border-radius:99px; font-size:12px; font-family:inherit; cursor:pointer;
}


.sb-clear:hover{border-color:var(--red); color:var(--red);}


/* ────────────────────────────────────────────────
   検索できるプルダウンの、検索条件バーの中での幅

   見た目そのものは css/combobox.css（`.prop-search` 系。追加対応依頼の
   施設検索と同じ部品）。ここに置くのは、条件バーは横に並べる場所なので
   幅を決め打ちにする、というこの場所だけの調整。
   ──────────────────────────────────────────────── */

#searchbar .prop-search-wrap{flex:none; width:200px; min-width:0;}


#searchbar .prop-search-wrap.sb-wide{width:260px;}


/* 予約1件に絞り込んでいるとき（清掃レポートの忘れ物・立替バッジから来た場合） */
.sb-pin{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--red-tint); border:1px solid var(--red-line); color:var(--red-dark);
  padding:3px 6px 3px 10px; border-radius:99px; font-size:12px; font-weight:700;
}


.sb-unpin{
  border:none; background:none; color:var(--red-dark);
  font-size:14px; line-height:1; cursor:pointer; padding:0 4px;
}


/* 期間が2日以上のときの注意書き（Beds24を見ないので未着手が出ない） */
.rp-note{
  color:var(--muted); font-size:12px; margin:-6px 0 12px 2px;
}
/* 件数が多すぎて一部が出ていないかもしれないときの注意書き（2026-09-24）。
 * 「未着手が出ない」より重い話（記録そのものが欠けうる）なので目立たせる。 */
.rp-note-warn{
  color:var(--red); font-weight:700;
}


/* ────────────────────────────────────────────────
   表
   ──────────────────────────────────────────────── */

/* 枠（.rp-wrap）の高さは画面に収め、枠の中で縦にも横にもスクロールさせる
   （見出しの行の sticky を効かせるため。docs/REVIEW-2026-09-27.md 5章の別件、
   シフト表の M08 と同じ直し方）。以前は overflow-x だけで高さを決めていな
   かったので、枠が sticky の基準なのに縦にはスクロールせず、ページを下げると
   見出しが一緒に流れて消えた。横スクロールバーも表の一番下にあった。
   --rp-top は枠の上端のページ内の位置（lib/listfit.js の fitListTable が描く
   たびに実測して入れる）。-16px は下の余白。
   下限は「画面の高さの6割」と 320px の大きいほう。スマホ幅では条件バーが
   何段にも折り返して枠の上端が画面の7割近くまで下がる（幅375で556px）ので、
   上端だけで決めると表が2〜3行ぶんの窓になる。そのときはページを少し下げれば
   表が画面の6割を使えるようにする（シフト確認は下限 320px のみ）。
   dvh はスマホのアドレスバーの出し入れに追従する単位で、使えない古いブラウザは
   1行目の vh を使う。
   **ページ全体（body）を固定する作りにはしない**（REVIEW 5章の「採らない直し方」）。 */
.rp-wrap{
  overflow:auto; border:1px solid var(--line); border-radius:10px; background:#fff;
  max-height:max(320px, 60vh, calc(100vh - var(--rp-top, 240px) - 16px));
  max-height:max(320px, 60dvh, calc(100dvh - var(--rp-top, 240px) - 16px));
}


/* ── 表の中の文字の大きさは2段だけ（2026-09-06 ユーザー指示）──
 *
 * 清掃レポート・忘れ物管理・追加対応管理・費用管理の4画面は、この1枚の
 * CSSで同じ表を描いている。**4画面そろって同じ規則になるよう、表の中に
 * 出る文字は次の2つの大きさしか使わない。**
 *
 *   13px（= .rp-table の既定）… 行の中身。セルの文字・ボタン・
 *                               プルダウン・メモ・バッジ・施設コード。
 *                               「読む・押す」ものはすべてこれ。
 *   11.5px                     … 項目名。見出し行（th）と、
 *                               展開した明細のラベル（.rp-detail-label）。
 *
 * 以前は 11px・11.5px・12.5px・13px が混ざっていて、同じ行の中で
 * ボタンだけ小さい、施設コードだけさらに小さい、という状態だった。
 * 部品ごとに「ボタンだから少し小さく」と個別に決めていった結果で、
 * 1行を横に読むと文字の大きさが何度も変わる（2026-09-06 ユーザー指摘）。
 *
 * **新しい部品を足すときも、この2つ以外の font-size を書かないこと。**
 * 小さくしたくなったら、大きさではなく色（var(--muted)）で控えめにする。
 *
 * 例外は「文字ではないもの」だけ：開閉の矢印（extramodal.css の
 * .ex-row-chev、10px）は記号なのでこの規則の外。 */
.rp-table{width:100%; border-collapse:collapse; font-size:13px;}


.rp-table th{
  text-align:left; font-size:11.5px; color:var(--muted); font-weight:700;
  padding:9px 10px; border-bottom:1px solid var(--line); background:#f6f6f7;
  white-space:nowrap; position:sticky; top:0; z-index:1;
  /* 表は border-collapse:collapse なので、下線は表の側が描く。止まった見出しの
     下では下線が行と一緒に流れて消えるので、見出し自身にも線を描いておく。 */
  box-shadow:inset 0 -1px 0 var(--line);
}


.rp-table th.sortable{cursor:pointer; user-select:none;}


.rp-table th.sortable:hover{color:var(--red);}


.rp-table th .arrow{color:var(--red); margin-left:3px;}


.rp-table td{
  padding:8px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle;
}


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


.rp-table tbody tr:hover{background:#fcfcfc;}


.rp-table td.num{text-align:right; font-variant-numeric:tabular-nums;}


.rp-table td.nowrap, .rp-table th.nowrap{white-space:nowrap;}


/* 「内容」など自由記述が入る列。中身は既定で1行に丸めて出し、押すと
   全文を開く（lib/report.js の contentCellHtml。中の .ex-row-text は
   extramodal.css で定義、3画面（忘れ物管理・費用管理・追加対応管理）で
   共有。追加対応管理の「詳細」も同じ方式・同じ幅）。min-width を決めて
   おかないと、表の他の列が nowrap で場所を取ったときにこの列だけ際限なく
   狭められ、日本語が1文字ずつ改行される不具合があった（2026-08-22
   ユーザー指摘。幅で折り返す方式を先に試したが同じ理由で崩れたため、
   1行に丸めて展開する方式に変えた）。max-width は「依頼内容が広すぎる・
   詳細が狭すぎる」との指摘で 320px → 280px に揃え（2026-08-23）、さらに
   「依頼内容・詳細・内容・忘れ物・立替、どれも幅が大きすぎる」との指摘で
   280px → 160px に縮めた（2026-09-02。3画面共有のこの1行を直すだけで
   5列すべてに効く）。 */
.rp-table td.rp-exwide{max-width:160px; min-width:110px;}


/* **押して全文を開くと列の幅が変わってしまう不具合の修正**
   （2026-09-01 ユーザー指摘：追加対応管理の「詳細」）。
 *
 * 原因：この表は table-layout:auto（既定）で、列の幅は「その列の中で
 * 一番幅を欲しがっているセル」を見て決まる。閉じているとき
 * （.ex-row-body が white-space:nowrap）は、1行に丸めた文章の
 * “折り返さなかったときの幅”が列の欲しがる幅になり、max-width の
 * 280px で頭打ちになる。ところが開くと（.ex-row-body が
 * white-space:pre-wrap）文章はどんな幅にでも折り返せるようになるので、
 * このセルは急に幅を“欲しがらなく”なる。他の行が同じ列で長い文章を
 * 閉じたまま持っていなければ、列はその瞬間 min-width の 200px まで
 * 縮み、テーブル全体の幅が変わって見えていた。
 *
 * 直し方：.ex-row-text（ボタン自体）に幅100%ではなく**具体的な px**を
 * 指定する。100%だと「TDの幅に合わせる」という循環参照になり開閉で
 * 結果が変わるが、固定pxなら開いていても閉じていても列がこのボタンに
 * 求める幅は常に同じになる。240px は .rp-exwide の max-width(280px) から
 * 左右のセル余白(10px×2)を引いた236pxに近い値（表の他の列の余白と
 * そろえるための微調整）。
 *
 * **.ex-row-text は vendor.html の追加対応タブ（カード内、表の外）でも
 * 使う共有クラスなので、ここでは `.rp-table` の中だけに絞って効かせる。**
 * vendor.html 側にまで固定幅を強制すると、そちらのカードの横幅に
 * 合わせて伸びていた文章欄が壊れる。
 *
 * 120px は .rp-exwide の max-width(160px) から左右のセル余白(10px×2)を
 * 引いた値（2026-09-02、160px化にあわせて 240px から縮小）。 */
.rp-table td.rp-exwide .ex-row-text{width:120px;}


/* nowrap の列（対応費用など）に添える小さいメモ。何もしないと親の
   white-space:nowrap をそのまま受け継いでしまい、長いメモが折り返せず
   列が伸びる（上と同じ不具合）。ここだけ折り返しに戻す。 */
.rp-table td.nowrap .rp-subnote{
  white-space:normal; overflow-wrap:anywhere; word-break:break-word;
  max-width:180px; margin-top:2px;
}


.rp-table td.empty{color:var(--muted); text-align:center; padding:40px 10px;}


/* 追加対応のバッジ（extramodal.css の .ex-badge、10px）は、ダッシュボード・
   手配先・戸建ての**部屋チップの中の飾り**として作られたもの。費用管理の
   「種別」列（立替／対応費用）のように**表の1列の中身**として使うときは、
   表の規則どおり13pxにそろえる（上の .rp-table のコメント）。
   チップ側は今までどおり10pxのまま（あちらは report.css を読まないうえ、
   ここは .rp-table の中だけに絞ってある）。 */
.rp-table .ex-badge{font-size:13px;}


/* 施設コード。base.css の .prop-name .code と同じ見た目。
   大きさだけは表の規則（13px。上の .rp-table のコメント）に合わせてある。
   ダッシュボードの部屋チップ側は今までどおり小さいままだが、あちらは
   チップの中の飾りで、こちらは表の1列（施設）の中身なので役割が違う。 */
.rp-code{
  color:var(--red); font-family:var(--font-mono);
  font-size:13px; font-weight:700; border:1px solid var(--red-line);
  background:var(--red-tint); padding:1px 5px; border-radius:4px; margin-right:6px;
}


/* クリックでその条件に絞り込むところ（施設・部屋・清掃員） */
.rp-drill{cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px;}


.rp-drill:hover{color:var(--red);}


.rp-muted{color:var(--muted);}


/* ── 清掃状況 ──
   クラス名は1語にする。`.done` のような別クラスを足すと、他の画面の
   ボタン（.room .done）と取り合って丸いドットが潰れる（docs/spec/screen-report.md 参照）。 */
.rp-status{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}


.rp-dot{width:8px; height:8px; border-radius:50%; background:#d8d8d8; flex:none;}


.rp-dot-doing{background:#e8890c;}


.rp-dot-done{background:#059669;}


.rp-status-done{color:#059669; font-weight:700;}


.rp-status-doing{color:#e8890c; font-weight:700;}


.rp-status-todo{color:var(--muted);}


/* ── 複数部屋の追加対応（案件）の行（2026-09-07、ユーザー指示）──
   1つの依頼を部屋ごとの行で出すが、**部屋どうしの間には横線を引かない**
   （引くと、1つの案件がばらばらの依頼に見える）。案件に1つの項目
   （対応日・施設・依頼内容・対応者・返事・対応費用・作成日時・メモ・編集）は
   rowspan で縦にまとめてあるので、線を消しても列がずれることはない。
   案件の最後の行（.ex-grp-last）にだけ、次の案件との区切り線を残す。

   **`[rowspan]` のセルは線を消さない。** 縦にまたがったセルは案件の最下端まで
   伸びているので、そこが案件の下端の線そのものになる。ここも一緒に消すと、
   案件の一番下の部屋の行だけ「部屋・対応状況・写真・詳細・立替」の5列しか
   線が引かれず、**表の横線が途中で切れて見えた**（2026-09-07、ユーザー報告。
   実例：心斎橋北 801 の下）。 */
.rp-table tr.ex-grp:not(.ex-grp-last) > td:not([rowspan]){border-bottom:none;}


/* ── 追加対応の「返事」（対応可能／対応不可／返事待ち。2026-09-06）──
   上の清掃状況と同じドット＋文字で出す（extras/view.js の acceptHtml）。
   色つきバッジを並べていたが、1行にバッジが2つ並んで表が読みにくかった。

   対応不可だけ赤なのは、対応者を振り直す必要があって放置できないため。
   返事待ちは異常ではないので急かす色にしない（薄い灰色のまま）。
   完了と同じ緑を使い回さずクラスを分けてあるのは、「対応可能（返事）」と
   「完了（進捗）」は別の軸で、片方の色だけ変えたくなることがあるため。

   **太字にはしない**（2026-09-06、ユーザー指摘で外した）。上の清掃状況
   （.rp-status-done/doing）は太字にしているが、あちらは表の主役（清掃が
   終わったか）。返事はこの表では脇の情報なので、色と点だけで気づければ
   十分。同じ行内で「対応日」「施設」など他の列は太字ではないので、
   ここだけ太字にすると隣の文字と字形の太さが違って見え、
   フォントそのものが違って見えていた。 */
.rp-dot-ans-ok{background:#059669;}


.rp-dot-ans-no{background:#dc2626;}


.rp-ans-ok{color:#059669;}


.rp-ans-no{color:#dc2626;}


.rp-ans-wait{color:var(--muted);}


/* 追加対応の「未配信」（施設も対応者も指定していない依頼。M05）。
   返事の欄に、返事と同じドット＋文字で出す（extras/view.js の acceptHtml）。
   誰の画面にも出ていないので、対応不可と同じく手当てが要る＝赤。
   太字にしないのも返事と同じ理由。 */
.rp-dot-unsent{background:#dc2626;}


.rp-unsent{color:#dc2626;}


/* ── 写真・忘れ物・立替のボタン／バッジ ── */
/* line-height を明示しているのは、これが常に <button> だから。
   ブラウザは既定で <button> の line-height を "normal" にリセットし、
   隣に並ぶ <span>（.rp-badge など、line-height:1.4）を継承しない。
   そのため同じ padding・同じ文字サイズでも、隣り合う .rp-badge より
   1px前後低く見える不一致があった（2026-09-06 ユーザー指摘。
   base.css の .btn-refresh で以前直したのと同じ理由）。 */
.rp-btn{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:3px 9px; border-radius:99px; font-size:13px; font-family:inherit;
  line-height:1.4; cursor:pointer; white-space:nowrap;
}


.rp-btn:hover{border-color:var(--red); color:var(--red);}


.rp-btn.zero{color:var(--muted); border-style:dashed;}


/* 同じセルの中に、ボタンとバッジ（.rp-btn ＋ .rp-badge など）を並べる
   ときの入れ物（費用管理の「精算済みにする ＋ 未精算」）。

   ただ隣に置くと2つの問題が起きる。
   1. 何も付けないとHTMLの改行が空白1つに潰れて3〜4pxしか空かない
      （2026-09-06、追加対応管理の「返事を取消」で同じ問題があった）。
   2. ボタンとバッジは padding が違う（3px 9px と 2px 9px）ので、
      文字だけ真ん中に揃えても外枠の高さがずれ、1px前後の縦ズレが
      残る（2026-09-06 ユーザー指摘）。

   align-items:center の flex にすると、中身の padding や line-height の
   細かい違いに関係なく、常に縦の中心で揃う。個別に margin や line-height を
   計算して合わせるより頑丈。 */
.rp-cell-row{display:inline-flex; align-items:center; gap:8px;}


/* .rp-badge は <span>（クリックでジャンプ）と <button>（振込先の
   ポップアップを開く）の両方で使う。font-family を明示しないと
   <button> のときだけ既定のUIフォントになってしまうため書いておく
   （2026-08-13 に .btn-refresh で起きた line-height の不一致と同じ理由）。 */
.rp-badge{
  display:inline-block; border-radius:99px; padding:2px 9px;
  font-size:13px; font-weight:700; white-space:nowrap; line-height:1.4;
  border:1px solid var(--red-line); background:var(--red-tint); color:var(--red-dark);
  cursor:pointer; font-family:inherit;
}


.rp-badge:hover{background:var(--red); color:#fff;}


/* 期限が来ているもの（保管3ヶ月超の忘れ物）。ここだけ塗りつぶして目立たせる */
.rp-badge.alarm{background:var(--red); border-color:var(--red); color:#fff;}


/* ── 展開した明細 ── */
.rp-detail td{background:#fbfbfc; padding:12px 14px;}


.rp-detail-sec{margin-bottom:10px;}


.rp-detail-sec:last-child{margin-bottom:0;}


/* 明細の中の項目名。見出し行（th）と同じ「項目名」の側なので 11.5px
   （表の文字の大きさの規則は上の .rp-table のコメント）。 */
.rp-detail-label{
  font-size:11.5px; font-weight:700; color:var(--muted); margin-bottom:4px;
}


.rp-detail-line{margin-bottom:3px;}


.rp-detail-line .amt{font-variant-numeric:tabular-nums; font-weight:700; margin-left:8px;}


/* ── 写真のサムネ ──
   一覧に何十件も並ぶので loading="lazy" で画面に入った分だけ読む。
   1件あたり300KB前後（imagecompress.js）なので、まとめて読むと重い。 */
.rp-thumb{
  width:52px; height:52px; object-fit:cover; border-radius:6px;
  border:1px solid var(--line); cursor:pointer; display:block; background:#f4f4f5;
}


.rp-thumb:hover{border-color:var(--red);}


/* ── 対応状況の入力 ── */
.rp-sel{
  border:1px solid var(--line); border-radius:6px; background-color:#fff;
  padding:4px 6px; font-size:13px; font-family:inherit; color:var(--ink);
}


/* 表の中のセルなので矢印（base.css の共通ルール）は控えめに。 */
select.rp-sel{background-size:9px 9px; background-position:right 5px center; padding-right:18px;}


.rp-sel.warn{border-color:var(--red); color:var(--red-dark); font-weight:700;}


/* メモ欄（表の中）。クリックすると lib/popover.js が広い入力欄を
   ポップアップで出す。ここは中身を1行に省略して見せるだけの見た目。

   幅は中身の長さに関わらず固定にする（2026-08-14）。width:100% だと表の
   セル幅（＝中身の長さ）に引きずられて行ごとに枠の大きさが変わり、
   メモ列がガタついて読みにくかった。 */
.rp-note-btn{
  display:block; width:180px; box-sizing:border-box;
  border:1px solid var(--line); border-radius:6px; background:#fff;
  padding:4px 8px; font-size:13px; font-family:inherit; color:var(--ink);
  text-align:left; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}


.rp-note-btn:hover{border-color:var(--red);}


/* ────────────────────────────────────────────────
   浮きポップアップ（lib/popover.js）
   メモの拡大編集・振込先の表示に使う。表（.rp-wrap）の横スクロールに
   クリップされないよう body 直下に出す。

   position は absolute（ページの中での座標）。fixed（画面に貼り付け）だと
   スクロールしたときにポップアップだけ画面に残り、開いた行から離れて
   いってしまうため（2026-08-14 修正）。座標は lib/popover.js が
   window.scrollX/Y を足して入れる。
   ──────────────────────────────────────────────── */

.popover{
  position:absolute; z-index:100; background:#fff; border:1px solid var(--line);
  border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.18);
  padding:10px 12px; box-sizing:border-box;
  max-height:min(70vh, 420px); overflow-y:auto;
}


.note-pop-input{
  display:block; width:100%; box-sizing:border-box; min-height:110px;
  border:1px solid var(--line); border-radius:6px; background:#fff;
  padding:8px 10px; font-size:13px; font-family:inherit; color:var(--ink);
  resize:vertical; line-height:1.5;
}


/* 「＋ 忘れ物を追加」ボタンの行。ヘッダーではなく画面の中に置く
   （2026-08-31 ユーザー指示。ヘッダーは画面間の行き来・更新のためのもの、
   という位置づけに揃える）。

   置き場所は**件数バーの下・表の上、左寄せ**。ダッシュボード・戸建て・
   手配先の「＋ 追加対応依頼」（extramodal.css の .add-req-row）と
   同じ場所・同じ考え方にそろえてある。検索条件バーと件数バーの間に
   右寄せで挟んでいた形は、「絞り込む → 件数を見る」とつながっている2つの
   間に関係の無いボタンが1行入り、右端に1つだけ浮いて見えた
   （2026-09-01 ユーザー指摘）。 */
.li-add-bar{margin-bottom:16px;}


/* 見た目は「＋ 追加対応依頼」（extramodal.css の .btn-add-req）と同じ形・
   同じ寸法で、色だけ赤にしたもの。同じ場所に置く同じ性質のボタン（そこから
   新しく1件作る）なので形をそろえ、色で対象の違いを出す（オレンジの破線は
   このアプリでは追加対応を指す）。破線はどちらも「ここから新しく作る」の合図。

   「最新情報に更新」と同じ .btn-refresh を使っていたが、更新（今あるものを
   取り直す）と追加（新しく作る）は別の操作なので、見た目でも分ける。 */
.btn-add-lost{
  border:1.5px dashed var(--red); background:#fff; color:var(--red);
  border-radius:8px; padding:8px 14px;
  font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
}


.btn-add-lost:hover{background:var(--red-tint);}


/* ────────────────────────────────────────────────
   忘れ物を手動で追加するモーダル（lostitems/addmodal.js）

   このファイル（report.css）は忘れ物管理・追加対応管理・費用管理・
   清掃レポートの4画面で共有しているが、`.modal`/`.modal-back` の箱の実体
   （position:fixed のオーバーレイ・白い箱・角丸・影）は dashboard.css・
   vendor.css・house.css がそれぞれ自前で持っていて、この4画面はどれも
   読み込んでいない（lib/photomodal.js の `.modal.photo-modal` だけは
   base.css に2クラスで完結する形で定義済みなので動く）。同じ流儀を
   踏まず新しいクラス名にしたのは、将来どこかの画面が `.modal`/`.modal-back`
   を自前定義したときに詳細度で衝突しないようにするため。 */
.li-add-back{
  position:fixed; inset:0; background:rgba(0,0,0,.5); display:none;
  align-items:center; justify-content:center; z-index:200; padding:20px;
}


/* ── 追加対応依頼のモーダルの箱（2026-09-06）──

   追加対応管理（extras.html）からも依頼を作れる・直せるようにした
   （lib/extramodal.js）。あのモーダルの中身の見た目は extramodal.css が
   持っているが、**入れ物（オーバーレイ・白い箱・本文・ボタン行）は
   `.modal-back` / `.modal` / `.modal-body` / `.modal-foot` という汎用の
   クラス名で、その実体は dashboard.css・vendor.css・house.css が
   それぞれ自前で持っている**（すぐ上の .li-add-back のコメント参照）。
   この4画面はどれも読んでいないので、そのままでは position:fixed が
   効かず、モーダルが表の下に伸びて出てしまう（実際にそうなった）。

   ここに置くのは `#extraBack`（このモーダルの入れ物だけ）に絞った形。
   汎用の `.modal-back` として足すと、この4画面が読む base.css の
   写真モーダル（`.modal-back.photo-modal-back`）と噛み合わせを考える
   必要が出るし、将来この4画面が別のモーダルを持ったときにも巻き込む。

   値はダッシュボード（dashboard.css）に合わせてある＝同じモーダルが
   どの画面でも同じ見え方になる。**display だけは `#extraBack.on` の形で
   書くこと。** base.css の `.modal-back.on{display:flex}` はクラス2つで、
   ID1つのこちらのほうが強い。`#extraBack{display:none}` だけ書くと
   開いても出てこない。
   幅は書かない（extramodal.css の `.modal.extra-modal{max-width:520px}`
   に任せる。ここに書くとIDの強さで上書きしてしまう）。 */
#extraBack{
  position:fixed; inset:0; background:rgba(0,0,0,.35); display:none;
  align-items:flex-start; justify-content:center; z-index:100; overflow-y:auto;
  padding:40px 20px;
}


#extraBack.on{display:flex;}


#extraBack .modal{
  background:#fff; border-radius:12px; width:100%;
  box-shadow:0 12px 40px rgba(0,0,0,.2); overflow:hidden;
}


#extraBack .modal-body{padding:20px 22px 24px;}


#extraBack .modal-foot{
  padding:14px 22px; border-top:1px solid var(--line); display:flex; gap:10px;
  justify-content:flex-end; background:#fafafa;
}


.li-add-back.on{display:flex;}


.li-add-modal{
  background:#fff; border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.25);
  overflow:hidden; width:100%; max-width:460px; max-height:92vh;
  display:flex; flex-direction:column;
}


.li-add-head{
  background:var(--red); color:#fff; padding:14px 22px;
  display:flex; align-items:center; gap:12px; flex:none;
}


.li-add-head h2{margin:0; font-size:16px; font-weight:800;}


.li-add-head .close{
  margin-left:auto; background:none; border:none; color:#fff; font-size:22px;
  cursor:pointer; line-height:1; padding:2px 8px;
}


.li-add-body{padding:18px 22px; overflow-y:auto;}


.li-add-row{margin-bottom:16px;}


.li-add-row label{display:block; font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:6px;}


.li-add-row input[type="text"], .li-add-row input[type="date"],
.li-add-row select, .li-add-row textarea{
  width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:6px;
  background:#fff; padding:8px 10px; font-size:13px; font-family:inherit; color:var(--ink);
}


.li-add-row textarea{min-height:80px; resize:vertical;}


.li-add-row input[disabled], .li-add-row select[disabled]{background:#f6f6f7; color:var(--muted);}


.li-add-photo-preview{
  display:block; max-width:100%; max-height:160px; margin-top:8px;
  border:1px solid var(--line); border-radius:6px;
}


.li-add-foot{
  padding:14px 22px; border-top:1px solid var(--line); background:#fafafa;
  display:flex; justify-content:flex-end; gap:8px; flex:none;
}


/* 写真の圧縮中（「写真を準備中…」）・送信中（「追加中…」）は押せないことが
   見て分かるようにする（2026-09-27 の点検 C16）。 */
.li-add-foot .btn:disabled{opacity:.6; cursor:default;}


.note-pop-input:focus{outline:none; border-color:var(--red);}


/* 振込先のポップアップ（立替申告管理）。メモと同じく全項目をテキストで
   出す（title のホバーだと選択・コピーができないため）。開いた時点で
   全部クリップボードに入っているが、口座番号だけ欲しいときのために
   文字はそのまま選択できるようにしてある。 */
.bank-pop-title{
  display:flex; align-items:baseline; gap:8px;
  font-size:12px; font-weight:700; color:var(--muted); margin-bottom:6px;
}


.bank-pop-note{font-size:11px; font-weight:700; color:#059669;}


.bank-pop-text{
  display:block; width:100%; box-sizing:border-box;
  border:1px solid var(--line); border-radius:6px; background:#fff;
  padding:8px 10px; font-size:13px; font-family:inherit; color:var(--ink);
  line-height:1.6; resize:vertical; user-select:text;
}


.bank-pop-text:focus{outline:none; border-color:var(--red);}


.bank-pop-copy{
  margin-top:8px; border:1px solid var(--line); background:#fff; color:var(--muted);
  padding:4px 12px; border-radius:99px; font-size:11.5px; font-family:inherit;
  cursor:pointer; white-space:nowrap;
}


.bank-pop-copy:hover{border-color:var(--red); color:var(--red);}


/* ── タブ（忘れ物・立替の状況切り替え） ── */
.rp-tabs{display:flex; gap:4px; margin-bottom:-1px;}


.rp-tabs .tab.alarm .n{background:var(--red); color:#fff;}


/* ────────────────────────────────────────────────
   読み込み中の置き場（docs/REVIEW-2026-09-27.md の M02）

   タブ・検索条件バーは、ログインの確認とマスタの取得が済んでから JS が
   描く。それまで空のままだと高さ0（バーは枠だけ）で描かれ、あとから
   入った分だけ「＋ 追加」ボタンや表が約130px押し下げられていた。押そうと
   した瞬間にボタンが逃げるので、**完成時の高さを先に取っておく。**

   - タブ：HTML に見えない仮のタブ（.tab-ph）を1つ置く。本物と同じ
     .tab なので、高さは文字の大きさを変えても自動で合う。
   - 検索条件バー：中身が空のあいだだけ（:empty）、完成時の高さを min-height
     で取る。高さは出す条件の数と画面幅で決まる（折り返す段数）ので、
     忘れ物管理・追加対応管理で実測した値を幅ごとに置く（2026-09-27。
     清掃レポートは 869〜955px だけ1段低い）。費用管理は「種別」のぶん
     早く折り返すので .sb-kind で別に持つ。縦のスクロールバーのぶん
     境目は十数px前後するが、取っておかないより小さい。条件バーの中身を
     変えて段数が変わったらここも直すこと。操作ログは条件が少ないので
     operationlog.css で別に持つ。
   ──────────────────────────────────────────────── */

.rp-tabs .tab-ph{visibility:hidden; pointer-events:none;}


#searchbar:empty{min-height:90px;}


@media (max-width:955px){ #searchbar:empty{min-height:126px;} }


@media (max-width:760px){ #searchbar:empty{min-height:163px;} }


@media (max-width:536px){ #searchbar:empty{min-height:199px;} }


@media (max-width:444px){ #searchbar:empty{min-height:230px;} }


@media (max-width:1112px){ #searchbar.sb-kind:empty{min-height:126px;} }


@media (max-width:868px){ #searchbar.sb-kind:empty{min-height:163px;} }


@media (max-width:692px){ #searchbar.sb-kind:empty{min-height:199px;} }


@media (max-width:444px){ #searchbar.sb-kind:empty{min-height:266px;} }


/* 写真モーダル（清掃写真・忘れ物・立替のレシート共通。lib/photomodal.js）の
   スタイルは base.css に移した（2026-08-18）。フロントダッシュボードも同じ
   モジュールを使うようになり、report.css を読まない画面では枠が効かず
   写真がはみ出していたため。この3画面の見た目は移動前と変わらない。 */


/* ────────────────────────────────────────────────
   狭い画面
   ──────────────────────────────────────────────── */

@media (max-width:760px){
  .head-in{padding:14px 14px 0; gap:8px;}
  main{padding:14px;}
  footer{padding:0 14px 30px;}
  .sb-clear{margin-left:0;}
  .sb-select, .sb-select.sb-wide{max-width:150px;}
  .sb-text{min-width:130px; max-width:100%;}
  /* 日付は2つ並べても1行に収まる幅まで縮める */
  .sb-date{min-width:0; flex:1 1 130px; max-width:150px;}
  /* コンボも同じ幅まで縮める。候補の一覧は入力欄より広く出さないと
     施設名（長いものは20字を超える）が読めないので、画面幅いっぱいまで許す。 */
  #searchbar .prop-search-wrap,
  #searchbar .prop-search-wrap.sb-wide{width:150px;}
  #searchbar .prop-search-results{right:auto; min-width:100%; width:max-content; max-width:calc(100vw - 40px);}
  /* 表は縮めずに横スクロールで読ませる（列を落とすと確認漏れになる） */
  .rp-table{min-width:980px;}
}


/* ── 忘れ物の写真の欄（2026-09-26）──
   先頭の1枚＋枚数、その横に「＋写真」。フロントがあとから写真を足せる。 */
.li-photo-cell{display:flex; align-items:center; gap:8px;}
.li-photo-thumb{position:relative; display:inline-block;}
.li-photo-n{
  position:absolute; right:-6px; bottom:-6px; cursor:pointer;
  background:var(--ink); color:#fff; border-radius:9px; padding:1px 6px;
  font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums;
}
.li-photo-add{
  border:1px dashed var(--line); border-radius:6px; background:#fff; color:var(--muted);
  font-family:inherit; font-size:12px; padding:4px 8px; cursor:pointer; white-space:nowrap;
}
.li-photo-add:hover:not(:disabled){border-color:var(--red); color:var(--red);}
.li-photo-add:disabled{cursor:progress;}