/* ============================================================================================
   VUES DE admin.html (refonte du 10.10 : Facturation, Utilisateurs, Equipes et clubs, Droits,
   Frequentation). Chargee par admin.html SEULEMENT. Tout est prefixe .adm-v-. Tokens seulement.

   Patron commun a chaque vue (decision du fondateur, 10.10 ; esthetique « tableau de bord » le 11.10) :
     1. une BANDE D'INDICATEURS en tete (.adm-kpis, css/admin-shell.css) : la synthese en chiffres ;
     2. « A faire » : une ligne compacte par tache (pastille, texte, boutons petits) ;
     3. des LISTES : vraie table alignee des que le contenu est assez large (requete de conteneur, le
        menu admin mange deja ~300 px au bureau), cartes empilees au telephone seulement ;
     4. le detail technique replie tout en bas.
   Ligne cliquable : survol = fond tres leger (table) ou bordure --flag (carte), rien d'autre.
   ============================================================================================ */

/* Pleine largeur (11.10, demande du fondateur : « le tableau n'est pas pleine largeur ») : plus de plafond
   de 1180 px, les listes prennent toute la place laissee par le menu, comme l'ancienne admin. */
.adm-v{display:flex;flex-direction:column;gap:14px;container-type:inline-size;min-width:0;}
.adm-v > .card{margin:0;padding:14px 16px;border-radius:var(--r);}
.adm-v h2{margin:0;font-size:14px;line-height:1.25;letter-spacing:.04em;}

/* ---- 1. Tete : bande d'indicateurs (ou phrase courte pour Droits), aide en petit dessous ---- */
.adm-v-tete{display:flex;flex-direction:column;gap:8px;min-width:0;}
.adm-v-phrase{margin:0;font-size:15px;line-height:1.45;color:var(--text);overflow-wrap:anywhere;}
.adm-v-phrase b{font-weight:700;}
.adm-v-phrase .adm-v-alerte{color:var(--danger);font-weight:700;}
.adm-v-aide{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted);}
.adm-v-tete-pied{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;}
.adm-v-periode{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);}
.adm-v-periode select{width:auto;min-width:120px;margin:0;padding-top:6px;padding-bottom:6px;font-size:13px;}
.adm-v-note{font-size:12px;color:var(--muted);}

/* ---- Bloc de section : titre + compte a droite ---- */
.adm-v-bloc{display:flex;flex-direction:column;gap:10px;min-width:0;}
.adm-v-bloc-tete{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;}
.adm-v-compte{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;}
.adm-v-calme{margin:0;font-size:13.5px;color:var(--muted);}

/* ---- 2. A faire : une ligne = pastille + constat (+ pourquoi en gris) + boutons petits ---- */
.adm-v-afaire{display:flex;flex-direction:column;min-width:0;}
.adm-v-tache{display:flex;flex-direction:column;gap:8px;padding:9px 0;min-width:0;border-top:1px solid var(--line);}
.adm-v-tache:first-child{border-top:0;padding-top:2px;}
.adm-v-tache > div:first-child{position:relative;padding-left:16px;min-width:0;}
.adm-v-tache > div:first-child::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;
  background:color-mix(in srgb,var(--warn-line) 45%,var(--warn-text));}
.adm-v-tache.adm-v-urgent > div:first-child::before{background:var(--danger);}
.adm-v-tache-t{font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere;}
.adm-v-tache-p{font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:1px;}
.adm-v-actions{display:flex;gap:6px;flex-wrap:wrap;padding-left:16px;}
.adm-v-actions .btn{text-decoration:none;}
/* Boutons d'une ligne : petits et sobres ; l'action principale garde l'accent en contour, pas en aplat. */
.adm-v-tache .btn.sm,.adm-v-ligne .btn.sm{padding:5px 10px;font-size:12.5px;border-radius:var(--r-sm);}
.adm-v-tache .btn.primary{background:var(--surface);color:var(--flag);border-color:color-mix(in srgb,var(--flag) 55%,var(--line));}
.adm-v-tache .btn.primary:hover{background:var(--soft);filter:none;}
@container (min-width:640px){
  .adm-v-tache{flex-direction:row;align-items:center;justify-content:space-between;gap:14px;padding:7px 0;}
  .adm-v-tache:first-child{padding-top:0;}
  .adm-v-actions{flex-shrink:0;padding-left:0;}
}

/* ---- Filtres (puces) et recherche : une barre compacte ---- */
.adm-v-puces{display:flex;gap:4px;flex-wrap:wrap;}
.adm-v-puce{appearance:none;margin:0;min-height:30px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;}
.adm-v-puce:hover{border-color:var(--flag);}
.adm-v-puce[aria-pressed="true"]{background:var(--soft);border-color:var(--flag);color:var(--flag);}
.adm-v-puce:focus-visible{outline:2px solid var(--flag);outline-offset:2px;}
.adm-v-puce span{font-weight:500;color:var(--muted);margin-left:4px;font-variant-numeric:tabular-nums;}
.adm-v-puce[aria-pressed="true"] span{color:inherit;}
.adm-v-puce b{font-weight:600;}
input.adm-v-cherche{margin:0;padding-top:7px;padding-bottom:7px;font-size:14px;}
@container (min-width:640px){
  .adm-v-bloc:has(> .adm-v-puces){display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;}
  .adm-v-bloc:has(> .adm-v-puces) > :not(.adm-v-puces):not(input.adm-v-cherche){grid-column:1 / -1;}
  .adm-v-bloc:has(> .adm-v-puces) > input.adm-v-cherche{max-width:340px;justify-self:end;width:100%;}
}

/* ---- 3. Listes : cartes au telephone ---- */
.adm-v-liste{display:flex;flex-direction:column;gap:6px;min-width:0;}
.adm-v-ligne{display:flex;flex-direction:column;gap:3px;width:100%;margin:0;padding:9px 12px;min-width:0;text-align:left;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font:inherit;font-size:14px;line-height:1.4;}
button.adm-v-ligne,.adm-v-ligne[data-clic]{cursor:pointer;appearance:none;}
button.adm-v-ligne:hover,.adm-v-ligne[data-clic]:hover{border-color:var(--flag);}
.adm-v-ligne:focus-visible{outline:2px solid var(--flag);outline-offset:-2px;}
.adm-v-l1{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0;}
.adm-v-nom{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.adm-v-l1 .adm-v-nom{white-space:normal;overflow-wrap:anywhere;}
.adm-v-nom small{font-weight:400;font-size:12.5px;color:var(--muted);margin-left:6px;}
.adm-v-meta{font-size:13px;color:var(--muted);overflow-wrap:anywhere;}
.adm-v-meta b{color:var(--text);font-weight:600;}
.adm-v-plus{align-self:flex-start;}

/* Pastille d'etat : un mot + une couleur (jamais la couleur seule). Petite, c'est la seule couleur vive. */
.adm-v-pill{flex-shrink:0;display:inline-block;padding:0 7px;border-radius:var(--r-pill);font-size:11.5px;font-weight:600;
  line-height:1.7;white-space:nowrap;background:var(--surface-2);color:var(--muted);}
.adm-v-pill.v-vert{background:var(--green-soft);color:var(--green);}
.adm-v-pill.v-bleu{background:var(--blue-soft);color:var(--blue);}
.adm-v-pill.v-orange{background:var(--soft);color:var(--flag);}
.adm-v-pill.v-ambre{background:var(--warn-bg);color:var(--warn-text);}
.adm-v-pill.v-rouge{background:var(--danger-soft);color:var(--danger);}
.adm-v-bientot{color:var(--warn-text);font-weight:700;}

/* Listes a COLONNES : cellules empilees avec leur libelle au telephone ; table alignee avec une ligne
   d'en-tete quand le contenu est large. */
.adm-v-entete{display:none;}
.adm-v-cel{display:flex;gap:8px;align-items:baseline;font-size:13.5px;min-width:0;}
.adm-v-cel .adm-v-lbl{color:var(--muted);font-size:12.5px;min-width:110px;flex-shrink:0;}
.adm-v-cel .adm-v-nom{white-space:normal;}
.adm-v-argent{font-weight:600;}
.adm-v-unit{color:var(--muted);}
.adm-v-equipes{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12.5px;}
.adm-v-equipes button{appearance:none;border:0;background:none;padding:0;font:inherit;color:var(--flag);cursor:pointer;text-decoration:underline;}

/* Liste « mini » (Utilisateurs, Equipes) au telephone : nom en gras, pastille a droite, le reste sur une
   ligne grise separee par des points. Dans le DOM la pastille vient en premier (flottante a droite au
   telephone) ; en table, `order` la remet en 2e colonne. */
.adm-v-mini .adm-v-ligne{display:block;}
.adm-v-mini .adm-v-cel{display:inline;font-size:13px;color:var(--muted);}
.adm-v-mini .adm-v-cel .adm-v-lbl{display:none;}
.adm-v-mini .adm-v-c-etat{float:right;margin-left:8px;}
.adm-v-mini .adm-v-c-nom{display:block;font-size:14px;color:var(--text);margin-bottom:2px;}
.adm-v-mini .adm-v-c-meta + .adm-v-c-meta::before{content:"\00a0·\00a0";color:var(--muted);}
.adm-v-mini .adm-v-c-vide{display:none;}
.adm-v-mini .adm-v-c-large{display:none;}   /* colonne de table seulement (le detail est dans la fiche) */
.adm-v-verif{color:var(--green);font-weight:600;font-size:11.5px;}

/* ---- TRI (11.10) : en-tetes cliquables (table) et « Trier par » (telephone). La fleche reprend celle des
   tableaux triables de l'app (theme.css, th.tc-th-sort .tc-sort-ar) : deux triangles, l'actif plein. ---- */
.adm-v-tri{appearance:none;display:inline-flex;align-items:center;gap:0;margin:0;padding:0;border:0;background:none;
  font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;user-select:none;min-width:0;}
.adm-v-tri > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.adm-v-tri.adm-v-num{justify-content:flex-end;}
.adm-v-tri:hover,.adm-v-tri.active{color:var(--flag);}
.adm-v-tri:focus-visible{outline:2px solid var(--flag);outline-offset:2px;border-radius:var(--r-sm);}
.adm-v-tri .tc-sort-ar{position:relative;display:inline-block;flex-shrink:0;width:8px;height:13px;margin-left:5px;}
.adm-v-tri .tc-sort-ar::before,
.adm-v-tri .tc-sort-ar::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:0;height:0;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;opacity:.4;}
.adm-v-tri .tc-sort-ar::before{top:1px;border-bottom:5px solid currentColor;}
.adm-v-tri .tc-sort-ar::after{bottom:1px;border-top:5px solid currentColor;}
.adm-v-tri .tc-sort-ar.asc::after,.adm-v-tri .tc-sort-ar.desc::before{display:none;}
.adm-v-tri .tc-sort-ar.asc::before{top:50%;transform:translate(-50%,-50%);opacity:1;}
.adm-v-tri .tc-sort-ar.desc::after{bottom:50%;transform:translate(-50%,50%);opacity:1;}
.adm-v-trisel{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:0;}
.adm-v-trisel select{width:auto;flex:1 1 auto;max-width:280px;margin:0;padding-top:6px;padding-bottom:6px;font-size:13px;}
input.adm-v-cherche-fact{max-width:360px;}

@container (min-width:640px){
  /* Table : le tri se fait par les en-tetes, le menu « Trier par » du telephone disparait. */
  .adm-v-cols .adm-v-trisel{display:none;}
  /* Table : un seul cadre (la carte), des lignes de ~38 px separees par un filet fin, en-tetes discrets. */
  .adm-v-cols .adm-v-entete{display:grid;gap:12px;padding:0 10px 7px;font-size:11.5px;font-weight:600;color:var(--muted);
    text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line);}
  .adm-v-cols .adm-v-liste{gap:0;}
  .adm-v-cols .adm-v-ligne{display:grid;gap:2px 12px;align-items:center;min-height:38px;padding:6px 10px;
    border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;}
  .adm-v-cols .adm-v-ligne:last-child{border-bottom:0;}
  .adm-v-cols button.adm-v-ligne:hover,.adm-v-cols .adm-v-ligne[data-clic]:hover{background:var(--surface-2);}
  .adm-v-cols .adm-v-lbl{display:none;}
  .adm-v-cols .adm-v-cel{font-size:14px;}
  .adm-v-cols .adm-v-num,.adm-v-cols .adm-v-entete .adm-v-num{justify-content:flex-end;text-align:right;font-variant-numeric:tabular-nums;}
  .adm-v-cols .adm-v-equipes{grid-column:1 / -1;}
  .adm-v-cols4 .adm-v-entete,.adm-v-cols4 .adm-v-ligne{grid-template-columns:2.2fr 1fr 1.3fr 1.1fr;}
  .adm-v-cols3 .adm-v-entete,.adm-v-cols3 .adm-v-ligne{grid-template-columns:2fr 1fr 2fr;}
  .adm-v-cols2 .adm-v-entete,.adm-v-cols2 .adm-v-ligne{grid-template-columns:2fr 2.4fr;}
  /* 11.10 : colonnes reprises de l'ancienne admin (Utilisateurs : e-mail, n° client ; Equipes : responsable,
     clips, stockage, date de creation). Ordre = celui des en-tetes (nom, pastille, puis le reste). */
  .adm-v-cols-usr .adm-v-entete,.adm-v-cols-usr .adm-v-ligne{grid-template-columns:minmax(0,1.5fr) 104px minmax(0,1.9fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.1fr) 56px 92px;}
  .adm-v-cols-eq .adm-v-entete,.adm-v-cols-eq .adm-v-ligne{grid-template-columns:minmax(0,2fr) 112px minmax(0,.9fr) minmax(0,1.2fr) 72px 88px 56px minmax(0,1.1fr) 76px minmax(0,1fr);}
  /* Liste mini passee en table : la pastille reprend sa colonne, les unites du telephone disparaissent. */
  .adm-v-mini .adm-v-ligne{display:grid;}
  .adm-v-mini .adm-v-cel{display:flex;order:2;font-size:14px;color:var(--text);}
  .adm-v-mini .adm-v-c-nom{order:0;margin:0;}
  .adm-v-mini .adm-v-c-etat{order:1;float:none;margin:0;}
  .adm-v-mini .adm-v-c-meta{order:2;}
  .adm-v-mini .adm-v-c-meta + .adm-v-c-meta::before{content:none;}
  .adm-v-mini .adm-v-c-vide{display:flex;}
  .adm-v-mini .adm-v-c-large{display:flex;}
  .adm-v-mini .adm-v-unit{display:none;}
  .adm-v-mini .adm-v-c-doux{color:var(--muted);}
  .adm-v-mini .adm-v-cel > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}

/* ---- Replis (details) ---- */
.adm-v-plie{display:block;}
.adm-v-plie > summary{cursor:pointer;font-weight:600;font-size:14px;list-style:none;display:flex;align-items:center;gap:10px;min-height:28px;}
.adm-v-plie > summary::-webkit-details-marker{display:none;}
.adm-v-plie > summary::before{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--muted);transform:rotate(-90deg);transition:transform var(--t-fast,.15s);flex-shrink:0;}
.adm-v-plie[open] > summary::before{transform:none;}
.adm-v-plie[open] > summary{margin-bottom:10px;}
.adm-v-plie > summary:focus-visible{outline:2px solid var(--flag);outline-offset:2px;border-radius:var(--r-sm);}
.adm-v-plie-leger{border:1px dashed var(--line);border-radius:var(--r-sm);padding:8px 12px;}
.adm-v-plie-leger > summary{color:var(--muted);font-weight:600;}
.adm-v-tech{font-size:12.5px;color:var(--muted);}
.adm-v-tech > summary{font-weight:600;font-size:13px;color:var(--muted);}
.adm-v-tech-corps{display:flex;flex-direction:column;gap:4px;line-height:1.5;overflow-wrap:anywhere;}
.adm-v-pied{margin:0;font-size:12px;color:var(--muted);}

/* ---- Frequentation : qui est la en ce moment, explications sous les titres ---- */
.adm-v-qui{display:flex;flex-wrap:wrap;gap:4px;}
.adm-v-qui:empty{display:none;}
.adm-v-qui span{font-size:12px;font-weight:600;background:var(--surface-2);color:var(--text);border-radius:var(--r-pill);padding:2px 8px;}
.adm-v-qui span i{font-style:normal;font-weight:500;color:var(--muted);}
.adm-v .aud-block .adm-v-aide{font-size:12px;margin:-4px 0 8px;}
.adm-v .chart-wrap + .chart-legend{margin-top:8px;}
.adm-v > .cols{gap:14px;margin:0;}
.adm-v > .cols > .card{margin:0;padding:14px 16px;border-radius:var(--r);}

/* Droits : tableau dans son repli, defilement horizontal maitrise. */
.adm-v-droits{display:flex;flex-direction:column;gap:12px;}
.adm-v-droits .tbl-wrap{overflow-x:auto;}
.adm-v-droits-pied{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}

/* ---- Fiches (equipe, personne) : modales existantes, remises en ordre ---- */
.adm-v-fiche{display:flex;flex-direction:column;gap:12px;}
.adm-v-fiche h3{margin:0;}
.adm-v-fiche .ref{margin:0;overflow-wrap:anywhere;}
.adm-v-fiche .m-sec{margin-top:4px;}
.adm-v-fiche .m-sec h4{display:flex;align-items:baseline;gap:6px;margin:0 0 8px;}
.adm-v-fiche-etat{display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.45;}
.adm-v-fiche-etat:empty{display:none;}
.adm-v-fiche-etat > div{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.adm-v-fiche-etat .adm-v-lbl{color:var(--muted);min-width:80px;}
.adm-v-lab{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px;}
.adm-v-fiche input.search,.adm-v-fiche select.search{margin:0;width:100%;}
.adm-v-fiche-save{margin-top:12px;}
.adm-v-membres{display:flex;flex-direction:column;gap:6px;font-size:14px;max-height:240px;overflow:auto;}
.adm-v-membre{display:flex;align-items:center;gap:8px;min-width:0;}
.adm-v-membre b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
.adm-v-membre span{color:var(--muted);font-size:13px;white-space:nowrap;}
.adm-v-ajout{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.adm-v-ajout-q{flex:1 1 200px;position:relative;min-width:0;}
.adm-v-ajout select.search{width:auto;flex:0 0 auto;}
.adm-v-fiche-ligne{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.adm-v-fiche-ligne h4{margin:0 0 2px;}
.adm-v-fiche-pied{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.adm-v-fiche-pied .btn.ghost{margin-left:auto;}
.adm-v-fiche .m-roles{margin-top:4px;}
.adm-v-fiche .m-team{flex-wrap:wrap;}
.adm-v-fiche .m-team b{flex:1 1 60%;white-space:normal;overflow-wrap:anywhere;}
.adm-v-fiche .m-roles .btn{margin-top:10px;}

.adm-v-centre{text-align:center;}
.adm-v-droits input[type=checkbox]{accent-color:var(--flag);width:18px;height:18px;}
/* Un bouton (.btn = inline-flex) masque par l'attribut hidden doit le rester : 2 classes battent .btn. */
.adm-v [hidden],.adm-v-fiche [hidden]{display:none;}

/* Au doigt : cibles d'au moins 44 px. En fin de feuille (meme poids que les regles de base). */
@media (hover:none){
  .adm-v-puce{min-height:44px;}
  .adm-v-ligne{min-height:44px;}
  .adm-v-equipes button{min-height:44px;}
  .adm-v-tache .btn.sm{min-height:44px;}
}