/* =========================================================================
 *  階層のあるドロップダウン（hier-select.js）— 全画面共通
 *
 *  素の <select> は option の字下げを描き分けられず、OS ごとに見た目も高さも
 *  変わる。実体は <select> のまま、見た目と操作だけをここで受け持つ。
 *
 *  portal-home.css（ホーム・管理・経理・個人設定）と
 *  forms/portal-forms.css（申請フォーム）はトークンだけを共有し、
 *  互いを読み込まない。**両方から使う部品なのでこのファイルに独立させている。**
 *  読み込む側で寸法を変えたいときは --hs-* を上書きする。
 * ========================================================================= */
.hs{position:relative;display:block}
/* 素の select は隠すが、DOM からは外さない（値と change の実体はこちら）。
   一覧の中の `.tbl select{width:100%}` などに負けないよう、指定を強くしてある。 */
.hs .hs-native{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 隣に並ぶ素の入力欄と同じ高さに見えるようにする。
   **高さは計算に頼らず --hs-h で明示する。** 同じ padding・同じ文字サイズでも、
   button と input と素の select は実際の高さが揃わない（内部の行の扱いが要素ごとに違う）。
   ボタンは中身を上下中央に置くので、height を決めれば文字位置もそろう。
   右側は三角のぶんだけ広げる（左の余白 ＋ 16px）。 */
.hs-btn{width:100%;text-align:left;font:inherit;line-height:1.6;
  color:var(--ink);background:#fff;cursor:pointer;
  border:1px solid var(--line);position:relative;
  height:var(--hs-h,36px);
  padding:0 calc(var(--hs-pad-l,10px) + 16px) 0 var(--hs-pad-l,10px);
  border-radius:var(--hs-radius,8px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-btn:after{content:"";position:absolute;right:var(--hs-pad-l,10px);top:50%;margin-top:-2px;
  border:4px solid transparent;border-top-color:var(--sub)}
.hs-btn:hover{border-color:#c9d6f5}
.hs-btn:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(31,94,255,.12)}
.hs-btn.ph{color:var(--sub)}
.hs-btn:disabled{background:#f4f6f9;color:var(--sub);cursor:default}
.hs-btn:disabled:hover{border-color:var(--line)}

/* 一覧のセルの中は入力欄を詰めてある（admin.css の `.tbl input`：6px/9px・13px）。
   ドロップダウンも同じにしないと、同じ行の中でこれだけ大きく見える。 */
.tbl{--hs-h:35px; --hs-pad-l:9px}
.tbl .hs-btn{font-size:13px}

/* 絞り込みバーの中では、ラベルと横並びにする。
   `.hs` は display:block なので、素の select（inline-block）を置き換えた時点で
   **ラベルの下に落ちて改行される**（経理コンソールの「種別」「状態」がそうなった）。
   ラベル自体を横並びの flex にして、元の「ラベル 入力欄」の並びに戻す。
   `.toolbar.f`（承認ルートのプレビュー）はラベルを上に出す作りなので対象外。 */
.toolbar:not(.f) label{display:flex;align-items:center;gap:6px;margin:0}
.toolbar .hs{flex:0 0 auto}
/* バーの中の入力欄は portal-home.css で 12.5px・padding 7px に詰めてある
   （高さ = 7+7＋行20＋枠2 = 36px）。`font:inherit`（14px）のままだと、
   隣の検索欄より文字が大きく背も高くなる。 */
.toolbar{--hs-h:36px}
.toolbar .hs-btn{font-size:12.5px}
/* 素の select と同じで、いちばん長い選択肢に合わせた幅を JS が min-width に入れる。
   入れないと選んだ内容で幅が変わり、バー全体が動く。 */

/* ポップアップは fixed で出す（.panel の overflow:hidden に切られないため）。
   z-index は画面の中で最も手前にある層より上にする
   — 申請フォームの確認モーダル 100／証憑プレビュー 200／管理画面のモーダル 50。 */
.hs-panel{position:fixed;z-index:2000;background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);max-height:290px;overflow:auto;padding:4px;min-width:180px}
.hs-opt{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;cursor:pointer;
  white-space:nowrap;line-height:1.5;color:var(--ink)}
.hs-opt .hs-g{color:var(--sub);opacity:.55}
.hs-opt .hs-l{overflow:hidden;text-overflow:ellipsis}
.hs-opt.on{background:var(--chip)}
.hs-opt.sel{font-weight:600}
.hs-opt.sel:after{content:"✓";margin-left:auto;padding-left:10px;color:var(--brand);font-weight:600}
.hs-opt.dis{color:var(--sub);cursor:default}

@media (max-width:720px){
  /* ツールバーの中では入力欄と同じ伸び方にする
     （.toolbar select,input への指定は、包んだあとの div には効かないため） */
  .toolbar .hs{flex:1 1 200px}
  /* 指で押せる高さを確保する（height を明示しているので min-height では効かない） */
  .hs-btn{height:40px}
  /* 指で選ぶので行を高くする */
  .hs-opt{padding-top:9px;padding-bottom:9px}
  .hs-panel{max-height:60vh}
}