/**
 * VMT Mentor Picker — native dropdown + conditional search input
 * (v1.10.6 UX restore).
 *
 * Historical context:
 *   - 1.10.2 → 1.10.5 shipped async-search-only styles (results-dropdown
 *     UL, selected-pill, clear-X, avatars in result rows).
 *   - 1.10.6 reverted to a native <select> with a conditional filter
 *     input above when count >= 25. Most of the original styles became
 *     dead code and were removed; this file is now ~30% the size of
 *     the 1.10.5 version.
 *
 * Layout is a single column: optional filter <select> on top (Attendees
 * picker only), then optional search <input>, then the primary <select>.
 * No flex container needed — block-level stack matches how the legacy
 * pre-1.10.4 picker rendered (Roger's canonical reference).
 *
 * Scoped under .vmt-mentor-picker so styles don't bleed into other
 * admin surfaces.
 */

.vmt-mentor-picker {
    display: block;
}

/* "Completed prerequisites" toggle (Attendees picker only) */
.vmt-mentor-picker__filter {
    display: block;
    width: 100%;
    max-width: 360px;
    margin-bottom: 6px;
    font-size: 13px;
}

/* Conditional search input — only present when count >= 25.
 * Sits ABOVE the <select>. Width matches the dropdown for a clean
 * stacked look. */
.vmt-mentor-picker__search {
    display: block;
    width: 100%;
    max-width: 360px;
    margin-bottom: 4px;
}

/* Primary <select> — the native dropdown is the canonical interface.
 * Native height (~28px) + native chevron stays; we just constrain
 * width so very long mentor names don't blow out the page layout. */
.vmt-mentor-picker__select {
    display: block;
    width: 100%;
    max-width: 360px;
}

/* Empty-state message when the role_filter returns zero candidates
 * (e.g. a workshop with no approved facilitators yet). */
.vmt-mentor-picker__empty {
    margin: 6px 0 0 0;
    color: #646970;
    font-style: italic;
    font-size: 12px;
}

/* ─────────────────────────────────────────────────────────────────────
 * v1.13.0 — Select2 variant (Manage Mentors only)
 *
 * Activates when the picker container carries the
 * .vmt-mentor-picker--select2 modifier. UM's bundled Select2 default
 * styling carries most of the visual treatment; what's here:
 *   - widens the dropdown to match the native variant's 360px
 *   - styles the two-line result row format (name primary + email
 *     secondary in lower-emphasis grey)
 *   - matches the admin chrome font-family / border-radius so it
 *     doesn't look like an alien widget bolted onto the page
 *
 * Scoped under .vmt-mentor-picker--select2 so other Select2 instances
 * on the same admin page (UM profile fields, etc.) are unaffected.
 * ───────────────────────────────────────────────────────────────────── */

.vmt-mentor-picker--select2 .select2-container {
    /* Constrain to match the native picker width so admin layout
       stays predictable. */
    max-width: 360px;
    width: 100% !important; /* override Select2 inline width */
}

.vmt-mentor-picker--select2 .select2-container--default .select2-selection--single {
    /* Match WP admin's standard input height (~30px) instead of
       Select2 default 28px. */
    height: 30px;
    border-color: #8c8f94;
    border-radius: 4px;
}

.vmt-mentor-picker--select2 .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px;
}

.vmt-mentor-picker--select2 .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 28px;
}

/* Two-line row format for results (and the focused / hovered row).
 *
 * v1.14.0: layout switched from a single column flex to a horizontal
 * flex with a __main vertical-stack on the left + an optional __pills
 * cluster on the right. Pills are only rendered when option_meta opts
 * the picker into them (Attendees prereq state, Facilitator/Co-fac
 * override "Approved"/"Certified" hint, Unlock Codes role label).
 * Rows without pills look identical to the 1.13.0 layout because
 * .vmt-mp-row__pills doesn't render at all when empty.
 */
.vmt-mp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    line-height: 1.3;
}
.vmt-mp-row__main {
    flex: 1 1 auto;
    min-width: 0; /* allow truncation if the name is huge */
    display: flex;
    flex-direction: column;
}
.vmt-mp-row__name {
    font-size: 14px;
    font-weight: 500;
    color: #1d2327;
}
.vmt-mp-row__email {
    font-size: 12px;
    color: #646970;
    margin-top: 1px;
}
.vmt-mp-row__pills {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* v1.14.0 — inline pills appended via templateResult. Five modifiers:
 *   .vmt-mp-pill--prereq-ok  (green, success — Attendees)
 *   .vmt-mp-pill--prereq-no  (grey, neutral — Attendees)
 *   .vmt-mp-pill--approved   (green, success — Facilitator override)
 *   .vmt-mp-pill--certified  (green, success — Co-facilitator override)
 *   .vmt-mp-pill--role       (grey, neutral — Unlock Codes)
 *
 * Colors chosen to match the WP admin palette (success green ~#2c6e35,
 * neutral grey ~#646970). Padding kept tight (2px/8px) so the pill
 * doesn't crowd the option row vertically. */
.vmt-mp-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
}
.vmt-mp-pill--prereq-ok,
.vmt-mp-pill--approved,
.vmt-mp-pill--certified {
    background: #e6f5ea;
    color: #2c6e35;
    border-color: #c3e6cd;
}
.vmt-mp-pill--prereq-no,
.vmt-mp-pill--role {
    background: #f0f0f1;
    color: #3c434a;
    border-color: #dcdcde;
}

/* When the option is hovered/highlighted in Select2's dropdown, the
   default theme paints the bg blue and the foreground white. Make the
   secondary email line still readable against that. The pills get
   their own contrast tweak so they stay legible on the blue strip. */
.select2-container--default .select2-results__option--highlighted[aria-selected] .vmt-mp-row__name,
.select2-container--default .select2-results__option--highlighted[aria-selected] .vmt-mp-row__email {
    color: #ffffff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] .vmt-mp-pill {
    /* Slight transparency so the highlight blue tints through without
       washing the pill out entirely. */
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.6);
}