/* APS — admin/utilisateurs/utilisateurs.css — 2026-08-13
   S'ajoute à doc-assets.css, chargé avant : même écran de ressource (liste +
   éditeur), seuls les champs changent. Ne sont écrites ici que les formes que
   cet écran est le seul à avoir — onglets, grilles de cases, invitation. */

/* Deux onglets : les groupes et les comptes sont deux listes du même sujet.
   Un seul écran plutôt que deux, parce qu'on passe son temps à aller de l'un
   à l'autre — on coche un groupe en regardant qui est dedans. */
.ut-onglets { display: flex; gap: 6px; margin: 0 0 16px; }
.ut-onglet {
  background: transparent; color: var(--adm-dim);
  border: 1px solid transparent; border-radius: 8px;
  padding: 7px 14px; font-size: 13px; cursor: pointer; font: inherit;
}
.ut-onglet:hover { color: var(--adm-text); }
.ut-onglet-actif {
  background: var(--adm-surface); border-color: var(--adm-border);
  color: var(--adm-text); font-weight: 600;
}

/* Grille de cases : organisations, groupes, outils. Deux colonnes pour que la
   liste tienne sous l'oeil sans défiler — au-delà, on ne compare plus. */
.ut-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.ut-case, .ut-bascule {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 2px; font-size: 13px; cursor: pointer; color: var(--adm-text);
}
.ut-case input, .ut-bascule input {
  width: 15px; height: 15px; accent-color: var(--adm-accent); cursor: pointer; flex: none;
}
.ut-case-aide { color: var(--adm-dim); font-size: 11.5px; }
.ut-bascule { margin-top: 14px; }

/* Les outils sont groupés par famille : « Builders », « Administration »,
   « Développement ». Sans ce regroupement, douze cases à la file ne disent pas
   qu'on est en train d'ouvrir l'administration ou le code. */
.ut-famille { margin-bottom: 12px; }
.ut-famille-titre {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--adm-dim); margin: 10px 0 4px;
}
/* Un outil réservé se voit AVANT d'être coché, pas après. */
.ut-reserve { color: var(--adm-accent); font-size: 10.5px; }

.ut-vide { color: var(--adm-dim); font-size: 12.5px; padding: 6px 2px; }

/* ── Invitation ── */
.ut-invitation {
  margin-top: 18px; padding: 14px;
  background: var(--adm-surface2); border: 1px solid var(--adm-border);
  border-radius: 8px;
}
.ut-invitation-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ut-invitation-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* Trois états, trois couleurs : activé, invité, expiré. C'est la première
   chose qu'on cherche en ouvrant un compte. */
.ut-etat {
  display: inline-block; border-radius: 4px; padding: 2px 8px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid var(--adm-border); color: var(--adm-dim);
}
.ut-etat[data-etat="active"] { color: #6fc7a8; border-color: rgba(111,199,168,.4); }
.ut-etat[data-etat="invite"] { color: var(--adm-accent); border-color: rgba(214,210,51,.4); }
.ut-etat[data-etat="expire"] { color: var(--adm-danger); border-color: rgba(231,76,60,.4); }

.ut-lien-ligne { display: flex; gap: 8px; align-items: center; }
.ut-lien {
  flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
}

/* Marque de liste : le groupe système et le compte non activé se repèrent sans
   ouvrir la fiche. */
.ut-marque {
  display: inline-block; border-radius: 4px; padding: 1px 6px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid var(--adm-border); color: var(--adm-dim);
}
.ut-marque[data-ton="systeme"] { color: #7fb2e5; border-color: rgba(127,178,229,.35); }
.ut-marque[data-ton="invite"]  { color: var(--adm-accent); border-color: rgba(214,210,51,.4); }
.ut-marque[data-ton="expire"]  { color: var(--adm-danger); border-color: rgba(231,76,60,.4); }
.ut-liste-ligne { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }

.da-editeur[hidden], .da-vide[hidden] { display: none; }

@media (max-width: 900px) {
  .ut-cases { grid-template-columns: 1fr; }
}