/*
 * PRESTKA V15 — Groupes de profil (LOT 4, SUPER PROMPT DG 2026-07-20).
 *
 * Fichier dédié, lié automatiquement par Propshaft (`stylesheet_link_tag :app`).
 * ⚠ SURTOUT pas d'@import : il serait résolu par le navigateur vers un chemin non
 * digesté → 404 (audit 2026-07-06, quick win QW1).
 *
 * Toutes les teintes viennent de tokens existants, résolus côté helper
 * (ProfileGroupsHelper#pgroup_dot_style) : aucune couleur en dur ici.
 */

/* Pastille du groupe — réutilise le médaillon .idx-avatar, la teinte arrive en style
   inline calculé par le helper (elle dépend de la donnée, pas de la feuille de style). */
.pgroup-dot {
  border: 1px solid transparent;
  background-image: none !important; /* neutralise le dégradé par défaut de .idx-avatar */
}
.pgroup-dot .icon { width: 18px; height: 18px; }

/* ── Choix de teinte (formulaire) ──
   Pattern CSP-safe du projet : radio caché + état visuel en :has(:checked). */
.pgroup-colors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* ── Aperçu en direct de la pastille ──
   Le conteneur .pgroup-colorbox « voit » à la fois le radio coché et la pastille
   d'aperçu : à chaque changement de teinte, la pastille est repeinte instantanément,
   en CSS pur (aucun JS, donc immunisé CSP). Une règle par teinte de la palette. */
.pgroup-preview {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-3);
}
.pgroup-preview__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}
.pgroup-preview__dot { transition: background var(--dur-fast) var(--ease-silk), color var(--dur-fast) var(--ease-silk); }

.pgroup-colorbox:has(.pgroup-color--indigo    .sr-only-checkbox:checked) .pgroup-preview__dot { --pg-tint: var(--prestka-light); }
.pgroup-colorbox:has(.pgroup-color--bleu      .sr-only-checkbox:checked) .pgroup-preview__dot { --pg-tint: var(--setka-primary); }
.pgroup-colorbox:has(.pgroup-color--turquoise .sr-only-checkbox:checked) .pgroup-preview__dot { --pg-tint: var(--status-event-valide); }
.pgroup-colorbox:has(.pgroup-color--teal      .sr-only-checkbox:checked) .pgroup-preview__dot { --pg-tint: var(--webtka-primary); }
.pgroup-colorbox:has(.pgroup-color--vert      .sr-only-checkbox:checked) .pgroup-preview__dot { --pg-tint: var(--status-booking-accepte); }
.pgroup-colorbox:has(.pgroup-color--gold      .sr-only-checkbox:checked) .pgroup-preview__dot { --pg-tint: var(--gold); }
.pgroup-colorbox:has(.pgroup-color--orange    .sr-only-checkbox:checked) .pgroup-preview__dot { --pg-tint: var(--priority-important); }
.pgroup-colorbox:has(.pgroup-color--rouge     .sr-only-checkbox:checked) .pgroup-preview__dot { --pg-tint: var(--status-event-a-valider); }
.pgroup-colorbox:has(.pgroup-color--violet    .sr-only-checkbox:checked) .pgroup-preview__dot { --pg-tint: var(--status-event-non-cloture); }
.pgroup-colorbox:has(.pgroup-color--ardoise   .sr-only-checkbox:checked) .pgroup-preview__dot { --pg-tint: var(--neutral-500); }

.pgroup-preview__dot {
  background: color-mix(in srgb, var(--pg-tint, var(--prestka-light)) 22%, transparent) !important;
  color: var(--pg-tint, var(--prestka-light));
  border-color: color-mix(in srgb, var(--pg-tint, var(--prestka-light)) 45%, transparent);
}
.pgroup-color {
  position: relative;              /* ancre .sr-only-checkbox (absolute) — leçon LOT 1 */
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-silk),
              box-shadow var(--dur-fast) var(--ease-silk);
}
.pgroup-color:has(.sr-only-checkbox:checked) {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px var(--gold-soft);
  border-color: var(--gold);
}
.pgroup-color:has(.sr-only-checkbox:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* ── Badges de groupe sur une fiche profil ── */
.pgroup-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.pgroup-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pgroup-badge .icon { width: 12px; height: 12px; }

/* ── Sélecteur d'affectation (modale « Attribuer à un groupe ») ── */
.pgroup-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 320px;
  overflow-y: auto;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  margin-bottom: var(--space-4);
}
.pgroup-option {
  position: relative;              /* ancre l'input caché */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  /* Leçon Lot A : tout élément interactif local pose un background explicite. */
  background: var(--surface-solid);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-silk),
              background var(--dur-fast) var(--ease-silk);
}
.pgroup-option:hover { border-color: var(--line-strong); }
.pgroup-option:has(.sr-only-checkbox:checked) {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 10%, var(--surface-solid));
}
.pgroup-option:has(.sr-only-checkbox:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
.pgroup-option__avatar { width: 30px; height: 30px; font-size: 12px; flex: none; }
.pgroup-option__name {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--text-sm);
}
.pgroup-option__count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  white-space: nowrap;
}
/* Coche visible uniquement quand l'option est sélectionnée. */
.pgroup-option__check { opacity: 0; color: var(--gold); transition: opacity var(--dur-fast); }
.pgroup-option:has(.sr-only-checkbox:checked) .pgroup-option__check { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .pgroup-color,
  .pgroup-color:has(.sr-only-checkbox:checked),
  .pgroup-option,
  .pgroup-option__check { transition: none; transform: none; }
}

/* Fallback verre : sans backdrop-filter, les surfaces translucides doivent devenir
   opaques pour rester lisibles. */
@supports not (backdrop-filter: blur(1px)) {
  .pgroup-picker { background: var(--surface-solid); }
}