/**
 * 「指名なし」行を Amelia v3 の施術者行（.am-oit）と同じ寸法・色・字重に揃える
 * 参照: .am-select-popper .am-oit__data-label（font-size:16px; font-weight:500）
 */

/* =============================================================
   指名なし選択中オーバーレイ
   El-Plus wrapper: padding:4px 12px / suffix: gap:6px + caret ~16px
   → selection 部分は wrapper_left...(wrapper_width - 34px) まで
   → overlay は selection 部分にだけ被せ suffix(矢印)を露出させる
   ✕ ボタンは suffix 上に absolute で重ねる
============================================================= */

/* El-Plus が既に設定しているが保険として */
.el-select.asp-np-active .el-select__wrapper {
    position: relative;
}

/*
 * テキストラベル: selection 部分のみ白背景で覆う
 *
 * ★ specificity 問題の回避 ★
 * Amelia CSS には次のリセット規則がある（stepForm.*.css）:
 *   .amelia-v2-booking #amelia-container span { font: inherit; padding: 0; margin: 0; ... }
 * これは ID セレクタを含み specificity = (1,1,1) のため、
 * 単純な .asp-np-overlay { padding/font-weight } は完全に上書きされる。
 *
 * 対策: #amelia-container を含むより高い specificity (1,5,0) のセレクタで上書き。
 * さらに !important を主要プロパティに付与して確実に適用させる。
 */
.amelia-v2-booking #amelia-container .el-select.asp-np-active .el-select__wrapper > .asp-np-overlay {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 36px !important; /* suffix 幅(~34px) + 余裕2px */
    display: flex !important;
    align-items: center !important;
    /* wrapper の padding-left (12px) に合わせてテキスト位置を揃える */
    padding: 0 4px 0 12px !important;
    /*
     * Amelia リセット font:inherit を打ち消す。
     * Amelia は選択値テキストに独自 CSS 変数を使う:
     *   .am-select .el-select__selected-item.el-select__placeholder span {
     *       font-size: var(--am-fs-select) !important;  = 15px
     *       color: var(--am-c-select-text) !important;   = var(--am-c-inp-text) = #1A2C37
     *   }
     * El-Plus デフォルト (14px / #606266) ではなく Amelia 変数に合わせる。
     */
    font-size: var(--am-fs-select, var(--am-fs-inp, 15px)) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-variant: normal !important;
    line-height: 1.6 !important;
    color: var(--am-c-select-text, var(--am-c-inp-text, #1A2C37)) !important;
    pointer-events: none !important; /* クリックを wrapper に通過させてドロップダウンを開く */
    z-index: 2 !important;
    background-color: var(--el-fill-color-blank, #ffffff) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-radius: var(--el-border-radius-base, 4px) !important;
    /* Amelia リセット margin/border を打ち消す */
    margin: 0 !important;
    border: 0 !important;
    vertical-align: baseline !important;
}

/*
 * ✕ クリアボタン（<i class="el-icon icon-circle-close asp-np-clear">）
 *
 * El-Plus と完全に同じ <i class="el-icon"> 構造を使用するため、
 * .el-icon の CSS が自動的に適用される:
 *   fill: currentColor;       ← SVG パスの塗りつぶしを color に連動
 *   width: 1em; height: 1em;  ← font-size でアイコンサイズ制御
 *   display: inline-flex;     ← 中央揃え
 *
 * ここでは「位置」「表示/非表示」「サイズ・色」のみ補足する。
 * Amelia のデフォルト:
 *   .am-select .el-select__suffix .el-icon { font-size: 18px; color: var(--am-c-select-text) }
 * と同じ変数を使用。
 */
.amelia-v2-booking #amelia-container .el-select__wrapper > .asp-np-clear {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    /* opacity で表示制御。通常は非表示 */
    opacity: 0 !important;
    pointer-events: none !important;
    /* Amelia suffix アイコンと同一のサイズ・色 */
    font-size: 18px !important;
    color: var(--am-c-select-text, var(--am-c-inp-text, #1A2C37)) !important;
    cursor: pointer !important;
    z-index: 3 !important;
    transition: opacity 0.15s ease, color var(--el-transition-duration, 0.3s) !important;
}

/* ✕ ホバー時に表示 */
.amelia-v2-booking #amelia-container .el-select__wrapper:hover > .asp-np-clear {
    opacity: 1 !important;
    pointer-events: all !important;
}

/* ✕ 自体のホバー: デフォルトと同じ icon-circle-close:hover ルール適用 */
.amelia-v2-booking #amelia-container .asp-np-clear:hover {
    color: var(--el-input-clear-hover-color, var(--el-text-color-secondary, #909399)) !important;
}

/* ✕ 表示中は矢印アイコンを隠す（El-Plus の clearable と同じ） */
.el-select.asp-np-active .el-select__wrapper:hover .el-select__caret {
    visibility: hidden;
}

/* =============================================================
   サイドバー: 「スタッフ 指名なし」がある間、Vue のスタッフ行を隠す

   .asp-np-step-sel は JS が追加/削除する自前要素。
   :has() により .asp-np-step-sel が存在する間だけ Vue のスタッフ行を
   自動非表示にする。JS は Vue の DOM に一切触れないので、
   Vue のリアクティブ描画が壊れない。

   構造:
     <span class="am-fs-sb__step-selection__wrapper">
       <p class="am-fs-sb__step-selection">サービス名</p>    ← 1番目: 残す
       <p class="am-fs-sb__step-selection">スタッフ 担当者</p> ← 2番目以降: 隠す
       <p class="am-fs-sb__step-selection asp-np-step-sel">スタッフ 指名なし</p>
     </span>
============================================================= */
.am-fs-sb__step-selection__wrapper:has(.asp-np-step-sel) > p.am-fs-sb__step-selection:not(.asp-np-step-sel):nth-child(n+2) {
    display: none !important;
}

/* =============================================================
   ドロップダウン内「指名なし」行 — Amelia v3 am-oit 構造に合わせる
   実施術者行: .el-select-dropdown__item > .am-oit > .am-oit__img + .am-oit__content
   参照 CSS: .am-oit__img { width:36px; height:36px; margin-right:8px }
             .am-oit__data-label { font-size:16px; font-weight:500 }
============================================================= */

.el-select-dropdown__item.asp-np-option .am-oit {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    font-size: var(--el-font-size-medium, 16px);
    line-height: 1.25;
    font-weight: var(--el-font-weight-primary, 500);
}

/* 選択中: El-Plus is-selected と同じ 700 */
.el-select-dropdown__item.asp-np-option.is-selected .am-oit {
    font-weight: 700;
}

.el-select-dropdown__item.asp-np-option .am-oit__img {
    display: flex;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-right: 8px;
}

.el-select-dropdown__item.asp-np-option .am-oit__img-placeholder.asp-np-option__avatar {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #00a32a !important;
    background-image: none !important;
    overflow: hidden;
}

.el-select-dropdown__item.asp-np-option .am-oit__img-placeholder.asp-np-option__avatar span {
    display: block;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    text-indent: 0 !important;
    overflow: hidden !important;
}

.el-select-dropdown__item.asp-np-option .am-oit__info {
    flex: 1;
    min-width: 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

.el-select-dropdown__item.asp-np-option .asp-np-option__name {
    flex: 1;
    min-width: 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    color: inherit;
}

/* am-oit が無いテーマ用フォールバック */
.el-select-dropdown__item.asp-np-option .asp-np-option__inner {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    font-size: var(--el-font-size-medium, 16px);
    line-height: inherit;
    font-weight: var(--el-font-weight-primary, 500);
}

.el-select-dropdown__item.asp-np-option.is-selected .asp-np-option__inner {
    font-weight: 700;
}

.el-select-dropdown__item.asp-np-option .asp-np-option__avatar-fallback {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #00a32a;
}

.el-select-dropdown__item.asp-np-option .asp-np-option__label {
    flex: 1;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    color: inherit;
}