/* =====================================================================
   Shared input components (MultiSelectAutoComplete, ...)
   Ships with the CH.BowlingCRM.UI.Framework library; consumers link it
   via _content/CH.BowlingCRM.UI.Framework/css/inputs.css and supply the
   `--bo-*` theme tokens.
   ===================================================================== */

/* --- MultiSelectAutoComplete ---------------------------------------- */

.multiselect-autocomplete {
    display: flex;
    flex-direction: column;
}

/* Give the input body more breathing room than MudBlazor's dense default so
   the field is taller and lines up with the rest of the platform's fields. */
.multiselect-autocomplete .mud-input.mud-input-outlined .mud-input-slot {
    padding-top: 11px;
    padding-bottom: 11px;
    min-height: 26px;
}

.multiselect-autocomplete .mud-input-outlined-border {
    border-radius: var(--bo-radius, 8px);
}

/* Each drop-down row: checkbox + label on a single, comfortably padded line. */
.multiselect-autocomplete__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 2px 0;
}

/* The in-row checkbox is a selection indicator only — let clicks fall
   through to the list item so the whole row toggles. */
.multiselect-autocomplete__item .mud-checkbox {
    pointer-events: none;
}

/* Selected-value chips sit just beneath the input. */
.multiselect-autocomplete__chips {
    margin-top: 8px;
    gap: 6px;
}