/* components/invite.css — Convite de participantes: botão e chips na reserva, modal #inviteDlg (busca, lista com seleção, selecionados)
   e a tabela de participantes no painel de detalhes (.guests). Usa .search, .chip, .notice e .tbl, definidos em outros arquivos. */

/* Botão e chips acima do título da reunião */
.invbox{margin-bottom:1rem}
.invbtn{gap:.6rem;padding:.8rem 1rem;border-radius:12px;font-size:.95rem}
.invbtn .i{width:20px;height:20px}
.invchips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.invchips:empty{display:none}
.chipx{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:var(--muted);flex:none}
.chipx:hover{background:var(--primary-soft);color:var(--brand)}
.chipx:focus-visible{outline:3px solid var(--brand-light);outline-offset:1px}
.chip .chipx .i{width:14px;height:14px;color:inherit}

/* Modal */
.invdlg{max-width:520px}
.invdlg[open]{display:flex;flex-direction:column;max-height:min(92vh,680px)}
.invdlg .search{border-width:1px;padding:.55rem 1rem;border-radius:10px;width:100%}
.invdlg .search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.invlist{list-style:none;margin-top:.8rem;border:1px solid var(--border);border-radius:12px;overflow:auto;min-height:120px;flex:1}
.invlist li+li{border-top:1px solid var(--border)}
.invuser{display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;cursor:pointer}
.invuser:hover{background:var(--soft-surface)}
.invuser.on{background:var(--primary-soft)}
.invuser:focus-within{outline:3px solid var(--brand-light);outline-offset:-3px}
.invuser input{width:20px;height:20px;accent-color:var(--brand);flex:none}
.inva{width:38px;height:38px;border-radius:50%;background:var(--accent-soft);color:var(--brand);font-weight:700;font-size:.85rem;display:grid;place-items:center;flex:none}
.invtxt{min-width:0}
.invtxt b{display:block;font-size:.95rem;color:var(--text)}
.invtxt small{color:var(--muted);font-size:.82rem;overflow-wrap:anywhere}
.invempty,.invnone{color:var(--muted);padding:1rem;font-size:.9rem}
.invnone{padding:0;list-style:none}
.invselhead{font-size:.85rem;font-weight:700;color:var(--muted);margin:1rem 0 .5rem}
.invsel{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;max-height:6.5rem;overflow:auto}
.invdlg>*{flex:none}
.invdlg>.invlist{flex:1 1 auto}                                  /* em telas baixas só a lista encolhe */
.invdlg .notice{margin-bottom:0}
.invdlg .dlgbtns{margin-top:1rem}

/* Tabela de participantes no painel de detalhes (só o organizador) */
.drawer.wide{max-width:620px}
.guests .tbl td[data-label="E-mail"]{font-size:.82rem}
.guests h3{font-size:1rem;color:var(--text);margin:1.6rem 0 .3rem}
.gsum{color:var(--muted);font-size:.88rem;margin-bottom:.4rem}
.guests .tbl td{padding:.7rem .5rem;overflow-wrap:anywhere}
.guests .tbl th{padding:.55rem .5rem}
.guests .tbl td[data-label="Status"]{white-space:nowrap}
.guests .tbl td::before{white-space:nowrap}

/* Aviso de limite recomendado de pessoas da sala (em vermelho; não impede a reserva, pede confirmação ao confirmar) */
.capwarn{margin-top:.8rem;padding:.7rem .9rem;border-radius:10px;border:1px solid var(--err);background:var(--err-soft);color:var(--err);font-size:.9rem;font-weight:600;line-height:1.4}