/* ===== Bootstrap-multiselect polish — ui-refresh ===== */
/*
 * CSS-only overrides for the bootstrap-multiselect plugin so its rendered
 * trigger + dropdown match the ui-refresh design language. All selectors are
 * scoped under .ui-refresh so legacy surfaces are untouched.
 *
 * The plugin's DOM (per dist/js/bootstrap-multiselect.js):
 *   <div class="btn-group">
 *     <button class="multiselect dropdown-toggle btn btn-default" ...>
 *       <span class="multiselect-selected-text">…</span>
 *       <b class="caret"></b>
 *     </button>
 *     <ul class="multiselect-container dropdown-menu">
 *       <li class="multiselect-item multiselect-filter">
 *         <div class="input-group">
 *           <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
 *           <input class="form-control multiselect-search" type="text" />
 *           <span class="input-group-btn">
 *             <button class="btn btn-default multiselect-clear-filter"><i class="glyphicon glyphicon-remove-circle"></i></button>
 *           </span>
 *         </div>
 *       </li>
 *       <li><a tabindex="0"><label><input type="checkbox" /> Option text</label></a></li>
 *     </ul>
 *   </div>
 *
 * Every value comes from a semantic token in tokens.css.
 */

/* === Outer wrapper — span the parent so the trigger fills its column === */
.ui-refresh .btn-group:has(> .multiselect.dropdown-toggle) {
    display: block;
    width: 100%;
}

/* === The native <select> the plugin wraps ===
 * bootstrap-multiselect 0.9.15 wraps the original <select> in
 * span.multiselect-native-select and relies on the VENDOR stylesheet alone to
 * visually hide it (position:absolute + 1px + clip). In AjaxDrawer-hydrated
 * views (e.g. the Schedule Invitation drawer) that vendor <link> does not
 * reliably take effect, which leaves the raw multi-select listbox stacked
 * above the toggle. Own the hide here — this file ships with UiRefreshAsset
 * on every ui-refresh page. Same visually-hidden recipe as the vendor so the
 * control stays in the DOM for the form post and the plugin's change events.
 * !important throughout: the vendor rule uses it, and `.ui-refresh
 * .form-control` pins height/border-radius with !important too. */
.ui-refresh .multiselect-native-select {
    position: relative;
}
.ui-refresh .multiselect-native-select > select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* === Multiselect nested in a compound append addon (Yii ActiveField
 * `addon.append` with `asButton: true`) — e.g. the "N [minutes ▾] before
 * session starts" schedule control in email/_session_schedule_settings.php.
 * There the multiselect trigger is rendered as ONE of several buttons living
 * inside `.input-group-btn`, alongside a plain sibling button/label. The
 * block/100%-width rule above assumes the multiselect is the sole control in
 * its container (the common case — a standalone multi-select field); applied
 * here it stretches the trigger across the whole `.input-group-btn` cell and
 * shoves the sibling button onto its own line below. Keep it inline instead
 * so the segments share one row, and join them into a single seamless
 * control (square the touching corners, match height/border). */
.ui-refresh .input-group-btn .btn-group:has(> .multiselect.dropdown-toggle) {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}
.ui-refresh .input-group-btn .multiselect-native-select {
    display: inline-block;
    vertical-align: middle;
}
.ui-refresh .input-group-btn .btn-group:has(> .multiselect.dropdown-toggle) > .multiselect.dropdown-toggle {
    width: auto;
}
/* Corner squaring, but only when the trigger is NOT wrapped in a Bootstrap
 * `.input-group` — there the group itself owns the outer radius (and clips to
 * it), so squaring the trigger's trailing corners leaves the segment looking
 * clipped rather than joined.
 * !important: the vendor bootstrap.min.css and bootstrap-multiselect.css
 * (loaded from the CDN asset host, ahead of this file) carry their own
 * unscoped .btn / .btn-group radius rules at equal-or-competing specificity;
 * without !important the corner squaring here loses the cascade to them. */
.ui-refresh :not(.input-group) > .input-group-btn .btn-group:has(> .multiselect.dropdown-toggle) > .multiselect.dropdown-toggle {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
/* Caret. The drawer's standalone-dropdown treatment (components.css
 * `.ui-refresh .ajax-drawer .multiselect-native-select > .btn-group >
 * .multiselect`) pins the caret absolutely at `right: var(--space-3)` and pairs
 * it with a 40px right-padding gutter on the trigger. As a segment inside
 * `.input-group-btn` the trigger is shrink-to-fit and the sidebar-form rule in
 * layout.css resets that padding to `0 var(--space-3)` — so the gutter is gone
 * while the caret stays pinned, landing on top of the label text. Put it back
 * in normal flex flow, where the trigger's own gap spaces it correctly (the
 * default treatment outside the drawer). */
.ui-refresh .input-group-btn .btn-group:has(> .multiselect.dropdown-toggle) > .multiselect.dropdown-toggle .caret {
    position: relative;
    top: auto;
    right: auto;
    margin-top: 0;
}

/* The trailing plain button/label (e.g. the disabled "before/after session
 * starts" segment) — join it flush against the multiselect trigger as the
 * final segment, instead of the default addon spacing that leaves it
 * floating as its own disconnected pill below. !important throughout as
 * defense-in-depth: this rule shares specificity-adjacent territory with the
 * vendor bootstrap.min.css / bootstrap-multiselect.css bundles (loaded from a
 * separate CDN asset host, so their rules can't be inspected/reasoned about
 * via normal same-origin tooling). Explicit background/border/color tokens
 * (matching the multiselect toggle's own dedicated `--bg-surface` rule above)
 * keep the two segments visually identical as one control — verified in
 * both light and dark surface tones via screenshot. */
.ui-refresh .input-group-btn:has(.multiselect.dropdown-toggle) > .btn:not(.btn-group, .multiselect) {
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
    height: var(--input-height) !important;
    margin-left: -1px;
    background: var(--bg-surface) !important;
    color: var(--fg-default) !important;
    border-color: var(--input-border) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    opacity: 1 !important;
}

/* Removes the default caret (chevron) with de implementation using a background 
   with the --select-chevron-image variable */
.ui-refresh .btn-group > .multiselect.dropdown-toggle .caret {
    display: none;
}

/* === Trigger button === */
.ui-refresh .btn-group > .multiselect.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    /* Bootstrap 3 floats .btn-group > .btn — keep the button in normal flow so
     * the .btn-group parent (display:block above) takes its 40px height,
     * otherwise the absolute-positioned dropdown's `top: 100%` collapses to 0
     * and overlaps the trigger. */
    float: none;
    width: 100%;
    height: var(--input-height);
    padding: 0 var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    color: var(--fg-default);
    font-family: var(--font-family);
    font-size: var(--font-size-input);
    font-weight: 500;
    text-transform: none;
    box-shadow: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    /* Implements the same chevron standard applied globally to common <select> input elements
       keeping visual consistency accross same/similar components */
    background-size: .6em !important;
    background-color: var(--control-bg-color, transparent) !important;
    background-image: var(--select-chevron-image) !important;
    background-position: calc(100% - 1.3em) center !important;
    background-repeat: no-repeat !important;
    appearance: none;
    padding-right: 30px;
}

/* !important throughout: two separate vendor/plugin rules target this exact
 * toggle (it carries .multiselect.dropdown-toggle.btn.btn-default) and both
 * edge out this selector without needing their own !important:
 *   - `.ui-refresh .btn-default:hover { background: var(--bg-muted) !important }`
 *     (components.css) always wins the background regardless of specificity,
 *     since !important beats non-important outright.
 *   - `button.multiselect.dropdown-toggle.btn.btn-default:hover, :focus
 *     { color: white }` (web/plugins/jquery-query-builder/query-builder.default.css
 *     — loaded because VisibilityConditionInput uses jQuery QueryBuilder on
 *     the same page) matches with equal class-count specificity to this rule
 *     PLUS a `button` element, so it wins the specificity tiebreak even
 *     without !important.
 * Together these left hover/focus reading as pale text on a muted-tint
 * background. Pin both properties here to match the established treatment
 * for this same toggle elsewhere (components.css .ajax-drawer .multiselect:hover
 * — background: var(--bg-surface); color: var(--fg-default)). */
.ui-refresh .btn-group > .multiselect.dropdown-toggle:hover {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-strong);
    color: var(--fg-default) !important;
    box-shadow: none;
}

.ui-refresh .btn-group > .multiselect.dropdown-toggle:focus {
    border: 1px solid var(--accent-primary) !important;
    box-shadow: var(--focus-ring) !important;
    outline: none;
}

.ui-refresh .btn-group.open > .multiselect.dropdown-toggle,
.ui-refresh .btn-group > .multiselect.dropdown-toggle:focus,
.ui-refresh .btn-group > .multiselect.dropdown-toggle:focus-visible {
    background-color: var(--bg-surface) !important;
    border-color: var(--accent-primary);
    color: var(--fg-default) !important;
    box-shadow: var(--focus-ring);
    outline: none;
}

.ui-refresh .btn-group > .multiselect.dropdown-toggle .multiselect-selected-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

/* === Dropdown panel === */
.ui-refresh .multiselect-container.dropdown-menu {
    margin-top: var(--space-1);
    padding: 0;
    background: var(--bg-surface);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}
.ui-refresh .btn-group.open > .multiselect-container.dropdown-menu {
    display: block;
    z-index: 1051;
}

/* dropdown-multiselect.js toggles .dropup on the .btn-group when there's not
   enough room below the trigger (e.g. near the bottom of a drawer). Vendor
   Bootstrap's `.dropup .dropdown-menu` flips `top`/`bottom` to open upward;
   mirror our downward gap onto the top instead of the bottom. */
.ui-refresh .btn-group.dropup .multiselect-container.dropdown-menu {
    margin-top: 0;
    margin-bottom: var(--space-1);
}

/* === Search row === */
.ui-refresh .multiselect-container .multiselect-filter,
.ui-refresh .multiselect-container .multiselect-item.filter {
    padding: var(--space-3);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
}

/* The library wraps the input in an .input-group with the search icon as a
 * sibling addon. We collapse that into a single visual input by absolutely
 * positioning the icon inside the input's left padding. */
.ui-refresh .multiselect-container .input-group {
    position: relative;
    display: flex;
    width: 100%;
    margin: 0;
}

.ui-refresh .multiselect-container .multiselect-filter .input-group-addon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    background: transparent;
    border: none;
    color: var(--fg-muted);
    font-size: var(--font-size-xs);
    pointer-events: none;
    z-index: 10;
}

.ui-refresh .multiselect-container .multiselect-filter input.form-control.multiselect-search,
.ui-refresh .multiselect-container .multiselect-item.filter input.form-control.multiselect-search {
    display: block;
    width: 100%;
    height: var(--input-height);
    padding: 0 var(--space-3) 0 var(--space-8);
    background: var(--bg-surface);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius) !important;
    color: var(--fg-default);
    font-family: var(--font-family);
    font-size: var(--font-size-input);
    font-weight: 500;
    box-shadow: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* The account filter supplies its own compact template without a search icon.
 * It uses the plugin's legacy `.filter` hook, so restore a normal left inset
 * and the same readable text scale as other refreshed controls. */
.ui-refresh .multiselect-container .multiselect-item.filter input.form-control.multiselect-search {
    padding: 0 var(--space-3);
    font-size: var(--font-size-sm);
}

.ui-refresh .multiselect-container .multiselect-filter input.form-control.multiselect-search:focus,
.ui-refresh .multiselect-container .multiselect-item.filter input.form-control.multiselect-search:focus {
    border-color: var(--accent-primary);
    box-shadow: var(--focus-ring);
    outline: none;
}

.ui-refresh .multiselect-container .multiselect-filter input.form-control.multiselect-search::placeholder,
.ui-refresh .multiselect-container .multiselect-item.filter input.form-control.multiselect-search::placeholder {
    color: var(--fg-subtle);
    font-size: var(--font-size-xs);
}

/* Hide the clear-filter X — Esc / backspace are sufficient to reset the
 * search and the button visually clutters the popover. */
.ui-refresh .multiselect-container .multiselect-filter .input-group-btn,
.ui-refresh .multiselect-container .multiselect-item.filter .input-group-btn {
    display: none;
}

/* The plugin's optional reset row is a plain Bootstrap button by default,
 * which inherits legacy dark text and button chrome. Keep it as a compact,
 * clearly legible text action within the refreshed popover. */
.ui-refresh .multiselect-container > li.multiselect-reset {
    padding: var(--space-1);
    border-bottom: 1px solid var(--border-subtle);
}
.ui-refresh .multiselect-container > li.multiselect-reset .input-group,
.ui-refresh .multiselect-container > li.multiselect-reset .btn {
    width: 100%;
}
.ui-refresh .multiselect-container > li.multiselect-reset .btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: auto !important;
    min-height: 0;
    padding: var(--space-2) var(--space-3);
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--radius-sm);
    box-shadow: none !important;
    color: var(--accent-primary) !important;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}
.ui-refresh .multiselect-container > li.multiselect-reset .btn:hover,
.ui-refresh .multiselect-container > li.multiselect-reset .btn:focus {
    background: var(--state-hover) !important;
    color: var(--accent-primary) !important;
    outline: none;
}

/* === Option rows === */
.ui-refresh .multiselect-container > li:not(.multiselect-item) > a {
    display: flex;
    align-items: center;
    padding: 0;
    background: transparent;
    color: var(--fg-default);
    transition: background var(--transition-fast);
}

.ui-refresh .multiselect-container > li:not(.multiselect-item) > a:hover,
.ui-refresh .multiselect-container > li:not(.multiselect-item) > a:focus {
    background: var(--state-hover);
    color: var(--fg-default);
    outline: none;
}

/* Optgroup header row (label + collapse caret). The generic
 * `.ui-refresh .form-group label { display: block; width: fit-content }`
 * (base.css) leaks into this widget's group label since it's nested inside
 * the field's .form-group. A block-level label no longer leaves the
 * caret's `float: right` (dropdown-multiselect.css) room to sit beside it
 * on the same line — a float drops below a preceding non-floated block box
 * regardless of that box's width, which read as a large gap between the
 * group label and its first child option. Row li.multiselect-group is
 * excluded from the option-row flex rule above (it isn't just a label —
 * it carries a separate sibling .caret-container), so give its own <a> row
 * flex layout instead of depending on the label's display value at all. */
.ui-refresh .multiselect-container > li.multiselect-group > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    color: var(--fg-muted) !important;
}
.ui-refresh .multiselect-container > li.multiselect-group > a > label,
.ui-refresh .multiselect-container > li.multiselect-group > a > label > b {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--fg-muted) !important;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
}

/* Selected rows keep the same neutral background as unselected — the checked
 * checkbox is the only "selected" signal. The library still adds .active to
 * the <li>, and the generic .ui-refresh .dropdown-menu > li.active rule in
 * components.css uses !important to paint lavender (background + text) for
 * standard dropdowns. We need to match that with !important here so the
 * multi-select doesn't pick up that styling. */
.ui-refresh .multiselect-container > li.active > a,
.ui-refresh .multiselect-container > li.active > a:focus {
    background: transparent !important;
    color: var(--fg-default) !important;
}

.ui-refresh .multiselect-container > li.active > a:hover {
    background: var(--state-hover) !important;
    color: var(--fg-default) !important;
}

/* The label inside the option <a> holds the checkbox + text. */
.ui-refresh .multiselect-container > li:not(.multiselect-item) > a > label {
    display: flex !important;
    align-items: center;
    gap: var(--space-2);
    width: 100%!important;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    color: inherit;
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
}
.ui-refresh .multiselect-container > li:not(.multiselect-item) > a > label.checkbox:hover {
    background-color: transparent!important;
}

/* Custom-drawn checkbox so we get a 4px radius and the lavender check
 * regardless of OS native styling. */
.ui-refresh .multiselect-container > li > a > label > input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 16px;
    height: 16px;
    margin: 0;
    background: var(--bg-surface);
    border: 1.5px solid var(--input-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.ui-refresh .multiselect-container > li > a > label > input[type="checkbox"]:checked {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.ui-refresh .multiselect-container > li > a > label > input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border-right: 1.5px solid var(--fg-on-accent);
    border-bottom: 1.5px solid var(--fg-on-accent);
    transform: rotate(45deg);
}

/* Single-select multiselects (no `multiple` attribute — e.g. the "minutes /
 * hours / days" period picker in the session-schedule control) render their
 * options as radios, not checkboxes. Without a reset they fall through to the
 * bare OS-native radio control, which paints half-filled in the browser's
 * default accent color regardless of surface tone (the stray orange crescent
 * on dark). Give it the same custom-drawn treatment as the checkbox above —
 * a circle with a solid lavender dot when checked — for full tone and accent
 * consistency. */
.ui-refresh .multiselect-container > li > a > label > input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 16px;
    height: 16px;
    margin: 0;
    background: var(--bg-surface);
    border: 1.5px solid var(--input-border);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.ui-refresh .multiselect-container > li > a > label > input[type="radio"]:checked {
    border-color: var(--accent-primary);
}

.ui-refresh .multiselect-container > li > a > label > input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--accent-primary);
}