.searchable-group-select { display: grid; gap: .4rem; width: 100%; }
.searchable-group-select__search,
.searchable-group-select select { box-sizing: border-box; width: 100%; min-width: 0; }
.searchable-group-select input.searchable-group-select__search { padding: .55rem .7rem; border: 1px solid var(--border-hard, #cbd5e1); border-radius: .5rem; background: var(--input-bg, var(--card-bg, #fff)); color: var(--text-color, #172033); }
.searchable-group-select select { padding: .55rem .7rem; }
.admin-user-modal .searchable-group-select { grid-column: 1 / -1; }
.searchable-group-select__hint, .searchable-group-select__status { font-size: .78rem; color: var(--text-muted, #667085); }
.searchable-group-select__status:empty { display: none; }
.searchable-group-select__status.is-found { color: #16a34a; font-weight: 700; }

.group-picker-component { display: flex; align-items: center; width: 100%; min-width: 0; }
.group-picker-component__value { min-width: 0; overflow: hidden; color: inherit; text-overflow: ellipsis; white-space: nowrap; }
.group-picker-component__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex: 1 1 100%;
    min-width: 0;
    min-height: 46px;
    padding: .65rem .85rem;
    border: 1px solid var(--border-hard, #535960);
    border-radius: .7rem;
    background: #050505;
    color: var(--settings-text, #f4f5f6);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.group-picker-component__trigger:hover { background: #050505; color: var(--settings-text, #f4f5f6); }
.group-picker-component__trigger:focus-visible { outline: 2px solid var(--primary-color, #24b7f2); outline-offset: 2px; }
.group-picker-component__action { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; color: var(--primary-color, #24b7f2); font-size: .88rem; font-weight: 600; }
.settings-group-row .info-value { display: flex; align-items: center; min-width: 0; }
.settings-group-picker-control { gap: .75rem; }
.settings-group-picker { padding: 1.75rem; }
.settings-group-picker h2 { margin: 0 2.5rem .35rem 0; }
.settings-group-picker > p { margin: 0 0 1.2rem; color: var(--text-muted, #667085); }
.settings-group-picker label { display: block; margin-bottom: .4rem; font-weight: 600; }
.settings-group-picker input[type="search"] {
    box-sizing: border-box;
    width: 100%;
    padding: .75rem .85rem;
    border: 1px solid var(--border-hard, #cbd5e1);
    border-radius: .65rem;
    background: var(--input-bg, var(--card-bg, #fff));
    color: var(--text-color, #172033);
    font: inherit;
}
.settings-group-picker__status { min-height: 1.4em; margin: .55rem 0; color: var(--text-muted, #667085); font-size: .88rem; }
.settings-group-picker__status.is-found { color: #16a34a; font-weight: 700; }
.settings-group-picker__results { display: grid; gap: 1rem; max-height: min(52vh, 420px); overflow-y: auto; padding-right: .25rem; }
.settings-group-picker__section h3,
.settings-group-picker__custom h3 { margin: 0 0 .55rem; font-size: .85rem; color: var(--text-muted, #667085); text-transform: uppercase; }
.settings-group-picker__options,
.settings-group-picker__custom > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: .5rem; }
.settings-group-picker__option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .45rem;
    min-height: 43px;
    padding: .65rem .75rem;
    border: 1px solid var(--border-hard, #cbd5e1);
    border-radius: .55rem;
    background: var(--input-bg, var(--card-bg, #fff));
    color: var(--text-color, #172033);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.settings-group-picker__option:hover,
.settings-group-picker__option:focus-visible,
.settings-group-picker__option.is-selected { border-color: var(--primary-color, #4361ee); background: color-mix(in srgb, var(--primary-color, #4361ee) 12%, var(--card-bg, #fff)); }
.settings-group-picker__check { color: var(--primary-color, #4361ee); font-weight: 800; visibility: hidden; }
.settings-group-picker__option.is-selected .settings-group-picker__check { visibility: visible; }
.settings-group-picker__section[hidden],
.settings-group-picker__custom[hidden],
.settings-group-picker__option[hidden] { display: none; }
@media (max-width: 640px) {
    .settings-group-picker { padding: 1.25rem; }
    .settings-group-picker__options,
    .settings-group-picker__custom > div { grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); }
}
