/* 「打ち込んで絞って選ぶ」欄（コンボボックス）の見た目。
 *
 * このアプリで**同じ見た目を何箇所でも使い回している部品**なので、
 * 1つのファイルにまとめてある。元は extramodal.css と staff-admin.css に
 * 同じ指定が2つあり、片方だけ直すと見た目がずれる状態だった
 * （2026-08-31 に1つへ統合。ユーザー指示「重複使用できるデザインは
 * モジュール化で使いたい。未来修正などやりやすいから」）。
 *
 * **見た目を変えるときはここだけを直す。** 使っているところ：
 *   lib/searchbar.js       検索条件バーの施設・部屋・清掃担当ほか（5画面）
 *   lib/extramodal.js      追加対応依頼の施設・対応者（3画面）
 *   dashboard/settings.js  設定モーダルの担当施設
 *   staffadmin/view.js     自社清掃員管理の担当施設・清掃応援可能施設
 *
 * HTML はこの形にそろえる（振る舞いは lib/combobox.js）:
 *   <div class="prop-search-wrap">
 *     <input class="prop-search" ...>
 *     <div class="prop-search-results">
 *       <div class="prop-opt">
 *         <span class="p-kind">清掃員</span>   ← 種別の印（任意）
 *         <span class="code">R012</span>       ← 補足（任意。等幅で薄く出す）
 *         名前
 *       </div>
 *     </div>
 *   </div>
 *
 * 候補が空のときは .prop-search-results:empty で箱ごと消えるので、
 * 閉じるときは中身を空にするだけでよい。 */

.prop-search-wrap{position:relative; flex:1; min-width:200px;}


.prop-search{
  width:100%; box-sizing:border-box; font-family:inherit; font-size:12px; padding:5px 8px;
  border:1px solid var(--line); border-radius:6px;
}


.prop-search-results{
  position:absolute; top:100%; left:0; right:0; margin-top:4px; z-index:20;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.14); max-height:220px; overflow-y:auto;
}


.prop-search-results:empty{display:none;}


.prop-opt{
  padding:7px 10px; font-size:12px; cursor:pointer; display:flex; gap:8px; align-items:center;
}


.prop-opt:hover{background:var(--red-tint);}


.prop-opt .code{font-family:var(--font-mono); color:var(--muted); flex:none;}


.prop-opt.none{color:var(--muted); cursor:default;}


.prop-opt.none:hover{background:none;}


/* 候補につける種別の印（清掃員／清掃会社など）。追加対応依頼では、
   どちらを指名したかで承認する場所が変わる（清掃員本人か、会社の管理画面か）
   ので、選ぶ時点で見分けられるようにするために足したもの。
   検索条件バーの「清掃担当」も同じ理由で使っている。 */
.prop-opt .p-kind{
  flex:none; font-size:10px; font-weight:700; padding:1px 6px; border-radius:99px;
  background:#eef2ff; color:#4338ca;
}


.prop-opt .p-kind.co{background:#fff7ed; color:#b45309;}