/* recipient-groups.css — shared recipient group picker + saved-list manager.
   Sits above other modals (z-index 1400) because it is opened FROM them. */

.rg-backdrop        { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1400;
                      display: flex; align-items: center; justify-content: center; padding: 20px; }
.rg-card            { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
                      width: 520px; max-width: 94vw; max-height: 86vh; display: flex; flex-direction: column;
                      box-shadow: 0 14px 44px rgba(0,0,0,.45); }
.rg-card-wide       { width: 660px; }

.rg-hdr             { display: flex; align-items: center; justify-content: space-between; gap: 10px;
                      padding: 13px 18px; border-bottom: 1px solid var(--border); font-weight: 700;
                      color: var(--text); flex: none; }
.rg-hdr-org         { font-weight: 400; font-size: 12px; color: var(--text3); margin-left: 6px; }
.rg-close           { background: none; border: none; color: var(--text3); font-size: 22px; line-height: 1;
                      cursor: pointer; padding: 0 2px; }
.rg-close:hover     { color: var(--text); }

.rg-body            { padding: 14px 18px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.rg-list            { display: flex; flex-direction: column; gap: 10px; }
.rg-foot            { display: flex; gap: 8px; justify-content: space-between; align-items: center;
                      padding-top: 6px; border-top: 1px solid var(--border2); margin-top: 2px; }

.rg-input           { width: 100%; box-sizing: border-box; background: var(--bg3); color: var(--text);
                      border: 1px solid var(--border); border-radius: 7px; padding: 7px 10px; font-size: 13px;
                      font-family: inherit; }
.rg-input:focus     { outline: none; border-color: var(--accent); }

.rg-hint            { font-size: 11.5px; color: var(--text3); line-height: 1.45; }
.rg-empty           { font-size: 12.5px; color: var(--text3); margin: 6px 0; line-height: 1.5; }
.rg-empty-note      { font-size: 11.5px; color: var(--text4); }

/* ── Sections + rows ─────────────────────────────────────────────── */
.rg-section-hdr     { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
                      color: var(--text3); margin: 4px 0 6px; display: flex; gap: 8px; align-items: baseline;
                      flex-wrap: wrap; }
.rg-section-hint    { font-size: 10.5px; font-weight: 400; text-transform: none; letter-spacing: 0;
                      color: var(--text4); }
.rg-section + .rg-section { margin-top: 6px; }

.rg-row             { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center;
                      border: 1px solid var(--border2); border-radius: 8px; padding: 6px 8px 6px 4px;
                      margin-bottom: 5px; }
.rg-row-open        { border-color: var(--border); background: var(--bg3); }
.rg-row-main        { display: flex; align-items: center; gap: 7px; background: none; border: none;
                      color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
                      padding: 3px 4px; min-width: 0; }
.rg-caret           { color: var(--text4); font-size: 10px; flex: none; width: 10px; }
.rg-row-name        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-row-count       { flex: none; font-size: 10.5px; color: var(--text3); background: var(--bg4);
                      border-radius: 20px; padding: 1px 7px; font-weight: 600; }
.rg-row-add         { font-size: 11.5px !important; padding: 3px 11px !important; }
.rg-row-added       { color: var(--text4) !important; }
.rg-row-members     { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px;
                      padding: 6px 4px 2px 21px; }
.rg-member          { display: flex; gap: 8px; align-items: baseline; font-size: 12px; min-width: 0; }
.rg-member-name     { color: var(--text2); flex: none; max-width: 40%; overflow: hidden;
                      text-overflow: ellipsis; white-space: nowrap; }
.rg-member-email    { color: var(--text4); font-size: 11.5px; overflow-wrap: anywhere; min-width: 0; }
.rg-row-note        { font-size: 11.5px; color: var(--text3); font-style: italic; margin-top: 4px; }

/* ── Manage list ─────────────────────────────────────────────────── */
.rg-mg-top          { display: flex; justify-content: flex-end; }
.rg-mg-ro           { margin: 0; }
.rg-mg-row          { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between;
                      border: 1px solid var(--border2); border-radius: 8px; padding: 9px 10px; }
.rg-mg-main         { min-width: 0; }
.rg-mg-name         { font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.rg-mg-meta         { font-size: 11px; color: var(--text3); margin-top: 2px; overflow-wrap: anywhere; }
.rg-mg-note         { font-size: 11.5px; color: var(--text4); font-style: italic; margin-top: 3px; }
.rg-mg-acts         { display: flex; gap: 5px; flex: none; }
.rg-mg-acts button  { font-size: 11.5px !important; padding: 3px 10px !important; }
.rg-danger          { color: #dc2626 !important; }
.rg-danger:hover    { background: rgba(220,38,38,.12) !important; }

/* ── Editor ──────────────────────────────────────────────────────── */
.rg-editor          { border: 1px solid var(--border); border-radius: 9px; padding: 12px;
                      background: var(--bg3); display: flex; flex-direction: column; gap: 10px; }
.rg-ed-hdr          { font-size: 12.5px; font-weight: 700; color: var(--text); }
.rg-field           { display: flex; flex-direction: column; gap: 4px; }
.rg-field > span:first-child { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
                      letter-spacing: .3px; color: var(--text3); }
.rg-ed-add          { display: flex; gap: 6px; align-items: center; margin-top: 5px; flex-wrap: wrap; }
.rg-ed-add .rg-input { flex: 1; min-width: 190px; }
.rg-ed-add button   { font-size: 11.5px !important; padding: 5px 11px !important; white-space: nowrap; }
.rg-ed-actions      { display: flex; gap: 8px; justify-content: flex-end; }

.rg-chips           { display: flex; flex-wrap: wrap; gap: 5px; min-height: 22px; align-items: center; }
.rg-chip            { display: inline-flex; align-items: center; gap: 4px; background: var(--bg4);
                      border: 1px solid var(--border2); border-radius: 20px; padding: 2px 4px 2px 9px;
                      font-size: 11.5px; color: var(--text2); max-width: 100%; overflow-wrap: anywhere; }
.rg-chip-x          { background: none; border: none; color: var(--text4); cursor: pointer; font-size: 14px;
                      line-height: 1; padding: 0 3px; }
.rg-chip-x:hover    { color: #dc2626; }

.rg-ed-import       { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; max-height: 190px;
                      overflow-y: auto; border: 1px solid var(--border); border-radius: 7px; padding: 5px; }
.rg-ed-import-row   { display: flex; justify-content: space-between; gap: 8px; align-items: center;
                      background: none; border: none; color: var(--text); font: inherit; font-size: 12px;
                      text-align: left; cursor: pointer; padding: 5px 7px; border-radius: 5px; }
.rg-ed-import-row:hover { background: var(--bg4); }

/* ── The button that opens the picker, dropped next to any email field ── */
.rg-open-btn        { font-size: 11px !important; padding: 3px 9px !important; white-space: nowrap; }

/* ── Phone: full-height sheet, stacked rows ──────────────────────── */
@media (max-width: 768px) {
  .rg-backdrop      { padding: 0; align-items: stretch; }
  .rg-card, .rg-card-wide { width: 100%; max-width: 100%; max-height: 100vh; border-radius: 0;
                      border-left: none; border-right: none; }
  .rg-body          { padding: 12px 14px 18px; }
  .rg-row           { grid-template-columns: 1fr auto; }
  .rg-row-members   { padding-left: 8px; }
  .rg-member        { flex-direction: column; gap: 0; }
  .rg-member-name   { max-width: 100%; }
  .rg-mg-row        { flex-direction: column; }
  .rg-mg-acts       { align-self: stretch; }
  .rg-mg-acts button { flex: 1; }
  .rg-foot          { flex-direction: column-reverse; align-items: stretch; gap: 6px; }
  .rg-foot button   { width: 100%; }
  .rg-ed-actions button { flex: 1; }
}