/* ============================================================================
   QZR vNext — Paramètres du groupe (onglet Params, propriétaire)
   ----------------------------------------------------------------------------
   Réécrit le rendu de slices/group.params.template.php (getGroupParamsTemplate)
   d'une double-colonne héros+aside legacy (.group-settings-*) vers une pile
   MONO-COLONNE façon appli : sections Informations / Accès & visibilité /
   Gestion / Zone sensible, icônes Font Awesome teal.
   Les rôles & permissions (ex-modale #delegatesModal) sont pliés en SOUS-VUE
   dans l'onglet (flèche retour) — cf. groups-delegates.js renderInline().
   Chargé APRÈS vnext-groupes-detail.css (réutilise les .gdl-* pour la sous-vue).
   ============================================================================ */

/* Le conteneur d'onglet ne fait plus carte : nos sections SONT les cartes. */
.group-detail-panel[data-tab-panel="settings"] .group-detail-section {
  background: transparent; border: 0; box-shadow: none; padding: 4px 0;
}

.qzr-gp { max-width: 640px; margin: 0 auto; text-align: left; color: var(--qz-text, #06342A); }
.qzr-gp-view[hidden] { display: none; }

/* ── Sections ────────────────────────────────────────────────────────────── */
.qzr-gp-section {
  background: var(--qz-surface, #fff);
  border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: 18px;
  padding: 18px 18px 20px;
  margin-bottom: 16px;
}
.qzr-gp-sec-head { display: flex; align-items: center; gap: 11px; }
.qzr-gp-sec-ico {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 10px;
  background: var(--qz-accent-soft, #E1F5EE);
  color: var(--qz-accent, #16A87A);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.qzr-gp-sec-title { margin: 0; font-size: 16.5px; font-weight: 700; color: var(--qz-text, #06342A); }
.qzr-gp-sec-desc { margin: 8px 0 2px; font-size: 13px; color: var(--qz-muted, #5E8A7C); line-height: 1.5; }

/* ── Champs ──────────────────────────────────────────────────────────────── */
.qzr-gp-field { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; }
.qzr-gp-field__label { font-size: 13px; font-weight: 600; color: var(--qz-ink, #15233B); }
.qzr-gp-field__hint { margin: 2px 0 0; font-size: 12px; color: var(--qz-muted, #5E8A7C); line-height: 1.45; }
.qzr-gp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.qzr-gp .form-control,
.qzr-gp .form-select {
  width: 100%;
  border: 1px solid var(--qz-line-strong, #CDE7DC);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 14.5px;
  color: var(--qz-text, #06342A);
  background: var(--qz-surface, #fff);
  font-family: inherit;
  line-height: 1.4;
  transition: border-color var(--qz-dur-ui) ease, box-shadow var(--qz-dur-ui) ease;
}
.qzr-gp .form-control:focus,
.qzr-gp .form-select:focus {
  border-color: var(--qz-accent, #16A87A);
  box-shadow: 0 0 0 3px rgba(22, 168, 122, .15);
  outline: none;
}
.qzr-gp .form-control[readonly] { background: var(--qz-screen, #F1FAF6); color: var(--qz-muted, #5E8A7C); }
.qzr-gp textarea.form-control { resize: vertical; min-height: 92px; }

/* Couleurs */
.qzr-gp-color-row { display: flex; gap: 10px; align-items: center; }
.qzr-gp .form-control-color {
  width: 52px; height: 44px; flex: 0 0 auto;
  padding: 4px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--qz-line-strong, #CDE7DC); background: var(--qz-surface, #fff);
}
.qzr-gp-color-row .form-control { flex: 1 1 auto; }

/* Image */
.qzr-gp-image { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.qzr-gp-image__frame {
  width: 96px; height: 96px; flex: 0 0 auto;
  border-radius: 16px; overflow: hidden;
  background: var(--qz-screen, #F1FAF6);
  border: 1px solid var(--qz-line, #DCEFE8);
  display: flex; align-items: center; justify-content: center;
}
.qzr-gp-image__frame img { width: 100%; height: 100%; object-fit: cover; }
.group-settings-image-frame__empty { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--qz-muted, #5E8A7C); font-size: 10.5px; text-align: center; padding: 6px; }
.group-settings-image-frame__empty .fas { font-size: 18px; color: var(--qz-accent-mid, #5DCAA5); }
.qzr-gp-image__controls { flex: 1 1 220px; min-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.qzr-gp .progress { height: 8px; border-radius: var(--qz-r-pill); background: var(--qz-line, #DCEFE8); overflow: hidden; }
.qzr-gp .progress-bar { background: var(--qz-accent, #16A87A); }

/* ── Note / règle active ─────────────────────────────────────────────────── */
.qzr-gp-note {
  display: flex; gap: 11px; align-items: flex-start;
  margin-top: 16px; padding: 12px 14px;
  background: var(--qz-accent-soft, #E1F5EE);
  border: 1px solid var(--qz-line-strong, #CDE7DC);
  border-radius: 12px;
}
.qzr-gp-note--soft { background: var(--qz-screen, #F1FAF6); }
.qzr-gp-note__icon { flex: 0 0 auto; color: var(--qz-accent, #16A87A); font-size: 15px; margin-top: 1px; }
.qzr-gp-note__content strong { display: block; font-size: 13.5px; color: var(--qz-text, #06342A); }
.qzr-gp-note__content p { margin: 3px 0 0; font-size: 12.5px; color: var(--qz-muted, #5E8A7C); line-height: 1.45; }

/* ── Lignes de navigation (Rôles & permissions, Demandes d'adhésion) ───────── */
.qzr-gp-nav {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin-top: 14px; padding: 13px 14px;
  background: var(--qz-surface, #fff);
  border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: 14px; cursor: pointer; text-align: left; font-family: inherit;
  transition: border-color var(--qz-dur-ui) ease, background var(--qz-dur-ui) ease;
}
.qzr-gp-nav:hover { border-color: var(--qz-accent-mid, #5DCAA5); background: var(--qz-accent-soft, #E1F5EE); }
.qzr-gp-nav__ico {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px;
  background: var(--qz-accent-soft, #E1F5EE); color: var(--qz-accent, #16A87A);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.qzr-gp-nav__body { flex: 1 1 auto; min-width: 0; }
.qzr-gp-nav__label { display: block; font-size: 14.5px; font-weight: 600; color: var(--qz-text, #06342A); }
.qzr-gp-nav__desc { display: block; font-size: 12.5px; color: var(--qz-muted, #5E8A7C); margin-top: 2px; line-height: 1.4; }
.qzr-gp-nav__chev { flex: 0 0 auto; color: var(--qz-muted, #93B4A8); font-size: 13px; }

/* ── Barre d'enregistrement ──────────────────────────────────────────────── */
.qzr-gp-save-bar { margin: 4px 0 16px; }
.qzr-gp-save {
  width: 100%;
  background: var(--qz-accent, #16A87A); color: #fff;
  border: 0; border-bottom: 3px solid var(--qz-accent-deep, #0F6E56);
  border-radius: 14px; padding: 14px; font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.qzr-gp-save:hover { background: #149870; }
.qzr-gp-save:disabled { opacity: .6; cursor: default; }

/* ── Zone sensible ───────────────────────────────────────────────────────── */
.qzr-gp-section--danger { border-color: #F3D2D0; background: #FDF4F3; }
.qzr-gp-section--danger .qzr-gp-sec-ico { background: #FBE3E1; color: var(--qz-error, #E24B4A); }
.qzr-gp-danger-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.qzr-gp-danger-row__text { flex: 1 1 200px; }
.qzr-gp-danger-row__text strong { display: block; font-size: 14px; color: var(--qz-text, #06342A); }
.qzr-gp-danger-row__text p { margin: 3px 0 0; font-size: 12.5px; color: var(--qz-muted, #5E8A7C); line-height: 1.45; }
.qzr-gp-danger-btn {
  flex: 0 0 auto;
  background: var(--qz-surface, #fff); color: var(--qz-error, #E24B4A);
  border: 1.5px solid var(--qz-error, #E24B4A); border-radius: 12px;
  padding: 10px 18px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.qzr-gp-danger-btn:hover { background: var(--qz-error, #E24B4A); color: #fff; }

/* ── Sous-vue Rôles & permissions ────────────────────────────────────────── */
.qzr-gp-subhead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.qzr-gp-back {
  width: 36px; height: 36px; flex: 0 0 auto; border: 0; border-radius: var(--qz-r-pill);
  background: var(--qz-surface, #fff); border: 1px solid var(--qz-line, #DCEFE8);
  color: var(--qz-accent-ink, #0F6E56); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.qzr-gp-back:hover { background: var(--qz-accent-soft, #E1F5EE); }
.qzr-gp-subhead__title { font-size: 17px; font-weight: 700; color: var(--qz-text, #06342A); }

/* La sous-vue réutilise les .gdl-* (vnext-groupes-detail.css). Ici on remet le
   conteneur en flux (il était pensé pour une modale bottom-sheet). */
.qzr-gp-roles-mount .gdl-root {
  background: var(--qz-surface, #fff);
  border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: 18px; overflow: hidden;
}
.qzr-gp-roles-mount .gdl-view { max-height: none; }
.qzr-gp-roles-mount .gdl-body { overflow: visible; }
.qzr-gp-roles-mount .gdl-foot { padding-bottom: 16px; }

/* ── E2: favourite-themes multi-select chips ─────────────────────────────── */
.qzr-gp-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.qzr-gp-chip {
  appearance: none;
  border: 1.5px solid var(--qz-line, #e2e8f0);
  background: var(--qz-surface, #fff);
  color: var(--qz-text, #0f2e26);
  border-radius: var(--qz-r-pill);
  padding: 7px 14px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--qz-dur-ui) ease, border-color var(--qz-dur-ui) ease, color var(--qz-dur-ui) ease;
}
.qzr-gp-chip:hover {
  border-color: var(--qz-accent, #16A87A);
}
.qzr-gp-chip.is-on {
  background: var(--qz-accent-soft, #E1F5EE);
  border-color: var(--qz-accent, #16A87A);
  color: var(--qz-accent-ink, #0F6E56);
}