/* =====================================================================
   admin.css — espace administrateur
   ===================================================================== */

.admin-page {
  min-height: 100vh;
  background: var(--fond);
}

/* ---------------------------------------------------------------------
   Écran de connexion
   --------------------------------------------------------------------- */
.connexion {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--marge-laterale);
  background: var(--bleu);
}

.connexion__carte {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border-radius: var(--rayon-l);
  padding: var(--e-6) var(--e-5);
  display: grid;
  gap: var(--e-4);
}

.connexion__titre {
  font-family: var(--police-titre);
  font-size: var(--t-lg);
  text-align: center;
}

.connexion__sous-titre {
  text-align: center;
  color: var(--texte-faible);
  font-size: var(--t-petit);
  margin-top: -8px;
}

/* ---------------------------------------------------------------------
   Coquille de l'application (une fois connecté)
   --------------------------------------------------------------------- */
.admin-coquille {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

/* Sans ceci, un enfant de grille refuse de rétrécir sous la largeur de
   son contenu (min-width implicite : auto) — le débordement horizontal
   de .admin-nav (overflow-x: auto) se propagerait alors à toute la page
   au lieu de rester confiné dans son propre scroll interne. */
.admin-coquille > * {
  min-width: 0;
}

.admin-entete {
  position: sticky;
  top: 0;
  z-index: var(--z-entete);
  background: var(--bleu);
  color: var(--texte-invers);
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0 var(--e-3);
  min-height: 60px;
}

@media (min-width: 480px) {
  .admin-entete { gap: var(--e-3); padding: 0 var(--marge-laterale); }
}

.admin-entete__titre {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: var(--t-md);
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-entete__role {
  flex: none;
  font-size: var(--t-micro);
  color: var(--texte-invers-doux);
  border: 1px solid var(--filet-or-faible);
  border-radius: var(--rayon-rond);
  padding: 3px 10px;
}

.admin-pwa-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2);
  padding: var(--e-2) var(--marge-laterale);
  background: var(--surface);
  border-bottom: 1px solid var(--filet);
}

.admin-pwa-actions[hidden] { display: none; }

.admin-pwa-actions__etat {
  flex: 1 1 100%;
  color: var(--texte-faible);
  font-size: var(--t-petit);
}

.admin-pwa-actions__etat:empty { display: none; }

@media (min-width: 520px) {
  .admin-pwa-actions__etat { flex: 1 1 auto; }
}

/* En dessous de 340px, le badge de rôle et le bouton de déconnexion ne
   tiennent plus ensemble même titre réduit à zéro — le badge, purement
   informatif, cède la place au bouton, qui lui est actionnable. */
@media (max-width: 340px) {
  .admin-entete__role { display: none; }
}

/* Navigation : ligne horizontale scrollable sur mobile, colonne sur desktop */
.admin-nav {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  background: var(--surface);
  border-bottom: 1px solid var(--filet);
  padding: 0 var(--marge-laterale);
}

.admin-nav__lien {
  flex: none;
  padding: 12px var(--e-3);
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--texte-faible);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.admin-nav__lien[aria-current="page"] {
  color: var(--bleu);
  border-bottom-color: var(--or);
}

.admin-corps {
  padding: var(--e-5) var(--marge-laterale) var(--e-8);
  max-width: 1100px;
  margin-inline: auto;
  width: 100%;
}

@media (min-width: 900px) {
  .admin-nav { padding: 0 var(--e-6); }
  .admin-corps { padding: var(--e-6); }
}

/* ---------------------------------------------------------------------
   Cartes de statistiques
   --------------------------------------------------------------------- */
.stats-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-3);
  margin-bottom: var(--e-6);
}

@media (min-width: 700px) {
  .stats-grille { grid-template-columns: repeat(4, 1fr); }
}

.stat-carte {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-m);
  padding: var(--e-4);
}

.stat-carte__valeur {
  font-family: var(--police-titre);
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--bleu);
}

.stat-carte__libelle {
  font-size: var(--t-micro);
  color: var(--texte-faible);
  margin-top: 2px;
}

.stat-carte--alerte .stat-carte__valeur { color: var(--erreur); }
.stat-carte--succes .stat-carte__valeur { color: var(--succes); }

.repartition {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-m);
  padding: var(--e-5);
  margin-bottom: var(--e-6);
}

.repartition__titre {
  font-weight: 600;
  font-size: var(--t-petit);
  margin-bottom: var(--e-3);
}

.repartition__ligne {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-petit);
  padding: 6px 0;
}

.repartition__barre-fond {
  height: 8px;
  background: var(--surface-douce);
  border-radius: var(--rayon-rond);
  overflow: hidden;
}
.repartition__barre {
  height: 100%;
  background: var(--or);
  border-radius: var(--rayon-rond);
}

/* ---------------------------------------------------------------------
   Barre d'outils (recherche, filtres, export)
   --------------------------------------------------------------------- */
.outils {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
  align-items: center;
}

.outils__recherche { flex: 1 1 220px; }

.outils select.champ__saisie { width: auto; min-width: 160px; }

/* ---------------------------------------------------------------------
   Table admin (défile horizontalement plutôt que de casser la mise en page)
   --------------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-m);
  background: var(--surface);
}

table.table-admin {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-size: var(--t-petit);
}

.table-admin th {
  text-align: left;
  padding: 10px 12px;
  background: var(--surface-douce);
  color: var(--texte-faible);
  font-weight: 600;
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.table-admin td {
  padding: 10px 12px;
  border-top: 1px solid var(--filet);
  white-space: nowrap;
}

.table-admin tbody tr:hover { background: var(--surface-douce); }

.table-admin td.col-souple { white-space: normal; min-width: 160px; }

.lien-discret {
  color: var(--bleu);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--filet-fort);
}

.puce {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--rayon-rond);
  font-size: var(--t-micro);
  font-weight: 700;
  white-space: nowrap;
}
.puce--pending  { background: #FEF3C7; color: #92400E; }
.puce--payment_started { background: #DBEAFE; color: #1E40AF; }
.puce--paid     { background: #DCFCE7; color: #166534; }
.puce--failed   { background: #FEE2E2; color: #991B1B; }
.puce--cancelled,
.puce--expired  { background: #F1F5F9; color: #475569; }

.puce-verifier {
  color: var(--erreur);
  font-weight: 700;
  font-size: var(--t-micro);
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--e-4);
  font-size: var(--t-petit);
  color: var(--texte-faible);
}

/* ---------------------------------------------------------------------
   Détail d'inscription / formulaires admin
   --------------------------------------------------------------------- */
.fiche {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-m);
  padding: var(--e-5);
  display: grid;
  gap: var(--e-4);
  max-width: 640px;
}

.fiche__section-titre {
  font-weight: 600;
  font-size: var(--t-petit);
  color: var(--texte-faible);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--filet);
  padding-top: var(--e-4);
}
.fiche__section-titre:first-child { border-top: 0; padding-top: 0; }

.action-barre {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

/* ---------------------------------------------------------------------
   Tables simples (paroisses, doyennés, audit)
   --------------------------------------------------------------------- */
.bascule {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
}
.bascule input { opacity: 0; width: 0; height: 0; }
.bascule__piste {
  position: absolute; inset: 0;
  background: var(--filet-fort);
  border-radius: var(--rayon-rond);
  transition: background-color var(--duree-courte);
  cursor: pointer;
}
.bascule__piste::before {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  left: 3px; top: 3px;
  background: var(--blanc);
  border-radius: 50%;
  transition: transform var(--duree-courte);
}
.bascule input:checked + .bascule__piste { background: var(--succes); }
.bascule input:checked + .bascule__piste::before { transform: translateX(16px); }

.message-etat {
  padding: var(--e-4);
  text-align: center;
  color: var(--texte-faible);
  font-size: var(--t-petit);
}