/*
 * APMFI – jQuery UI Selectmenu Overrides
 *
 * jQuery UI renders this structure:
 *
 * <span class="ui-selectmenu-button ui-button ui-widget ui-selectmenu-button-closed ui-corner-all">
 *   <span class="ui-icon ui-icon-triangle-1-s"></span>
 *   <span class="ui-selectmenu-text">Option label</span>
 * </span>
 * <div class="ui-selectmenu-menu ui-front ui-selectmenu-open">
 *   <ul class="ui-menu ui-widget ui-widget-content ui-selectmenu-menu-dropdown ui-corner-bottom">
 *     <li class="ui-menu-item">
 *       <div class="ui-menu-item-wrapper [ui-state-active]">Label</div>
 *     </li>
 *   </ul>
 * </div>
 */

/* ═══════════════════════════════════════════════════════════
   BUTTON (the visible trigger element)
═══════════════════════════════════════════════════════════ */
span.ui-selectmenu-button.ui-button {
    display:       inline-flex !important;
    align-items:   center !important;
    width:         100% !important;
    min-height:    42px;
    padding:       8px 12px !important;
    background:    #ffffff !important;
    border:        1.5px solid #dee2e6 !important;
    border-radius: 6px !important;
    box-shadow:    none !important;
    font-family:   inherit !important;
    font-size:     0.9rem !important;
    font-weight:   400 !important;
    color:         #2c2c2c !important;
    cursor:        pointer;
    transition:    border-color .2s ease, box-shadow .2s ease;
    box-sizing:    border-box !important;
    text-align:    left !important;
    /* Reset jQuery UI's own gradients/images */
    background-image: none !important;
}

span.ui-selectmenu-button.ui-button:hover {
    border-color: var(--color-primary) !important;
}

span.ui-selectmenu-button.ui-button:focus,
span.ui-selectmenu-button.ui-selectmenu-button-open {
    border-color: var(--color-primary) !important;
    box-shadow:   0 0 0 3px rgba(184, 0, 15, 0.15) !important;
    outline:      none !important;
}

/* ═══════════════════════════════════════════════════════════
   TEXT LABEL inside button
═══════════════════════════════════════════════════════════ */
span.ui-selectmenu-button .ui-selectmenu-text {
    flex:          1 1 auto !important;
    overflow:      hidden !important;
    white-space:   nowrap !important;
    text-overflow: ellipsis !important;
    line-height:   1.5 !important;
    padding:       0 !important;
    margin:        0 !important;
    border:        none !important;
    background:    transparent !important;
    font-size:     inherit !important;
    color:         inherit !important;
    display:       block !important;
}

/* ═══════════════════════════════════════════════════════════
   ARROW ICON
   Kill the jQuery UI background sprite, draw a pure-CSS chevron.
═══════════════════════════════════════════════════════════ */
span.ui-selectmenu-button .ui-icon {
    flex-shrink:      0 !important;
    width:            18px !important;
    height:           18px !important;
    min-width:        18px;
    margin-left:      8px !important;
    margin-top:       0 !important;
    background-image: none !important;   /* kill sprite */
    position:         relative !important;
    display:          inline-block !important;
}

span.ui-selectmenu-button .ui-icon::after {
    content:       '';
    position:      absolute;
    top:           3px;
    left:          3px;
    width:         8px;
    height:        8px;
    border-right:  2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform:     rotate(45deg);
    transition:    transform .2s ease, top .2s ease;
}

/* Rotate chevron when open */
span.ui-selectmenu-button.ui-selectmenu-button-open .ui-icon::after {
    transform: rotate(-135deg);
    top:       7px;
}

/* ═══════════════════════════════════════════════════════════
   DROPDOWN MENU
═══════════════════════════════════════════════════════════ */
.ui-selectmenu-menu {
    padding:  0 !important;
    z-index:  9999 !important;
}

.ui-selectmenu-menu .ui-menu {
    padding:          4px 0 !important;
    background:       #ffffff !important;
    border:           1.5px solid #dee2e6 !important;
    border-radius:    8px !important;
    box-shadow:       0 6px 24px rgba(0, 0, 0, 0.12) !important;
    font-size:        0.875rem !important;
    font-family:      inherit !important;
    overflow:         hidden;
    max-height:       280px;
    overflow-y:       auto;
    background-image: none !important;   /* kill jQuery UI gradient */
}

/* ═══════════════════════════════════════════════════════════
   MENU ITEMS
═══════════════════════════════════════════════════════════ */
.ui-selectmenu-menu .ui-menu-item {
    padding:    0 !important;
    margin:     0 !important;
    border:     none !important;
    background: transparent !important;
    float:      none !important;
}

.ui-selectmenu-menu .ui-menu-item-wrapper {
    display:          block !important;
    padding:          9px 16px !important;
    color:            #2c2c2c !important;
    font-weight:      400 !important;
    cursor:           pointer;
    border:           none !important;
    background:       transparent !important;
    background-image: none !important;
    margin:           0 !important;
    border-radius:    0 !important;
    transition:       background .12s, color .12s;
    line-height:      1.4;
}

/* Hover / keyboard focus */
.ui-selectmenu-menu .ui-menu-item-wrapper.ui-state-active,
.ui-selectmenu-menu .ui-menu-item-wrapper.ui-state-focus,
.ui-selectmenu-menu .ui-menu-item-wrapper:hover {
    color:            var(--color-primary) !important;
    background:       rgba(184, 0, 15, 0.07) !important;
    background-image: none !important;
    border:           none !important;
    margin:           0 !important;
}

/* ═══════════════════════════════════════════════════════════
   VALIDATION – _red border
═══════════════════════════════════════════════════════════ */
select.apmfi-selectmenu.is-invalid ~ span.ui-selectmenu-button,
span.ui-selectmenu-button.ui-state-error {
    border-color: var(--color-primary) !important;
    box-shadow:   0 0 0 3px rgba(220, 53, 69, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR inside dropdown (WebKit)
═══════════════════════════════════════════════════════════ */
.ui-selectmenu-menu .ui-menu::-webkit-scrollbar        { width: 5px; }
.ui-selectmenu-menu .ui-menu::-webkit-scrollbar-track  { background: #f1f1f1; }
.ui-selectmenu-menu .ui-menu::-webkit-scrollbar-thumb  { background: #ccc; border-radius: 4px; }
.ui-selectmenu-menu .ui-menu::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }