/**
 * Mod Loader Build Picker — Static checkout overrides.
 *
 * Kept in sync with the Dashboard copy at
 * web/src/RevelationHosting.Web.Dashboard/wwwroot/Content/Dashboard/mod-loader-build-picker.css
 * minus the html.dark-theme rules — the checkout page is always light-themed.
 *
 * Two concerns:
 *   1. Text clipping: Choices.js default CSS wraps long option labels and
 *      clips the second line inside a fixed-height inner container. Fix with
 *      white-space: nowrap + text-overflow: ellipsis.
 *   2. Build row badges: formatLabel() emits an inline HTML label with a
 *      right-aligned badge ("Latest Stable" green pill or "beta" amber pill
 *      with warning icon). Style the flex layout + pill appearance.
 */

/* ============================================================
   UNIVERSAL: text clipping + closed-state layout
   ============================================================ */

.choices[data-type*="select-one"] .choices__inner {
    min-height: 38px;
    padding: 8px 30px 8px 12px;
    display: flex;
    align-items: center;
}

.choices[data-type*="select-one"] .choices__list--single {
    padding: 0;
    width: 100%;
    overflow: hidden;
}

.choices[data-type*="select-one"] .choices__list--single .choices__item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    line-height: 1.4;
}

.choices__list--dropdown .choices__item--selectable,
.choices__list[aria-expanded] .choices__item--selectable {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 12px;
    line-height: 1.4;
}

.choices__input {
    padding: 8px 12px;
    margin-bottom: 0;
}

/* ============================================================
   BUILD ROW LAYOUT: name on the left, badge pinned to the right
   ============================================================ */

.rh-build-label-row {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.rh-build-label-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rh-build-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.4;
}

.rh-build-badge .mdi {
    font-size: 13px;
    line-height: 1;
}

.rh-build-badge-latest {
    background-color: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.35);
}

.rh-build-badge-beta {
    background-color: rgba(247, 183, 49, 0.18);
    color: #c58a00;
    border: 1px solid rgba(247, 183, 49, 0.45);
}

.rh-build-badge-current {
    background-color: rgba(108, 117, 125, 0.15);
    color: #6c757d;
    border: 1px solid rgba(108, 117, 125, 0.4);
}