/* ════════════════════════════════════════════════════════════════════════════
   gc-pick-groups.css: "De onde vêm os grupos" (app/views/client/group-chains/
   _pick-groups.php + gc-pick-groups.js). O MESMO seletor no passo 2 da criação
   (GC-U2) e no modal "Adicionar grupo" do detalhe (GC-U3): um código só (7.4).
   Regras vindas do gc-detail.css (GC-U3), para as duas telas lerem a mesma
   fonte; mexa no visual do seletor AQUI. Só tokens --ui-*.
   ════════════════════════════════════════════════════════════════════════════ */

/* Avatar sem foto: ui-avatar.is-tone-N do DS-3 (o _pick-groups.php põe a
   classe pelo $gcTomDe da casca, o mesmo cálculo do uiAvatar.tone). */
.rd-pick-row .ui-avatar > img { width: var(--ui-av-size); height: var(--ui-av-size); }

.rd-pick { gap: var(--ui-space-3); }
.rd-pick-card { cursor: pointer; }
.rd-pick-card > .ui-choice-body { flex: 1 1 auto; }
/* Tile neutro 36 como os cartões do "Conectar dispositivo"; marcado, no tom da marca. */
.rd-pick-card > .ui-checkbox, .rd-pick-card > .ui-radio { margin-top: 9px; }
.rd-pick-tile { flex: 0 0 auto; }
.rd-pick-card:has(> input:checked) > .rd-pick-tile { background: rgba(var(--ui-accent-rgb), .11); color: var(--ui-accent-ink); }
.rd-pick-card .ui-choice-title { display: block; cursor: pointer; }
.rd-pick-card .ui-choice-desc strong { font-weight: var(--ui-fw-semibold); color: var(--ui-ink-2); overflow-wrap: anywhere; }
.rd-pick-field { margin: var(--ui-space-1) 0 0; }
.rd-pick-search { margin-bottom: var(--ui-space-2); }
.rd-pick-list { max-height: 264px; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; background: var(--ui-bg-card); border: 1px solid var(--ui-border-subtle); border-radius: var(--ui-r-lg); }
.rd-pick-list > li + li { border-top: 1px solid var(--ui-border-subtle); }
.rd-pick-list > li[hidden] { display: none; }
.rd-pick-row { display: flex; align-items: center; gap: var(--ui-space-3); min-height: 52px; margin: 0; padding: var(--ui-space-2) var(--ui-space-3); cursor: pointer; transition: background-color var(--ui-dur-1) var(--ui-ease); }
.rd-pick-row:hover { background: var(--ui-fill-1); }
.rd-pick-row.is-busy { cursor: not-allowed; opacity: .6; }
.rd-pick-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-pick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-medium); color: var(--ui-ink); }
.rd-pick-sub { font-size: var(--ui-fs-help); line-height: var(--ui-lh-snug); color: var(--ui-muted); }
.rd-pick-sub.is-warn { color: var(--ui-warn-ink); }
.rd-pick-none { margin: var(--ui-space-2) 0 0; font-size: var(--ui-fs-label); color: var(--ui-muted); }
.rd-pick-count { margin: var(--ui-space-2) 0 0; }

@media (max-width: 560px) {
    /* No celular o tile sai: a escolha fica com o texto inteiro na largura. */
    .rd-pick-tile { display: none; }
    .rd-pick-card > .ui-checkbox, .rd-pick-card > .ui-radio { margin-top: 1px; }
}
@media (prefers-reduced-motion: reduce) {
    .rd-pick-row { transition: none; }
}