/* dashboard.html と vendor.html で完全に同じスタイル。
   ここを直すと両方の画面に反映される。

   同じ名前でも中身が違うもの（.modal の幅、main の余白など）は
   共通化すると見た目が変わるので、各ページの CSS に置いてある */


*{box-sizing:border-box;}


/* すべての <select> の矢印。OSの既定アイコンは枠のふちギリギリに出て
   左側の余白と釣り合わず、バランスが悪く見えるとの指摘（2026-08-30）。
   appearance:none で既定アイコンを消し、余白を取った位置に矢印を描き直す。

   各画面の select はほぼ全て `background:#fff`（ショートハンド）と
   `padding`（4辺まとめて）を個別に上書きしている。ショートハンドの
   background はここで指定した background-image を消してしまい、
   padding も右側の矢印ぶんの余白を潰してしまうため、それぞれの上書き先
   （staff-admin.css の .ym-pick select / .sa-field select、shifts.css の
   .ym select、report.css の .sb-select / .rp-sel、house.css の .asg、
   staff.css の .rc-expense-form select / .s-prop、facility.css の
   .fk-room-input）でも、background は background-color に、padding は
   右側だけ広げる形に直してある。extramodal.css の .ex-select は
   background を上書きしていないのでそのままで矢印が出る。 */
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:var(--select-arrow);
  background-repeat:no-repeat;
  background-position:right 9px center;
  background-size:11px 11px;
  padding-right:28px;
}


/* タブ切り替えなどでコンテンツ量が変わると縦スクロールバーが出たり消えたりして、
   中央寄せ（margin:0 auto）のヘッダー・本文が左右にずれる。ガターを常に確保して
   幅を安定させる（Windows のクラシックスクロールバー環境向け）。 */
html{scrollbar-gutter:stable;}


body{
  margin:0; background:#fff; color:var(--ink);
  font-family:var(--font-sans);
  font-size:14px; line-height:1.7;
  /* 数字を等幅にする。部屋番号・件数・日付が縦に揃って読み違えにくくなる */
  font-variant-numeric:tabular-nums;
}



/* ── ページの骨格（header / main / footer の幅を揃える） ──
 *
 * 2026-08-31 まで、この3つの max-width と余白を8つの画面 css が
 * それぞれ書いていた。値は同じで幅だけが違ったので、幅は tokens.css の
 * --page-max（画面側で1行だけ上書き）に寄せ、残りをここへ集めた。
 * ヘッダーと本文の左端がずれる不具合は、この3つが揃っていないと出る。 */
.head-in{
  max-width:var(--page-max); margin:0 auto; padding:18px 24px 0;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}

/* **`.head-in h1` はここに置かない。**
 *
 * 下位の画面（施設管理・シフト確認・清掃レポート等）は 19px ＋ 頭の1文字だけ
 * 赤、という共通の見た目を5つの css に同じ内容で持っている。まとめたくなるが、
 * ここへ移すと dashboard.html と vendor.html の h1 まで 19px に縮む
 * （この2画面は h1{20px} をそのまま使っていて、`.head-in h1` を持たない）。
 * 実際に 2026-08-31 の整理でいったん移して、ダッシュボードと手配先画面の
 * 見出しが1px小さくなる変更を出してしまったので戻した。
 *
 * まとめるなら HTML 側にクラス（例: <h1 class="sub-title">）を足して、
 * 「入口の2画面」と「下位の画面」を名前で区別してからにすること。 */


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


footer{max-width:var(--page-max); margin:0 auto; padding:0 24px 40px; color:var(--muted); font-size:12px;}


/* ── ヘッダー ── */
header{border-bottom:3px solid var(--red);}


h1{margin:0; font-size:20px; font-weight:800; letter-spacing:.02em;}


h1 .mark{color:var(--red);}



/* flex-wrap:wrap は狭い画面での既存の不具合修正（2026-08-13）。
   このボタン列は元々折り返しを許していなかったため、幅の狭い端末では
   画面の右端からボタンがはみ出していた（.head-in 側は元から flex-wrap:wrap
   だったが、.refresh-wrap 自身が1つの flex アイテムとして中身を折り返さず
   突っ張っていたのが原因）。dashboard.html・vendor.html・staff-admin.html が
   共通で使う（house.html だけ同じ形の .head-right を house.css に別途持つ）。

   #userbar（右上の「ユーザー名」）は、このコンテナの**最後の子要素として
   置くこと**。兄弟要素として外に置くと、.head-in が折り返したときに
   #userbar だけ単独で新しい行に落ち、その行の左端（既定の flex-start）に
   来てしまう（2026-08-18に発覚）。だからといって #userbar 自身にも
   margin-left:auto を足すと、今度は折り返していない通常時に auto
   マージンが2つになり、空きスペースが分け合われてボタン列と #userbar の
   間に不要な隙間ができてしまう（同日、これも発覚）。最後の子要素として
   中に入れておけば、このコンテナの margin-left:auto ひとつだけで
   全体が一つの塊として右寄せされ、折り返すときも中身ごと一緒に動く。 */
.refresh-wrap{margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}


/* 「最終更新 N分前」は30秒ごとに書き換わり、文言の長さが「たった今」
   「5分前」「3時間12分前」と変わる。幅なりにしておくと、狭いウインドウでは
   その数十pxの差でヘッダーが1段と2段を行き来し、ページ全体が48px上下に
   動いて押そうとした場所がずれていた（2026-09-27 点検 M01）。
   **いちばん長い形（最終更新 NN時間NN分前・赤の太字）の幅を先に取っておく。**
   短いときは右に寄せて、今までどおり隣のボタンのすぐ左に文字が来るようにする。
   親（.refresh-wrap / house.css の .head-right）はどちらも flex なので、
   span のままでも min-width が効く。使っているのは dashboard・vendor・house の
   3画面で、どれもこの base.css を読む。 */
.updated{
  color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums;
  min-width:11em; text-align:right; white-space:nowrap;
}


.updated.stale{color:var(--red); font-weight:700;}


/* 右上の「ユーザー名 ＋ ログアウト」（フロント画面用）。全画面共通の base.css に
   置き、#userbar が無い画面（清掃会社・現場）には影響しない。
   position:relative はドロップダウン（.userbar-menu、position:absolute）の
   基準にするために必要。右寄せはここでは指定しない
   （.refresh-wrap / .head-right の最後の子要素として置く。理由は
   .refresh-wrap 側のコメント参照）。 */
#userbar{position:relative; flex:none;}


#userbar .userbar-name{
  border:1px solid var(--line); background:#fff; border-radius:99px;
  padding:5px 14px; font-family:inherit; font-size:12.5px; font-weight:700;
  color:var(--ink); cursor:pointer; line-height:1.7;
}


#userbar .userbar-name:hover{border-color:var(--red); color:var(--red);}


#userbar .userbar-menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:120;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.14); min-width:150px; overflow:hidden;
}


#userbar .userbar-menu button{
  display:block; width:100%; text-align:left; border:none; background:none;
  padding:9px 14px; font-family:inherit; font-size:13px; color:var(--ink); cursor:pointer;
}


#userbar .userbar-menu button:hover{background:var(--red-tint); color:var(--red);}



/* line-height を明示しているのは、これが常に <button> だから。
   ブラウザは既定で <button> の line-height を "normal" にリセットし、
   body の line-height:1.7 を継承しない（<a> は継承する）。そのため
   同じ padding・同じ文字サイズでも、隣に並ぶ <a class="btn-back"> や
   .btn-nav（いずれも <a>）より数px低く見える不一致が起きていた
   （2026-08-13、ユーザー指摘）。1.7 を明示してそろえる。

   アイコン（.ico の中身）は文字「⟳」ではなく線で描いたSVGにしてある
   （2026-09-06 ユーザー指摘「アイコンが変形している」）。実測すると
   このグリフはフォントによって実際のインクが 95×145px 相当（幅より
   高さが5割以上大きい縦長）で描かれ、丸い矢印のはずが縦に潰れた楕円に
   見えていた。lib/dom.js の chevronHtml（前へ／次へボタンの矢印）を
   2026-08-30 に同じ理由でSVGへ置き換えたのと同じ対処。

   円弧は3時の位置から反時計回りに270度（12時の位置で止める）＝
   隙間がちょうど1/4になるようにしてある（2026-09-06、最初の版は隙間が
   1/8しかなく閉じた円に見えると指摘され作り直した）。矢じりは矢印線を
   丸端（stroke-linecap:round）にすると円弧の端と重なってダマになった
   ため、塗りつぶしの小さい三角形にしてある。
   マークアップは11画面のヘッダーそれぞれに直接書いてある
   （ビルド工程が無く、共通の入れ物を作れないため）。
   `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
     <path d="M20.5 12A8.5 8.5 0 1 1 12.3 3.6" stroke="currentColor" stroke-width="2.3" stroke-linecap="round"/>
     <path d="M8.2 3.3 13.6 3.8 12.1 8.9Z" fill="currentColor"/>
   </svg>`
   直すときは11ファイルとも同じ形に保つこと（grep -rl "M8.2 3.3 13.6 3.8" public/ で辿れる）。 */
.btn-refresh{
  display:inline-flex; align-items:center; gap:7px;
  border:1.5px solid var(--red); background:#fff; color:var(--red);
  padding:7px 16px; border-radius:6px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:700; line-height:1.7;
}


.btn-refresh:hover:not(:disabled){background:var(--red); color:#fff;}


.btn-refresh:disabled{opacity:.5; cursor:default;}


/* 中身は文字ではなく線で描いたSVG（下記コメント参照）。
   flex で中央寄せにしておくと、SVGの余白の取り方に関係なく必ず
   ボタンの真ん中に来る。 */
.btn-refresh .ico{display:inline-flex; align-items:center; justify-content:center;}


.btn-refresh.busy .ico{animation:spin .8s linear infinite;}


/* ── 「最新情報に更新」をアイコンだけにする（2026-09-06 ユーザー指示）。
   .btn-refresh は「CSV出力」ボタン（extras.html・expenses.html）とも
   共有しているクラスなので、そちらまでアイコンにならないよう .icon-only
   を足したボタンにだけ効かせる。全画面で使う共通ヘッダーの部品なので
   base.css に置く（個別画面のCSSに書くと直し忘れが起きるため）。
   サイズは隣に並ぶ他のアイコンボタン（dashboard.html の .btn-settings 等）
   に合わせて正方形にそろえた。 */
.btn-refresh.icon-only{
  padding:0; width:36px; height:36px; justify-content:center; gap:0;
}
.btn-refresh.icon-only #btnLabel{
  /* 画面には出さないが、読み上げには残す（title属性はボタン全体の説明用）。 */
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);
}


@keyframes spin{to{transform:rotate(360deg);}}



/* 画面の高さに影響しないよう浮かせて出す（レイアウトを押し下げない）。
   **出ている間もクリックは下へ通す**（pointer-events:none のまま）。
   通知はヘッダーの真上に重なるので、以前は出ている5秒のあいだ☰・更新・
   画面へのリンクが押せなかった（2026-09-27 点検 M20）。中身は文字だけで
   押す場所が無いので、通して困ることはない（文字の選択はできなくなる）。 */
.flash{
  position:fixed; top:14px; left:50%; z-index:200;
  width:calc(100% - 48px); max-width:640px;
  transform:translateX(-50%) translateY(-10px);
  opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s;
}


.flash.on{opacity:1; transform:translateX(-50%) translateY(0);}


.flash-in{
  padding:9px 14px; border-radius:6px; font-size:13px; text-align:center;
  background:var(--red-tint); border:1px solid var(--red-line); color:var(--red-dark);
  box-shadow:0 6px 20px rgba(0,0,0,.14);
}


.tab{
  border:1px solid var(--line); border-bottom:none; background:#fafafa;
  padding:9px 20px 8px; border-radius:8px 8px 0 0; cursor:pointer;
  font-size:14px; font-family:inherit; color:var(--muted);
  position:relative; top:1px;
}


.tab:hover{background:#f2f2f2;}


.tab.on{
  background:#fff; color:var(--red); font-weight:700;
  border-color:var(--red); border-top-width:3px; padding-top:7px;
}


.tab .n{
  display:inline-block; min-width:20px; margin-left:8px; padding:0 6px;
  background:#e8e8e8; color:#666; border-radius:99px; font-size:11px; font-weight:700;
}


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


/* ページ上部の集計バー（「20 部屋｜手配先 4｜施設 10」）。 */
.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:20px;
}


/* 「(3件)」のような、見出しに添える件数。dashboard の設定・施設管理の鍵・
 * 自社清掃員管理の担当施設で使う。 */
.prop-count{color:var(--muted); font-weight:400;}


/* 前の画面へ戻る丸いボタン。ヘッダーの右側に並ぶ。 */
.btn-back{
  border:1px solid var(--line); background:#fff; color:var(--muted);
  padding:6px 14px; border-radius:99px; font-size:12.5px; font-weight:700;
  text-decoration:none; white-space:nowrap;
}


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


/* 遅延保存の「保存中…／保存しました」（lib/delayedsave.js の saveStateText）。
 * 施設管理はヘッダーに1か所、メモのポップアップは入力欄の下に出す。
 * 失敗だけ赤くする（保存中・保存済みは目立たせない）。空のときは幅を取らない。 */
.save-state{color:var(--muted); font-size:12px; white-space:nowrap;}
.save-state:empty{display:none;}
.save-state[data-state="error"]{color:var(--red); font-weight:700;}
.note-pop-state{margin-top:6px; text-align:right;}


.summary .big{font-size:22px; font-weight:800; color:var(--red);}


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


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


/* 読み込み中の集計バーに入れる、見えない数字（lib/report.js の
 * LOADING_SUMMARY_HTML）。「読み込み中…」の小さい文字だけだとバーが
 * 数字の入ったときより低く、届いた瞬間に下の表が数px押し下げられる。
 * 幅0で高さだけ効かせ、右の gap（10px）も打ち消して文字の位置を変えない。 */
.summary .big-ph{visibility:hidden; width:0; overflow:hidden; margin-right:-10px;}


.prop-name .code{
  color:var(--red); font-family:var(--font-mono);
  font-size:11px; font-weight:700; border:1px solid var(--red-line);
  background:var(--red-tint); padding:1px 5px; border-radius:4px;
}


.rooms{display:flex; flex-wrap:wrap; gap:6px;}


.room{
  position:relative;   /* チェックインバッジを右上角に浮かせるため */
  border:1.5px solid var(--red); color:var(--red); background:#fff;
  padding:5px 13px; border-radius:6px; font-weight:700; font-size:14px;
  font-variant-numeric:tabular-nums;
}


.room:not(.ask){cursor:pointer;}


/* 要確認でも、押すと Beds24 のメモの全文を出すチップ（ダッシュボード・
   自社清掃手配。data-ask-id を持つもの。点検 C41）は押せる形のカーソルにする。 */
.room.ask[data-ask-id]{cursor:pointer;}

 /* クリックで部屋メモ（清掃不要/依頼/備考）を開く */
/* 清掃当日にゲストのチェックインがある部屋。ボックスを大きくせず右上に浮かせる */
.room .checkin-badge{
  position:absolute; top:-6px; right:-6px; z-index:1;
  background:#2563eb; color:#fff; border:1.5px solid #fff;
  font-size:9px; font-weight:800; line-height:1; letter-spacing:.03em;
  padding:2px 5px; border-radius:99px; pointer-events:none;
}


.room .flag{
  display:inline-block; margin-left:6px; padding:0 5px;
  background:var(--red); color:#fff; border-radius:3px;
  font-size:10px; font-weight:700; vertical-align:1px;
}


/* 依頼バッジ。未回答=オレンジ／OK=緑／NG=赤（清掃会社が回答した色） */
.room .flag.req{background:#d97706;}


/* フロント（自社清掃手配）から追加された部屋。自分の担当施設の外から
   回ってくるので、自分の担当と混ざらないようにしるしを付ける
   （自社清掃手配の濃紺と同じ色。清掃会社向けの表示名は「追加」）。 */
.room .flag.deleg{background:var(--self);}


.room .flag.req.ok{background:#059669;}


/* クリックでスクロールした先の部屋を一時的に光らせる（サマリーの数字
   クリック等、複数画面で使う共通の演出なので base.css に置く）。
   元は vendor.css だけにあったが、dashboard.html の「要確認」クリックにも
   使うことになったため、ここへ移した（2026-08-12）。 */
@keyframes roomHighlight{
  0%, 100% { box-shadow:0 0 0 0 rgba(217,119,6,0); }
  30%      { box-shadow:0 0 0 5px rgba(217,119,6,.55); }
}


.room.flash-highlight{animation:roomHighlight 1.2s ease-in-out;}


.room .flag.req.ng{background:var(--red);}


/* 現場清掃員が報告する清掃状況（読み取りのみ）。手配先の画面（vendor.html）は
 * テキストバッジのまま。依頼バッジ（オレンジ/緑/赤）と混同しないよう別の色。 */
.room .flag.status-doing{background:#d97706;}
.room .flag.status-done{background:#059669;}

/* フロントのダッシュボードだけ、テキストバッジの代わりに部屋番号の前に
 * 小さいドットで清掃状況を示す（枠の大きさを変えないため）。未着手はドット無し。 */
.room .status-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  margin-right:5px; vertical-align:1px;
}
.room .status-dot-doing{background:#d97706;}
.room .status-dot-done{background:#059669;}


/* 清掃しない部屋。消さずに理由を添えて薄く残す */
.room.skip{
  border-color:var(--line); border-style:dashed; color:var(--muted);
  background:#fbfbfb; font-weight:600;
}


.room.skip .flag{background:var(--muted);}


.room.skip .no{text-decoration:line-through; text-decoration-color:var(--muted);}


.alert b{color:var(--red);}


.alert .lbl{color:var(--muted); font-size:12px;}



.empty{
  text-align:center; color:var(--muted); padding:64px 20px;
  border:1px dashed var(--line); border-radius:10px;
}


.empty .mk{font-size:30px; color:var(--red-line); display:block; margin-bottom:8px;}


.modal-back.on{display:flex;}


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


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


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


/* 縦長のモーダルは**本文（.modal-body）だけ**をスクロールし、見出しと
   ボタン行（.modal-foot）はいつも画面に残す（2026-09-27 点検 C40 の段1）。
   以前は箱が中身なりに伸びてオーバーレイ（.modal-back）ごとスクロールして
   いたので、幅559×高634の画面で追加対応依頼は1170px、設定は5790pxになり、
   Beds24 メモ付きの部屋メモは「保存」が画面の外（y=1003）にあった。

   箱の高さの上限は、オーバーレイの上下の余白（dashboard.css・vendor.css・
   house.css・report.css の #extraBack とも padding 40px）を引いた残り。
   dvh はスマホのアドレスバーの出入りに合わせるため（読めない古い端末は
   上の vh の行が効く）。
   ページ全体（body）は固定しない（点検の「採らない直し方」C40・M08）。
   overscroll-behavior は、本文を端までスクロールしたときに後ろのページまで
   動き出さないようにするため。

   箱の見た目（幅・角丸・影・overflow:hidden）は各画面の CSS が自前で持つ。
   ここに置くのは全画面で同じ「縦の組み方」だけ。**セレクタは2クラス以上で
   書く**（各画面の CSS は base.css の後に読まれ、1クラスの .modal を自前で
   持っているので、1クラスだと将来そちらに同じ性質を書いたときに黙って負ける。
   docs/spec/frontend.md「CSS」）。
   写真モーダル（.modal.photo-modal、下）は同じ強さで後ろに書いてあるので、
   そちらの max-height:92vh が勝つ。 */
.modal-back > .modal{
  display:flex; flex-direction:column;
  max-height:calc(100vh - 80px);
  max-height:calc(100dvh - 80px);
}


.modal-back > .modal > .modal-head,
.modal-back > .modal > .modal-foot{flex:none;}


.modal-back > .modal > .modal-body{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
}


/* ────────────────────────────────────────────────
   写真モーダル（清掃写真・忘れ物・立替のレシート共通。lib/photomodal.js）

   もとは report.css にだけ置いてあったが、フロントダッシュボードの部屋メモ
   モーダルからも同じ lib/photomodal.js を使うようになった（2026-08-18）。
   report.css を読まない画面では枠も画像の上限も効かず、写真が画面から
   はみ出して出ていたので、モジュールと同じくスタイルもここへ移した
   （.room.flash-highlight を vendor.css から移したときと同じ考え方）。

   **セレクタは必ず2クラスで書くこと。** 箱の実体は
   `<div class="modal-back photo-modal-back"><div class="modal photo-modal">`
   で、dashboard.css・vendor.css・house.css はどれも base.css の**後**に
   読み込まれて `.modal-back` / `.modal` を自前で定義している。1クラスだと
   同じ詳細度で後勝ちになり、設定モーダル用の値（左上寄せ・z-index:100・
   max-width:820px）に上書きされてしまう。 */

.modal-back.photo-modal-back{
  position:fixed; inset:0; background:rgba(0,0,0,.5); display:none;
  align-items:center; justify-content:center; z-index:200; padding:20px;
}


/* 開いたときの display は3クラスで書く。上の `.modal-back.on{display:flex}`
   と2クラス同士で並ぶと、後ろに書いたこちらの `display:none` が勝ってしまい、
   モーダルが開いているのに見えない（クリックしても無反応に見える）。 */
.modal-back.photo-modal-back.on{display:flex;}


/* 部屋メモモーダル（z-index:100）の上に重ねて開くので、閉じるまでは
   こちらが前面に来る。 */
.modal.photo-modal{
  background:#fff; border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.25);
  overflow:hidden; width:auto; max-width:min(720px, 92vw); max-height:92vh;
  display:flex; flex-direction:column;
}


.photo-modal-body{
  padding:16px; overflow:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
}


.photo-modal-img{display:block; max-width:100%; max-height:calc(92vh - 130px); border-radius:8px;}


.photo-modal-loading, .photo-modal-empty{color:var(--muted); padding:30px;}


/* 清掃前・清掃後は複数枚あるので、前後ボタンで1枚ずつめくる形にする。 */
.photo-modal-gallery{display:flex; align-items:center; gap:10px; max-width:100%;}


/* 写真の置き場。めくっている間だけ、直前の大きさを下限として持たせる
   （photomodal.js が min-width/min-height を付け外しする）ので、
   読み込み中に枠がつぶれてちらつかない。 */
.photo-modal-stage{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; justify-content:center;
  position:relative; border-radius:8px;
  background-position:center; background-size:contain; background-repeat:no-repeat;
}


/* 写真が届くまでの枠（2026-09-27 の点検 M16）。原寸が届くまで0.5〜1.1秒、
   <img> の大きさが 0 で枠が空のまま小さく開き、届くと広がって削除ボタンが
   動いていた。届くまでは枠を先に取って「読み込み中…」を出す。一覧の小さい
   写真がある忘れ物は、photomodal.js がそれを背景に敷き、縦横比から原寸が
   届いたときの大きさで枠を取り直す。<img> は届くまで隠す（めくったとき、
   前の写真が新しい写真の代わりに見えないように）。 */
.photo-modal-stage.is-loading{
  min-width:min(420px, 60vw); min-height:min(315px, calc(92vh - 130px));
  background-color:#f3f3f3;
}
.photo-modal-stage.is-loading .photo-modal-img{visibility:hidden;}
.photo-modal-wait{display:none;}
.photo-modal-stage.is-loading .photo-modal-wait{
  display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  padding:4px 12px; border-radius:999px; background:rgba(255,255,255,.88);
  color:var(--muted); font-size:13px; white-space:nowrap; pointer-events:none;
}


/* 矢印はSVG（chevronHtml、lib/dom.js）。文字（‹›）だとフォントによって
   ボタン中央からズレて見えたため（2026-08-30）。display:flex で確実に
   中央へ置く。丸ボタンなので他の2箇所（.cal-nav/.ym-nav）より一回り
   大きい18pxで出す。 */
.photo-modal-nav{
  display:flex; align-items:center; justify-content:center; padding:0;
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  font-family:inherit; cursor:pointer;
}


.photo-modal-nav svg{width:18px; height:18px;}


.photo-modal-nav:hover:not(:disabled){border-color:var(--red); color:var(--red);}


.photo-modal-nav:disabled{opacity:.3; cursor:default;}


.photo-modal-count{color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums;}


/* 忘れ物にフロントが足した写真だけに出す「この写真を削除」（2026-09-26）。
   .btn が display を持つ画面でも hidden で確実に消えるよう明示する。 */
.photo-modal-del{font-size:12px; padding:5px 12px; color:var(--red);}
.photo-modal-del[hidden]{display:none;}


.btn{
  font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
  border-radius:6px; padding:8px 16px; border:1.5px solid var(--line); background:#fff; color:var(--ink);
  white-space:nowrap;
}


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


.btn.primary{background:var(--red); color:#fff; border-color:var(--red);}


.btn.primary:hover{background:var(--red-dark); color:#fff;}


.rm-sec{
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:12px;
}


.rm-sec.skip-on{border-color:var(--muted); background:#fbfbfb;}


.rm-label{font-weight:700; font-size:13px; margin-bottom:8px;}


.rm-check{display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; cursor:pointer;}


.rm-check input{width:17px; height:17px;}


.rm-by{color:var(--muted); font-size:11px; margin:6px 0 0;}


.rm-sec textarea{
  width:100%; margin-top:8px; border:1px solid var(--line); border-radius:6px;
  padding:8px 10px; font-family:inherit; font-size:13px; resize:vertical; min-height:52px;
}


.rm-request-view{border-color:#d98e33; background:#fffaf2;}


.rm-request-view .rm-label{color:#b45309;}


.login-back.on{display:flex;}


.login-box{
  width:100%; max-width:360px; border:1px solid var(--line); border-radius:12px;
  padding:26px 28px; box-shadow:0 8px 32px rgba(0,0,0,.06);
}


.login-box h2{margin:0 0 6px; font-size:18px; font-weight:800; color:var(--ink);}


.login-box .vn{color:var(--red); font-weight:800; margin-bottom:16px;}


.login-box label{display:block; color:var(--muted); font-size:12px; margin-bottom:6px;}


.login-box input{
  width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:6px;
  font-family:inherit; font-size:14px; margin-bottom:12px;
}


.login-box .err{color:var(--red); font-size:12px; min-height:16px; margin-bottom:8px;}


.login-box button{
  width:100%; padding:10px; border:none; background:var(--red); color:#fff;
  border-radius:6px; font-family:inherit; font-size:14px; font-weight:800; cursor:pointer;
}


.login-box button:hover{background:var(--red-dark);}


.app-hide{display:none !important;}


/* 担当施設の一覧（フロントの設定画面・自社清掃員管理で共通）。
   件数が増えるほどタグの折り返しは追いにくくなるため、コード・施設名を列で揃えた表にする。 */
.prop-table{width:100%; border-collapse:collapse;}


.prop-table th{
  text-align:left; font-size:11px; font-weight:700; color:var(--muted);
  padding:4px 8px; border-bottom:1px solid var(--line); white-space:nowrap;
}


.prop-table td{
  padding:6px 8px; font-size:12.5px; border-bottom:1px solid var(--line);
  vertical-align:middle;
}


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


.prop-table td.code{
  font-family:var(--font-mono);
  color:var(--red-dark); white-space:nowrap; width:1%;
}


.prop-table td.act{width:1%; text-align:right;}


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


/* 削除の×。押すと確認ポップアップ（js/lib/confirmdialog.js）が出て、そこで確定する。 */
.prop-table .x{
  border:none; background:none; cursor:pointer; color:var(--muted);
  font-family:inherit; font-weight:800; font-size:13px; padding:0 4px;
}


.prop-table .x:hover{color:var(--red);}


/* ── 部屋チップまわり（dashboard / house / vendor で共通） ──
 *
 * この3画面は「予約を読んで部屋チップを並べ、判断とメモを書く」という
 * 同じ骨格を持つ。2026-08-31 まで、下の規則は3つの css に**内容まで同じ**
 * ものが並んでいて、片方だけ直したときに画面ごとに見た目がずれていた
 * （清掃状況ドットが丸くならない・ボタンの高さが違う、等。docs/HANDOFF.md）。
 *
 * 画面ごとの違い（house の緑・vendor の色塗りモードなど）は各 css で
 * 上書きする。base.css より後ろに読み込まれるので、そのまま上書きが効く。 */

.cards{display:flex; flex-direction:column; gap:16px;}


.card-head .name{font-weight:700; font-size:15px;}


.asg-row{display:flex; align-items:flex-start; gap:10px;}


.asg-who{
  flex:0 0 130px; padding-left:8px;
  border-left:3px solid var(--line);
  font-size:12px; font-weight:700; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  line-height:28px;
}


.room .memo-dot{margin-left:5px; color:#d97706; font-size:9px; vertical-align:middle;}


.room.ask .ask-head{display:flex; align-items:center; gap:6px;}


/* 黒いテキストボックスの見た目・位置は css/tooltip.css（全画面共通）。
   ここは部屋チップの中のバッジだけの都合＝「読むためのもの」と分かる
   カーソルにする、という指定だけを残す。 */
.room [data-tip]{cursor:help;}


.ask-btns{display:flex; gap:4px;}


.ask-btns button{
  flex:1; font-family:inherit; font-size:11px; font-weight:700; cursor:pointer;
  border:1px solid var(--red); background:#fff; color:var(--red);
  border-radius:4px; padding:4px 8px; white-space:nowrap;
}


.ask-btns button:hover{background:var(--red); color:#fff;}


.ask-btns button.no{border-color:var(--muted); color:var(--muted);}


.ask-btns button.no:hover{background:var(--muted); color:#fff;}


.room .done{
  margin-left:6px; font-size:10px; font-weight:700; color:var(--muted);
  border:1px solid var(--line); border-radius:3px; padding:0 4px; cursor:pointer;
}


.room .done:hover{border-color:var(--red); color:var(--red);}


/* 押せる範囲（当たり判定）だけを24px四方まで広げる（点検 M03）。
 *
 * 部屋チップの「戻す」は見た目が28×16px、自社清掃手配の臨時カードの×は
 * 12×14px しかなく、スマホの指では押し損ねる。チップやカードの中に詰めて
 * 置いてあるので、見た目を大きくすると並びが崩れる。そこで**見た目は
 * そのまま**、透明な疑似要素を要素の中心に重ねて、押せる範囲だけを
 * max(自分の大きさ, 24px) に広げる。疑似要素へのクリックは要素自身への
 * クリックとして届くので、data-act の拾い方（closest）は変わらない。
 *
 * ・::after ではなく ::before を使う。「戻す」には Beds24 のメモの
 *   ツールチップ（tooltip.css の [data-tip]:hover::after）が付くことがあり、
 *   ::after を使うとそちらを潰してしまうため。
 * ・対象は「戻す」（ダッシュボード・自社清掃手配・戸建ての部屋チップ／日付の
 *   見出し、自社清掃手配の週表示の一覧）と、臨時・タイミーを外す×
 *   （自社清掃手配の清掃員カード、戸建ての日付の枠）。vendor.css / house.css の
 *   クラスも、3画面とも読むこのファイルにまとめて置く。
 * ・**隣の押せるものに重ねない。** 重なると、境目を押したときに隣の部屋の
 *   「戻す」や URL のボタンが反応してしまう。チップ・カード・枠の余白の内側に
 *   収まることを実寸で確かめてある。×は左隣（URL のボタン）との隙間が
 *   狭いので、広げる向きを右（カードの内側の余白）へ寄せている。週表示の
 *   一覧は行の間隔を 3px → 4px にして、上下の行の「戻す」どうしが重ならない
 *   ようにした（vendor.css の .wk-ask-list）。 */
.room .done, .wk-undo-btn, .pc-del, .d-spot-del{position:relative;}


.room .done::before, .wk-undo-btn::before, .pc-del::before, .d-spot-del::before{
  content:''; position:absolute; left:50%; top:50%;
  width:max(100%, 24px); height:max(100%, 24px);
  transform:translate(-50%, -50%);
}


/* ×（見た目12px幅）は左の URL ボタンとの隙間が 5px。左右均等に広げると
   URL ボタンに 1px ほど食い込むので、右へ 2px 寄せる（右はカードの余白 9px）。 */
.pc-del::before{left:calc(50% + 2px);}


/* 戸建ての×（見た目18px幅）も左の URL ボタンとの隙間が 3px しかない。
   右へ 1px 寄せる（右は日付の枠の余白 6px）。 */
.d-spot-del::before{left:calc(50% + 1px);}


.rm-note{color:var(--muted); font-size:11px; font-weight:400;}


.rm-sec textarea[readonly]{background:#fbfbfb; color:var(--muted); resize:none; cursor:default;}


.rm-beds-view{border-color:#fde047; background:#fefce8;}


.rm-beds-view .rm-label{color:#854d0e;}


.rm-beds-text{font-size:13px; white-space:pre-wrap; color:var(--ink);}


.room.extra .ex-room{font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums;}


.room.extra .flag.ex{
  background:#fff7ed; border:1px solid #d98e33; color:#b45309;
  font-size:10px; font-weight:700; padding:1px 5px; border-radius:4px;
}


/* 黒いテキストボックス本体（位置・色・折り返し・画面端での上下反転）は
   css/tooltip.css に移した（2026-09-01）。同じ十数行が base/house/vendor の
   4か所にコピーされていて、max-width だけが少しずつ違っていたため。 */



/* ログイン切れの帯（lib/authexpired.js。2026-09-23）。
   セッションが切れたあとも画面は古い内容のまま動いて見えるので、
   気づけるように画面の一番上に出す。モーダル（z-index 100〜300）より上。 */
.auth-expired{
  position:fixed; left:0; right:0; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 14px;
  padding:10px 16px; background:var(--red); color:#fff;
  font-size:14px; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.auth-expired button{
  font-family:inherit; font-size:13px; font-weight:800; cursor:pointer; white-space:nowrap;
  background:#fff; color:var(--red); border:none; border-radius:6px; padding:6px 14px;
}