/* ハンバーガーメニュー（別画面への遷移はここにまとめた）。
   他の画面へのリンクをヘッダーに3つ並べると、主操作の「最新情報に更新」が
   埋もれていた（2026-08-23、ユーザー指摘）。リンクは ☰ のドロップダウンに
   まとめ、ヘッダーをすっきりさせる。開閉のJSは dashboard/main.js。 */
.menu-wrap{position:relative; flex:none;}


.menu-btn{
  position:relative;
  /* 隣に並ぶ .btn-settings・.btn-refresh.icon-only と同じ36×36にそろえる
   * （2026-09-15、ユーザー指摘「アイコンのサイズが異なっている」。
   *  以前は38×38で2pxだけ大きかった）。 */
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--line); background:#fff; border-radius:6px;
  cursor:pointer; font-size:17px; line-height:1; color:var(--ink); padding:0;
}


/* 清掃員からの未対応シフト変更申請を知らせる赤丸（2026-08-30）。
   ☰ボタンの角と、飛び先の「自社清掃員管理」の両方に出す。中身は空、
   位置だけで「何かある」を伝えるだけなので件数は入れない。 */
.notif-dot{
  position:absolute; top:-3px; right:-3px;
  width:9px; height:9px; border-radius:50%;
  background:var(--red); border:1.5px solid #fff;
}


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


.menu-btn[aria-expanded="true"]{border-color:var(--red); color:var(--red);}


.menu{
  position:absolute; left: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:180px; overflow:hidden;
}


.menu .menu-item{
  position:relative;
  display:block; width:100%; text-align:left; text-decoration:none;
  padding:10px 14px; font-family:inherit; font-size:13.5px; font-weight:700;
  color:var(--ink); white-space:nowrap;
}


.menu .menu-item .notif-dot{top:50%; right:14px; transform:translateY(-50%); border:none;}


.menu .menu-item:hover{background:var(--red-tint); color:var(--red);}



/* ── 日付タブ ── */
.tabs{max-width:1160px; margin:0 auto; padding:14px 24px 0; display:flex; gap:2px;}



.card{
  /* 以前は overflow:hidden で見出しの角をカードの丸みに合わせて切り抜いて
     いたが、それだと1行目の部屋の「要確認」等に付く上向きツールチップ
     （.room [data-tip]:hover::after）の上側がカードの外に出せず、そこで
     切れて見えていた（2026-08-31、ユーザー指摘：心斎橋北601）。
     見出し自体に丸みを持たせる形に変え、overflow は付けない。 */
  border:1px solid var(--line); border-radius:12px; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.07);
}


.card-head{
  background:var(--red); color:#fff; padding:11px 16px;
  border-radius:11px 11px 0 0;
  display:flex; align-items:center; gap:10px;
}


.card-head .count{
  margin-left:auto; background:rgba(255,255,255,.22);
  padding:2px 11px; border-radius:99px; font-size:12px; font-weight:700;
}


/* 清掃会社側（vendor.html）の確認状況。清掃会社がその日の部屋を
   「確認済みにする」ボタンで確定すると、ここに反映される。 */
.card-head .vconfirm{
  padding:2px 10px; border-radius:99px; font-size:11px; font-weight:700;
  background:rgba(255,255,255,.9); color:var(--red);
}


.card-head .vconfirm.ok{color:#059669;}


/* 自社清掃手配カードの「清掃手配」ボタン。自社の担当割り当て画面（vendor.html）へ飛ぶ */
.card-head .vconfirm.link{text-decoration:none; cursor:pointer;}


.card-head .vconfirm.link:hover{background:#fff;}


/* ── 自社清掃手配のカード ──
   赤は外部の清掃会社を含む画面全体の基調なので、自社だけ濃紺にして
   一覧の中でひと目で見分けられるようにする。先頭に固定表示される
   カードなので、色が違うだけで「ここから下はよその会社」と分かる。 */
.card.self{border-color:var(--self-line);}


.card.self .card-head{background:var(--self);}


.card.self .card-head .vconfirm{color:var(--self);}


/* 施設名の左のコードも、カードの色に合わせて赤から濃紺にする */
.card.self .prop-name .code{
  color:var(--self); border-color:var(--self-line); background:var(--self-tint);
}


/* ── 戸建て清掃手配のカード ──
   自社清掃手配と同じく、フロントが直接手配する会社なので専用の色（緑）で
   一覧の中でひと目で見分けられるようにする。自社清掃手配のすぐ下に
   固定表示される（config.js の並び替え参照）。 */
.card.detached{border-color:var(--detached-line);}


.card.detached .card-head{background:var(--detached);}


.card.detached .card-head .vconfirm{color:var(--detached);}


.card.detached .prop-name .code{
  color:var(--detached); border-color:var(--detached-line); background:var(--detached-tint);
}


.card-body{padding:6px 16px 14px;}



/* カードが横長になったので、施設名を左の固定幅、部屋をその右に流す。
   施設名を上に置くと、部屋が1〜2個の施設ばかりのときに行数だけ増えて
   縦に伸びるため。 */
.prop{
  padding:10px 0; border-bottom:1px dashed var(--line);
  display:flex; align-items:flex-start; gap:18px;
}


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


.prop-name{
  flex:0 0 250px; padding-top:4px; margin-bottom:0;
  font-weight:600; font-size:13px; display:flex; align-items:center; gap:8px;
}


/* 施設名の右側。部屋の一覧と、その下の「追加対応」の枠をまとめて入れる
   （別件を横に並べると部屋の一覧が細くなるので、縦に積む）。 */
.prop-main{flex:1; min-width:0;}


.prop .rooms{flex:1; min-width:0;}


/* 画面が狭いときは今までどおり、施設名の下に部屋を並べる */
@media (max-width:760px){
  .prop{display:block;}
  .prop-name{margin-bottom:7px; padding-top:0;}
}


/* ── 担当者ごとの部屋 ──
   施設の中を「誰が・どの部屋」で並べる。手配先の画面で割り当てた結果を
   フロントからも追えるようにするため。誰も割り当てていない施設では
   この形にせず、今までどおり部屋を並べるだけにする（view.js 参照）。 */
.asg-list{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}


@media (max-width:760px){
  .asg-row{display:block;}
  .asg-who{line-height:1.6; margin-bottom:4px;}
}


/* 施設単位の清掃会社確認状況（vendor.html は施設ごとに確認するため）
   flex:none + white-space:nowrap は .deleg-tag と同じ理由：.prop-name は
   幅を固定した flex 行（250px）なので、これが無いと入りきらないときに
   バッジの中でテキストが折り返ってしまう（「14日」「未手配 10」のように
   2行になる不具合。2026-08-13 に .house-open-badge/.self-open-badge と
   まとめて修正）。入らない分はバッジごと次の行へ回す。 */
.vconfirm-prop{
  flex:none; white-space:nowrap;
  margin-left:auto; padding:2px 9px; border-radius:99px; font-size:10.5px; font-weight:700;
  background:var(--red-tint); color:var(--red);
}


/* 委託された施設（この会社の担当施設ではないが、自社清掃手配から
   割り当てられた部屋がある）に付けるしるし。自社清掃手配の色にそろえる。 */
.deleg-tag{
  flex:none; padding:2px 9px; border-radius:99px; font-size:10.5px; font-weight:700;
  background:var(--self-tint); border:1px solid var(--self-line); color:var(--self);
}


.vconfirm-prop.ok{background:#ecfdf5; color:#059669;}


/* 戸建て清掃手配の施設だけ：今日から14日以内の未手配（候補なし含む）件数。
   0件なら落ち着いた色、1件以上なら赤で目立たせる（vconfirm-prop と同じ
   「施設単位の小さい丸バッジ」の形）。flex:none + white-space:nowrap の
   理由は vconfirm-prop の注記を参照（バッジの中で文字が折り返るのを防ぐ）。 */
.house-open-badge{
  flex:none; white-space:nowrap;
  margin-left:auto; padding:2px 9px; border-radius:99px; font-size:10.5px; font-weight:700;
  background:var(--detached-tint); color:var(--detached);
}


.house-open-badge.warn{background:var(--red-tint); color:var(--red);}


/* 自社清掃手配の施設だけ：選んでいる日（今日／明日タブ）の未手配件数。
   house-open-badge と同じ形・同じ「0件なら落ち着いた色、1件以上なら赤」の
   考え方だが、地色は自社清掃手配のカードの色（--self）に合わせてある
   （green の house-open-badge をそのまま使うと、濃紺のカードの上で
   浮いて見える）。 */
.self-open-badge{
  flex:none; white-space:nowrap;
  margin-left:auto; padding:2px 9px; border-radius:99px; font-size:10.5px; font-weight:700;
  background:var(--self-tint); color:var(--self);
}


.self-open-badge.warn{background:var(--red-tint); color:var(--red);}



/* 要確認。フロントが判断するまで清掃対象に数えない */
.room.ask{
  border-style:dashed; background:var(--red-tint);
  flex-direction:column; align-items:stretch; gap:6px; padding:8px 10px;
}



/* 清掃会社が確認済みにした部屋の印（vendor.html と同じ意味） */
.room .vmark{margin-left:5px; font-weight:800; color:#059669;}



.alert{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:11px 16px; margin-bottom:10px;
  background:#fff; border:2px solid var(--red); border-radius:8px;
}


/* 「要確認 N件」クリックで最初の要確認部屋へ自動スクロール
   （vendor.html の「未確認部屋」・house.html のサマリー数字と同じ考え方）。 */
.alert .clickable{cursor:pointer; text-decoration:underline; text-decoration-style:dotted;}


.alert .clickable:hover{opacity:.75;}



/* ── 設定ボタン ── */
.btn-settings{
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--line); background:#fff; color:var(--muted);
  width:36px; height:36px; border-radius:6px; cursor:pointer;
  font-family:inherit; font-size:18px; line-height:1;
}


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


/* ── 自社清掃員管理へ（別タブで開く）。「最新情報に更新」と同じ見た目にする ── */
a.btn-refresh{text-decoration:none;}



/* ── 設定モーダル ── */
.modal-back{
  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;
}


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


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


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


.btn.small{padding:4px 10px; font-size:12px; font-weight:700;}


/* 設定から開く小さいモーダル（フロントユーザー追加）。既定のモーダルは
   最大幅820pxで広いため、フォーム1枚ぶんの幅に絞る。 */
.modal-sm{max-width:400px;}


/* 小モーダル内のフォーム。ログインボックスと同じ見た目にそろえる。 */
.modal-sm label{display:block; color:var(--muted); font-size:12px; margin-bottom:6px;}


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


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


/* チェックボックス1つの行（フロントユーザー追加の「経理権限」など）。
   上の `.modal-sm input` はテキスト入力を想定した見た目（幅100%・枠線・
   パディング）で、そのままだとチェックボックスが引き伸ばされて崩れる
   （2026-09-15、ユーザー報告で発覚）。type=checkbox だけ元の大きさに戻す。 */
.modal-sm input[type="checkbox"]{
  width:auto; padding:0; margin:0 6px 0 0; border:none; box-sizing:content-box;
}
.modal-sm label.modal-check{
  display:flex; align-items:center; font-size:13px; color:var(--ink);
  margin-bottom:12px; cursor:pointer;
}


/* フロントユーザー枠の見出し（co-head の中に置いた .lbl 用）。 */
.co-head .lbl{font-size:13px; font-weight:800; color:var(--ink);}


.co-block{
  border:1px solid var(--line); border-radius:12px; margin-bottom:20px; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.07); overflow:hidden;
}


.co-block .co-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 16px; margin-bottom:0;
  background:#f6f6f7; border-bottom:1px solid var(--line);
}


.co-body{padding:14px 16px 16px;}


.co-body .co-row:first-child{border-top:none; margin-top:0; padding-top:0;}


/* この手配先だけを保存するボタン。全体の「保存」を押すまで待たなくても、
   1件編集し終えたらすぐ反映できるようにする。 */
.co-foot{
  display:flex; justify-content:flex-end;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
}


.co-block .co-head input.co-name{
  flex:1; font-family:inherit; font-size:14px; font-weight:700;
  border:1px solid var(--line); border-radius:6px; padding:6px 10px;
}


/* 固定の手配先は名前も変えられない（多くの画面が文字列一致で
   判定に使っているため、うっかり変えると各所の判定がすれ違う）。 */
.co-block .co-head input.co-name[readonly]{
  /* 塗りは --line-soft ではなく専用の薄い灰色。--line-soft は区切り線として
     濃くしたので（tokens.css、2026-09-04）、そのまま塗りに使うと上の
     --muted の文字が読めなくなる。枠は --line が付いたままなので、
     読み取り専用でも入力欄の形は分かる。 */
  background:#f0f0f0; color:var(--muted); cursor:not-allowed;
}


/* 登録済みの手配先の名前欄の下に添える「改名すると新しい手配先になる」の一言
   （settings.js の RENAME_NOTE）。見出しの行（折り返し可の flex）の中で
   1行ぶんを取り、名前欄のすぐ下に出す。 */
.co-block .co-head .co-rename-note{
  flex-basis:100%; margin-top:-2px;
  font-size:11px; line-height:1.5; color:var(--muted);
}


/* 手配先の種類。自社清掃手配は清掃会社ではないので、同じ一覧に並んでいても
   ひと目で区別できるようにしるしを付ける。 */
.co-block .co-head .co-kind{
  flex:none; padding:2px 9px; border-radius:99px; white-space:nowrap;
  font-size:11px; font-weight:700;
  background:#f2f2f2; border:1px solid var(--line); color:var(--muted);
}


/* 色はダッシュボードの自社カードと同じ濃紺。画面をまたいで
   「この色が出ていたら自社」でそろえる。 */
.co-block .co-head .co-kind.self{
  background:var(--self-tint); border-color:var(--self-line); color:var(--self);
}


/* 削除の×。押すと確認ポップアップ（js/lib/confirmdialog.js）が出て、そこで確定する。 */
.co-block .co-head .del{
  flex:none; color:var(--muted); border:none; background:none; cursor:pointer; font-size:16px;
}


.co-block .co-head .del:hover{color:var(--red);}


/* 固定の手配先（自社清掃手配・戸建て清掃手配）は削除できない印。
   ×ボタンと同じ場所に置くが、クリックできないことが分かるよう
   色を薄くしてカーソルも変える。 */
.co-block .co-head .del.fixed{
  /* ここだけ --line より薄い色を直接書く。--line は枠線として濃くしたため
     （tokens.css、2026-09-04）、そのまま使うと押せる×と見分けが付かない。
     「押せない」を伝えるのが目的なので、周りの枠線より薄いままにする。 */
  color:#c2c2c2; cursor:not-allowed;
}


.co-block .co-head .del.fixed:hover{color:#c2c2c2;}


/* 各セクション（担当施設／URL／パスワード）は横並びだと施設タグが
   圧迫されて折り返しが崩れるため、見出しを上・中身を下に積む縦積みにした。 */
.co-block .co-row{
  display:flex; flex-direction:column; gap:8px;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
}


.co-block .co-row .lbl{color:var(--muted); font-size:12px; font-weight:700;}


/* 清掃応援可能施設など、見出しに添える補足説明 */
.co-block .co-row .lbl .hint{color:var(--muted); font-size:11px; font-weight:400; margin-left:8px;}


.prop-add-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}


.prop-add-label{font-size:12px; font-weight:700; color:var(--red-dark); white-space:nowrap; flex:none;}


/* 施設・対応者の検索欄（.prop-search* / .prop-opt*）は extramodal.css に移した。
   追加対応依頼のモーダルを3画面で共有するようになり、ダッシュボードの
   設定モーダルと同じ見た目を使い回すため。 */


.co-add{
  border:1.5px dashed var(--red); background:#fff; color:var(--red);
  padding:8px 14px; border-radius:8px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:700; width:100%;
}


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

/* 設定モーダルを開いた直後、最新の設定を読み終わるまでの表示
   （古い中身で打ち始めさせないため、読み終わるまで枠を出さない）。 */
.co-loading{color:var(--muted); font-size:13px; padding:24px 4px;}


/* 設定モーダル最下部の「操作ログを見る」への導線。手配先の追加とは別の
   役割（別画面への移動）なので、ボタンではなくリンク＋説明文で置く。 */
.co-log{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}

.co-log a{font-size:13px; font-weight:700; color:var(--red); text-decoration:none;}

.co-log a:hover{text-decoration:underline;}

.co-log span{color:var(--muted); font-size:12px;}



.vendor-url{
  display:flex; gap:8px; align-items:center;
}


.vendor-url input{
  flex:1; font-family:var(--font-mono); font-size:12px;
  border:1px solid var(--line); border-radius:6px; padding:5px 8px; background:#fafafa; color:var(--ink);
}


.pw-row{display:flex; gap:8px; align-items:center;}


.pw-row input{
  font-family:inherit; font-size:13px; border:1px solid var(--line); border-radius:6px; padding:5px 8px;
}


.pw-status{color:var(--muted); font-size:12px; white-space:nowrap; flex:none;}


.pw-status.ok{color:#059669; font-weight:700;}



/* ── 部屋メモのモーダル（清掃不要/依頼/備考） ── */
.room-modal{max-width:520px;}


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



/* 清掃レポート（現場清掃員からの報告：清掃状況・忘れ物・写真）。読み取り専用 */
.rm-lost-list{margin-top:6px; display:flex; flex-direction:column; gap:6px;}


/* 忘れ物はテキストだけ表示し、クリックすると写真が別ウィンドウで開く */
.rm-lost-item{
  cursor:pointer;
  background:#faf5ff; border:1px solid #c084fc; color:#6b21a8;
  padding:6px 9px; border-radius:6px; font-size:12.5px;
}


.rm-lost-item:hover{background:#f3e8ff;}


/* 清掃前・清掃後の写真は一覧を出さず、ボタンから別ウィンドウのギャラリーを開く */
.rm-photo-btns{margin-top:8px; display:flex; flex-wrap:wrap; gap:8px;}


/* 清掃レポート（report.css の .rp-btn）と同じ見た目にそろえてある。 */
.rm-photo-btn{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:3px 9px; border-radius:99px;
  font-family:inherit; font-size:11.5px; cursor:pointer; white-space:nowrap;
}


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


.rm-photo-btn.zero{color:var(--muted); border-style:dashed; cursor:default;}
.rm-photo-btn.zero:hover{border-color:var(--line); color:var(--muted);}


/* ── 追加対応依頼（清掃対象外） ──
   「＋ 追加対応依頼」ボタン（.add-req-row / .btn-add-req）とモーダルの
   入力欄は extramodal.css に移した（3画面で共有するため）。 */


/* 施設ブロックの中に置く「追加対応」の枠。清掃部屋と混ざらないよう枠で
   分けつつ、行き先は同じ施設なので同じブロックの中に置く
   （手配先の画面 vendor.css の .ex-block と同じ見た目にそろえる）。 */
.ex-block{
  margin-top:8px; border:1.5px dashed #d97706; border-radius:10px;
  background:#fffaf2; padding:8px 10px;
}


.ex-block-head{
  font-weight:800; font-size:11px; color:#b45309; margin-bottom:6px;
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}


.ex-block-head b{font-size:13px;}


.ex-block-note{font-weight:400; font-size:10px; color:var(--muted);}


/* 追加対応部屋のチップ。通常の部屋チップと同じ見た目（進捗ドット・部屋番号・
   フラグだけ）にそろえてある。依頼内容・対応者・返事・費用・現場からの
   報告はチップには出さず、クリックで開くモーダルの「対応レポート」で見せる
   （2026-08-22 ユーザー指摘。以前はここに全部並べていた）。 */
.room.extra{
  display:inline-flex; align-items:center; gap:7px; max-width:100%;
  border-color:#d97706; color:#b45309; background:#fff;
}


/* 追加対応チップの「誰に頼んだか＋その返事」（2026-09-07、ユーザー指示）。
   名前は**枠を付けずテキストのまま**にして、返事は印1文字（✓／✕／？）で
   出す。以前は「対応可能」「返事待ち」という文字のバッジ（.ex-badge）で
   出していたが、施設ブロックにはチップが横に並ぶので、その分だけチップが
   伸びて折り返しが増えていた。言葉での説明はツールチップに逃がしてある。

   色が付くのは**印だけ**。名前まで色を変えると、どちらが状態を表して
   いるのか分かりにくくなる。 */
.room.extra .ex-answer{
  display:inline-flex; align-items:center; gap:3px;
  font-size:11.5px; font-weight:700; color:var(--ink); white-space:nowrap;
  cursor:help;
}


.room.extra .ex-answer-mark{font-size:12.5px; line-height:1;}


.room.extra .ex-answer.ok   .ex-answer-mark{color:#047857;}


.room.extra .ex-answer.no   .ex-answer-mark{color:#b91c1c;}


.room.extra .ex-answer.wait .ex-answer-mark{color:#6b7280;}


/* 追加対応チップの「未配信」（施設も対応者も指定していない依頼。M05）。
   追加対応管理の表の「未配信」（report.css の .rp-dot-unsent / .rp-unsent）と
   同じドット＋文字で、色も同じ赤。返事の印（.ex-answer）と同じ位置・同じ
   文字の大きさに置く（対応者のいない依頼には返事の印が出ないのでぶつからない）。 */
.room.extra .ex-unsent{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11.5px; font-weight:700; color:#dc2626; white-space:nowrap;
  cursor:help;
}


.room.extra .ex-unsent-dot{width:8px; height:8px; border-radius:50%; background:#dc2626; flex:none;}


/* モーダルの入力欄（.ex-select）と「この施設に出ている追加対応依頼」の一覧
   （.ex-known*）は extramodal.css に移した（3画面で共有するため）。 */



/* ── ログイン画面（vendor.html と同じ作り）── */
.login-back{
  position:fixed; inset:0; background:#fff; display:none;
  align-items:center; justify-content:center; z-index:300; padding:20px;
}


.login-box .hint{color:var(--muted); font-size:12px; margin-bottom:12px; line-height:1.5;}