/* SelectDropdown(#88) — 最大6行＋スクロールのカスタムドロップダウン。
   ホスト html は index.html のみ(SelectDropdown を載せるのは OperatorList/OperatorDetail の1文脈だけ、
   #88 設計 §6.1)。新窓で使う場合はその窓の html にも link を足すこと。 */

/* トリガ。ラベル(無名フレックスアイテムのテキストノード)を左、caret を右端に置く。 */
/* min-width: 0 が無いと flex コンテナ既定の min-width:auto でトリガの最小幅が中身の幅になり、
   表セル内では列そのものを押し広げる(width:100% は縮小方向を縛らない)。所属が増えるほど
   グループ列が伸び、横スクロールバーが出入りして、そのリサイズ通知が開いているポップアップを
   閉じていた(#363)。ラベル側の min-width:0 だけでは足りず、トリガ自身にも要る。 */
.dd-trigger {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 3px 6px 3px 9px;
    background: var(--input);
    border: 1px solid var(--btn-line);
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    color: var(--text);
    font-family: var(--font-sans);
    cursor: pointer;
}

/* 他のボタンと違い面は --input のまま(入力欄に見えることが仕様)。hover は枠と caret で返す。 */
.dd-trigger:hover { border-color: var(--btn-hover-line); }

/* caret: ネイティブ <select> が持っていた「開くコントロールである」ことの唯一の視覚的手がかり。
   これが無いと入力欄と見分けが付かない。 */
.dd-trigger::after {
    content: "";
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid var(--dim);
}
.dd-trigger:hover::after { border-top-color: var(--mute2); }

.dd-trigger:disabled { opacity: .5; cursor: default; }
.dd-trigger.op-group-select { font-size: 12px; }
.dd-trigger.op-meta-select  { font-size: 13px; padding: 4px 8px; flex: 0 0 auto; width: 120px; }
/* 詳細のグループトリガ専用(issue #362)。.op-meta-select(訓練室スキル選択と共用)を広げると同特異度の
   後勝ちで訓練室側まで巻き込む(#226/#234)ため独立クラスにする。 */
/* 一覧・詳細ともトリガは記号のみで枠固定＋省略(#363)。詳細の全文(名前つき)は直下のバッジ列
   (.op-group-badges)が持つ — トリガ内に全文を入れると所属数でボタンの高さが変わる。
   幅は潜在/信頼度のステッパー(106px)にそろえる。 */
.dd-trigger.op-group-meta-select { font-size: 13px; padding: 4px 8px; flex: 0 0 auto; width: 106px; }

/* 詳細の目標選択トリガ(issue #404)。列見出しの位置をそのまま使うので、幅も左オフセットも
   目標列(.num-stepper.tgt)と同値にする(--tgt-col-offset は operator-detail.css が持つ)。 */
.dd-trigger.op-plan-select { font-size: 12px; padding: 2px 6px; flex: 0 0 auto; width: 106px; justify-content: center; margin-left: var(--tgt-col-offset); }

/* backdrop — .ecell-backdrop と同流儀。z-index は ecell 帯(4/6)より上。
   要素は <button type="button" tabindex="-1" aria-hidden="true">(#88 設計 §12.3 の実測) — <div> だと
   <label> 内でラベル活性化がトリガへ再転送され「閉じて即再オープン」する。button 既定の見た目を消す。 */
.dd-backdrop {
    position: fixed;
    inset: 0;
    z-index: 8;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: default;
}

/* ポップアップ — top/left/width/height は C# が inline style で与える(#88 設計 §2.3/§3)。
   position:absolute へ戻さないこと(#169/PR#171) の最右列自滅ループが再生産される — margin-right/右 outline/
   横 transform も足さない。 */
.dd-popup {
    position: fixed;
    z-index: 9;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--panel2);
    border: 1px solid var(--line2);
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

/* item も <button type="button">(#88 設計 §12.3)。button 既定のスタイルを打ち消す。
   高さは C# が inline style で出力する --dd-item-h の単一情報源を消費する(px を直書きしない)。 */
/* padding-left は .dd-trigger と揃える(ポップアップは trigger と左端が一致するため、
   ずらすと開いた瞬間にラベルが横に飛んで見える)。 */
.dd-item {
    height: var(--dd-item-h);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    white-space: nowrap;
    cursor: pointer;
    color: var(--text);
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    font-family: var(--font-sans);
    font-size: inherit;
}
.dd-item:hover, .dd-item.dd-hl { background: var(--accent-soft); }
/* 選択中の項目は文字を --text3 の太字にし、左の accent バーで示す。文字色を --accent にはしない —
   ライト系テーマでは --panel2 / --accent-soft の上で 4.5:1 を割る(#695)。塗りは足さない — 単一選択では
   --accent-soft がキーボードハイライト(.dd-hl)の表示で、選択にも塗ると両者が同一表示になる。 */
.dd-item.dd-sel { color: var(--text3); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }

/* 多重選択モード(issue #363)の行はフィルタのリスト行(.flt-list-row)と同じ角を持つ。
   行高・余白・字の大きさは合わせない(行高は DropdownMetrics.ItemHeightPx が単一情報源で、
   変えると配置計算を通じて全ドロップダウンに及ぶ)。 */
.dd-popup.dd-multi .dd-item {
    border-radius: var(--bevel-control);
    corner-shape: bevel;
}

/* 多重モードのキーボードハイライトは塗らず枠で示す。単一選択は項目クリックで即閉じるので
   ハイライトが残らないが、多重モードは開いたままなので、選択と同じ --accent-soft を塗ると
   「選択を外した行にハイライトだけ残って選択済みに見える」状態が残留する。hover は
   ポインタ追従で消えるため塗りのままでよい。 */
.dd-popup.dd-multi .dd-item.dd-hl {
    outline: 1px solid var(--accent);
    outline-offset: -1px;
}

/* 塗りを落とすのは「選択でない・hover でもない」ハイライト行だけ — 選択行のハイライトから
   塗りを奪うと、選択の識別子(バー+塗り)が欠けた行が1つだけ現れる。 */
.dd-popup.dd-multi .dd-item.dd-hl:not(.dd-sel):not(:hover) {
    background: transparent;
}

/* 選択表示も .flt-list-row.is-selected と同じ語彙。左の accent バーが選択の識別子 —
   hover/ハイライトが同じ --accent-soft 背景を使うため、背景だけでは hover と選択が
   同一表示になる。バーを外さないこと。 */
.dd-popup.dd-multi .dd-item.dd-sel {
    color: var(--text3);
    font-weight: 600;
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--accent);
}

/* ラベルは長い名前(issue #362)でクリップされず ellipsis で吸収する。.dd-popup は overflow-x:hidden
   ゆえ、これが無いと無言でクリップされる。トリガの匿名フレックスアイテムは ellipsis が効かないため
   トリガ側にも同クラスを使う(3 consumer 全てに効くが flex レイアウトの見た目は不変)。 */
.dd-item-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* リネーム鉛筆(issue #362)。<span aria-hidden="true"> — APG select-only combobox 準拠で interactive
   content を role="option" 内に置かない(設計 §3.4)。mousedown は .dd-item の子孫のため dropdown.js の
   ガードで抑止されたまま(押した瞬間はトリガにフォーカスが残る、初期フォーカスは FocusAsync で付与)。 */
.dd-edit-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--bevel-control);
    color: var(--mute2);
    cursor: pointer;
}
.dd-edit-btn:hover { color: var(--text); background: var(--btn-hover-bg); }

/* 編集行。.dd-item の外(.dd-popup 直下)に描画するため .dd-item の high-specificity は継承しない —
   高さ/フォントは揃える(issue #362 設計 §3.3)。 */
.dd-item-editing {
    height: var(--dd-item-h);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    font-family: var(--font-sans);
    font-size: inherit;
}
.dd-edit-key { flex: 0 0 auto; color: var(--dim); }
.dd-edit-input {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--input);
    border: 1px solid var(--btn-line);
    border-radius: var(--bevel-control);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: inherit;
    padding: 2px 6px;
}