/* 追加対応依頼の作成モーダルと、そこで使う検索欄の見た目。
 *
 * ダッシュボード・自社清掃手配（vendor.html）・戸建て清掃手配（house.html）の
 * 3画面が同じモーダルを出すので、dashboard.css から独立させてある
 * （元は dashboard.css だけにあった）。
 *
 * **各ページの CSS より後に読み込むこと。** dashboard.css / vendor.css /
 * house.css は `.modal` `.modal-back` を自前で持っていて、同じ詳細度なら
 * 後勝ちになる。このファイルが後ろにあることで、モーダル固有の指定
 * （`.modal.extra-modal` の幅など）が確実に効く。
 * 詳しくは docs/spec/screen-report.md「写真の見せ方」の同じハマりどころ。 */

/* 依頼モーダル本体。`.modal` を上書きするので必ず2クラスで書く。 */
.modal.extra-modal{max-width:520px;}


/* 施設・対応者の「検索して選ぶ」欄（`.prop-search` 系）は
   **css/combobox.css に移した**（2026-08-31）。同じ指定が staff-admin.css にも
   あって二重管理になっていたため。このモーダルを出す画面は combobox.css も
   読み込むこと。 */


/* ── 「＋ 追加対応依頼」ボタン ── */
.add-req-row{margin-bottom:16px;}


.btn-add-req{
  border:1.5px dashed #d97706; background:#fff; color:#b45309;
  border-radius:8px; padding:8px 14px; font-family:inherit; font-size:13px;
  font-weight:700; cursor:pointer;
}


.btn-add-req:hover{background:#fffaf2;}


/* ── モーダルの入力欄 ──
   .ex-select は <select>（施設・部屋）と <input type="date">（日付）の
   両方に付くクラス。矢印ぶんの右余白は select だけに要るので、
   select.ex-select として別に上書きする（date input には矢印を出さない）。 */
.ex-select{
  width:100%; border:1px solid var(--line); border-radius:6px;
  padding:8px 10px; font-family:inherit; font-size:13px;
}


select.ex-select{padding-right:28px;}


/* 検索欄と「指定しない」ボタンを横に並べる行。
   「指定しない」は**未選択とは別の状態**として持つので（空のまま保存する
   事故を防ぐため）、押した状態が分かる見た目にする。
   下の .ex-row（手配先タブの依頼カード）とは別物なので名前を分けてある。 */
.ex-inline{display:flex; gap:8px; align-items:flex-start;}


.ex-optbtn{
  flex:none; border:1px solid var(--line); background:#fff; color:var(--muted);
  border-radius:6px; padding:5px 10px; font-family:inherit; font-size:12px; cursor:pointer;
}


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


.ex-optbtn.on{border-color:#d97706; background:#fffaf2; color:#b45309; font-weight:700;}


/* 新規作成の部屋番号（複数追加）。「部屋を選んで追加」の<select>で1つずつ
   足し、足した部屋はこの下にタグで並べる（2026-09-05。全部屋を並べて押して
   選ぶチップ形式は、部屋数が多い施設で選択肢が埋もれるためドロップダウン＋
   タグ方式に作り直した）。 */
.ex-room-added{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}


.ex-room-tag{
  display:flex; align-items:center; gap:6px;
  border:1px solid #d98e33; background:#fffaf2; color:#b45309;
  border-radius:6px; padding:5px 6px 5px 10px; font-size:12.5px; font-weight:700;
  font-variant-numeric:tabular-nums;
}


.ex-room-tag button{
  border:none; background:none; color:#b45309; cursor:pointer;
  font-family:inherit; font-size:15px; line-height:1; padding:0 2px; opacity:.7;
}


.ex-room-tag button:hover{color:var(--red); opacity:1;}


/* 複数部屋の案件の「対応レポート」（2026-09-07、ユーザー指示）。
   現場は部屋ごとに報告するので、部屋・対応状況・写真を1行ずつ並べる。
   返事（対応者・引き受け）は案件に1つなので、この上に1回だけ出す。 */
.ex-rep-list{display:flex; flex-direction:column; gap:6px; margin-top:8px;}


.ex-rep-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:#fbfbfb;
}


.ex-rep-room{
  flex:none; min-width:52px; font-weight:800; font-size:13px;
  font-variant-numeric:tabular-nums;
}


/* 対応状況。清掃レポート・追加対応管理と同じ色の意味にそろえる
   （灰＝未着手／橙＝対応中／緑＝完了）。 */
.ex-rep-st{
  flex:none; padding:1px 8px; border-radius:99px; font-size:12px; font-weight:700;
  background:#ededed; color:#5f5f5f;
}


.ex-rep-st.s-doing{background:#fff3e0; color:#a35a00;}


.ex-rep-st.s-done{background:#e7f6f0; color:#047857;}


.ex-rep-text{flex:1; min-width:0; font-size:12.5px; color:var(--ink);}


/* 対応費用。任意なので、必須の欄と区別できるよう控えめに置く。 */
.ex-fee-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}


.ex-fee{
  width:140px; border:1px solid var(--line); border-radius:6px;
  padding:8px 10px; font-family:inherit; font-size:13px;
  font-variant-numeric:tabular-nums;
}


.ex-fee-note{
  flex:1; min-width:180px; box-sizing:border-box;
  border:1px solid var(--line); border-radius:6px;
  padding:8px 10px; font-family:inherit; font-size:13px;
}


.ex-fee-yen{color:var(--muted); font-size:13px;}


/* 選んだ対応者の表示（検索欄の下に出す）。 */
.ex-picked{
  display:flex; align-items:center; gap:8px; margin-top:6px;
  padding:6px 9px; border:1px solid #d98e33; border-radius:6px;
  background:#fffaf2; font-size:12.5px;
}


.ex-picked b{color:#b45309;}


.ex-picked .ex-picked-clear{
  margin-left:auto; border:none; background:none; color:var(--muted);
  cursor:pointer; font-family:inherit; font-size:16px; line-height:1; padding:0 2px;
}


.ex-picked .ex-picked-clear:hover{color:var(--red);}


/* ── モーダルの「この施設に出ている追加対応依頼」 ──
   重複依頼を防ぐための読み取り専用の一覧。件数が増えても画面が伸び
   すぎないよう、高さを決めて中でスクロールさせる。 */
.ex-known{max-height:150px; overflow-y:auto;}


.ex-known-item{
  display:flex; align-items:baseline; gap:8px; padding:5px 7px;
  border:1px solid var(--line); border-radius:6px; background:#fff;
  margin-bottom:4px; font-size:12px;
}


.ex-known-item:last-child{margin-bottom:0;}


/* 今選んでいる部屋にすでに出ている依頼。重複の可能性が高いので目立たせる */
.ex-known-item.same{border-color:#d97706; background:#fffaf2;}


.ex-known-date{font-family:var(--font-mono); font-size:11px; color:var(--muted); white-space:nowrap;}


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


/* overflow-wrap/word-break が無いと、スペースの無い長い文字列
   （英数字の連続など）が折り返せず横に飛び出す（2026-08-22 ユーザー指摘）。 */
.ex-known-text{
  flex:1; color:var(--ink); white-space:pre-wrap; min-width:0;
  overflow-wrap:anywhere; word-break:break-word;
}


/* ── 依頼チップに出す対応者・承認状況・費用のバッジ ──
   ダッシュボード・手配先・戸建ての3画面で同じ見た目にする。 */
.ex-badge{
  flex:none; font-size:10px; font-weight:700; padding:1px 6px; border-radius:99px;
  border:1px solid transparent; white-space:nowrap;
}


/* 未回答。急かす色にはしない（返事待ちは異常ではない）。 */
.ex-badge.wait{background:#f3f4f6; color:#4b5563; border-color:#9ca3af;}


.ex-badge.ok{background:#ecfdf5; color:#047857; border-color:#10b981;}


/* 辞退。振り直しが要るので、ここだけは目立たせる。 */
.ex-badge.no{background:#fef2f2; color:#b91c1c; border-color:#f87171;}


.ex-badge.fee{background:#fffbeb; color:#b45309; border-color:#f59e0b;}


.ex-badge.who{background:#eef2ff; color:#4338ca; border-color:#818cf8;}


/* ── 手配先画面の「追加対応」タブ ──
   今日以降の依頼を日付ごとにまとめて出す一覧（vendor/view.js）。
   今日・明日タブの施設ブロックとは別物で、ここだけが会社としての
   「対応する／しない」を返す場所。 */
.ex-tab{display:flex; flex-direction:column; gap:14px;}


.ex-day-head{
  font-weight:800; font-size:13px; margin-bottom:6px;
  display:flex; align-items:baseline; gap:8px;
}


.ex-day-n{font-weight:700; font-size:11px; color:var(--muted);}


.ex-row{
  border:1px solid var(--line); border-radius:8px; background:#fff;
  padding:10px 12px; margin-bottom:6px;
}


/* 依頼内容。既定は1行に丸め、押すと全文を出す（長い依頼で一覧が
   読めなくなるのを防ぐ）。ボタンだが見た目は本文のまま。 */
.ex-row-text{
  display:flex; align-items:flex-start; gap:6px; width:100%;
  border:none; background:none; padding:0; margin:0; text-align:left;
  font-family:inherit; font-size:13px; line-height:1.6; color:var(--ink);
  cursor:pointer;
}


.ex-row-chev{flex:none; color:var(--muted); font-size:10px; line-height:1.9;}


/* 閉じているときだけ1行に丸める。開いたら改行をそのまま出す。 */
.ex-row-body{
  flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}


.ex-row-text.open .ex-row-body{overflow:visible; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word;}


.ex-row-text:hover .ex-row-body{color:var(--red);}


.ex-row-note{font-size:12px; color:var(--muted); margin-top:4px;}


.ex-act{display:flex; gap:8px; justify-content:flex-end; align-items:center; margin-top:8px;}


.ex-ok{
  border:1px solid #059669; background:#059669; color:#fff;
  padding:5px 16px; border-radius:99px;
  font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
}


.ex-ok:hover:not(:disabled){background:#047857;}


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


.ex-no:hover:not(:disabled){border-color:var(--red); color:var(--red);}


.ex-no:disabled{opacity:.5; cursor:default;}


.ex-answered{font-size:12.5px; font-weight:700; color:#047857; margin-right:auto;}


.ex-redo{
  border:1px solid var(--line); background:#fff; color:var(--muted);
  padding:4px 12px; border-radius:99px;
  font-family:inherit; font-size:12px; cursor:pointer;
}


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


/* 現場からの報告のバッジ（完了・対応中・写真・立替・詳細）。
   清掃部屋の進捗と同じ色づかいにそろえる。 */
.ex-badge.done{background:#ecfdf5; color:#047857; border-color:#10b981;}


.ex-badge.doing{background:#eff6ff; color:#1d4ed8; border-color:#60a5fa;}


.ex-badge.shot{background:#f5f3ff; color:#6d28d9; border-color:#a78bfa;}


.ex-badge.note{background:#f9fafb; color:#4b5563; border-color:#9ca3af; cursor:help;}


/* 対応が始まった依頼の対応費用（2026-09-26）。金額は変えられないので
   灰色にし、理由を添える（メモは今までどおり直せる）。 */
.ex-fee:disabled{background:#f6f6f7; color:var(--muted); cursor:not-allowed;}


.ex-fee-locked{color:var(--red);}


#extraDelBtn:disabled{opacity:.45; cursor:not-allowed;}


/* 複数の部屋をまとめて送っている間（C14。lib/extramodal.js の beginSending）。
   送り終わるまでモーダルを閉じずに待つので、中の欄は薄くして触れないことを
   見せ（inert で実際にも触れない）、ボタンは「送信中 2/5」の保存ボタン以外を
   薄くする。保存ボタンは進み具合を読ませるため薄くしない。 */
#extraBack.ex-sending .modal-body{opacity:.6;}


#extraBack.ex-sending .modal-foot .btn:disabled,
#extraBack.ex-sending .modal-head .close:disabled{opacity:.45; cursor:progress;}


#extraBack.ex-sending #extraSaveBtn:disabled{opacity:1; cursor:progress;}