/*
 * Bandeaux « FERMÉE » et « TERMINÉE » en biais sur le bouton d'inscription.
 * Utilisé par `render_status_banners_wrapper()` dans fonctions_evenement.php
 * pour décorer le CTA de manière uniforme :
 *   - Planning (tableau activités + cards mobile)
 *   - Fiche activité (hero + tabs)
 *   - Widget dashboard « Activités à venir »
 *   - Fiche personnel onglet Participations
 *   - Timeline calendrier personnel
 *   - Tableau de garde (remplacements)
 *
 * Code couleur (2 états distincts, choisis pour être lisibles en un coup d'œil) :
 *   - FERMÉE (rouge)   : inscription verrouillée côté admin — action bloquée.
 *   - TERMINÉE (gris)  : l'activité est dans le passé — action caduque.
 *
 * #10527 — l'état « COMPLET » (bleu) a été retiré : le remplissage est lisible
 * sur la jauge, et seule la fermeture de l'activité bloque l'inscription.
 *
 * Priorité (cumul masqué côté PHP) : TERMINÉE > FERMÉE.
 */

.cta-status-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 6px;
  vertical-align: middle;
  /* clip-path crée un masque de peinture dur que z-index ne peut pas dépasser,
     contrairement à overflow:hidden seul qui est contourné par les stacking contexts. */
  clip-path: inset(0 round 6px);
}

/*
 * Contraste minimum garanti pour le bouton à l'intérieur du wrapper.
 *
 * Contexte : pour les activités fermées/annulées, `inscriptionActivite()`
 * rend un `<button class="btn btn-secondary">`. Avec le theme custom du
 * projet, `btn-secondary` peut se retrouver avec `background-color:
 * rgb(255,255,255)` ET `border-color: rgb(255,255,255)` → bouton blanc
 * sur fond blanc du hero, seul le texte flotte (bouton "invisible").
 *
 * On force un fond gris clair + bordure subtile + couleur texte plus
 * foncée pour garantir la visibilité en toutes circonstances, sans
 * empiéter sur les btn-success/btn-warning/btn-primary qui gardent
 * leurs couleurs propres.
 */
.cta-status-wrapper > .btn-secondary,
.cta-status-wrapper > .btn.btn-secondary {
  background-color: #e9ecef !important;
  border-color: #ced4da !important;
  color: #495057 !important;
}
.cta-status-wrapper > .btn-secondary:hover,
.cta-status-wrapper > .btn.btn-secondary:hover {
  background-color: #dee2e6 !important;
  border-color: #adb5bd !important;
  color: #212529 !important;
}

.cta-status-banner {
  position: absolute;
  top: 8px;
  right: -30px;
  width: 100px;
  height: 12px;
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .05em;
  transform: rotate(33deg);
  transform-origin: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  text-transform: uppercase;
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, .35);
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  z-index: 2;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.cta-status-banner--ferme {
  /* Rouge bloquant — activité fermée aux inscriptions. */
  background: linear-gradient(90deg, #dc2626, #991b1b);
}

.cta-status-banner--bloquee {
  /* Rouge bloquant — désinscription verrouillée par checkUnsubscribe
     (J-X dépassé, etc.). Même teinte que --ferme : signal "interdit". */
  background: linear-gradient(90deg, #dc2626, #991b1b);
}

.cta-status-banner--termine {
  /* Gris neutre — l'activité est terminée (date passée). État caduc, pas
     d'action admin possible : on se distingue du rouge bloquant. */
  background: linear-gradient(90deg, #6b7280, #374151);
}

.cta-status-wrapper--choice.cta-status-wrapper--ended > .btn {
  min-width: 118px;
  padding-right: 34px;
}

/* #10527 — le bandeau « COMPLET » (bleu) a été retiré : le remplissage est
   lisible sur la jauge, seule la fermeture de l'activité bloque l'inscription. */

/* ─────────────────────────────────────────────────────────────
   Chip « Conflit d'horaire »
   Remplace l'ancien triangle d'alerte icône-seule (orange) qui, sur l'onglet
   personnel en mobile, débordait la colonne bouton (~56px) et poussait le CTA
   hors écran. Affiché dans la colonne ACTIVITÉ avec un libellé explicite, et
   cliquable (ouvre la modale listant les activités en conflit).
   Style AUTONOME (ne dépend pas de la base .eb-chip d'evenement_choice.css, non
   chargée sur l'onglet personnel). Défini ici car cta_status_banners.css est
   chargé partout où la liste des participations s'affiche.
   Orange : reprend la sémantique « attention » du triangle qu'il remplace.
   ───────────────────────────────────────────────────────────── */
.eb-chip-conflit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
  background: #ffedd5;
  color: #9a3412;
  border: 1px solid rgba(234, 88, 12, .40);
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
}
.eb-chip-conflit:hover {
  background: #fed7aa;
  color: #9a3412;
  text-decoration: none;
}
.eb-chip-conflit::before {
  content: "\f071"; /* fa-triangle-exclamation */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  font-size: 9px;
}

/* ─────────────────────────────────────────────────────────────
   Adaptations par contexte d'affichage
   ───────────────────────────────────────────────────────────── */

/* Context hero (fiche activité) : bouton plus grand, bandeau plus grand. */
.cta-status-wrapper--display .cta-status-banner {
  top: 11px;
  right: -34px;
  width: 110px;
  height: 14px;
  font-size: 8px;
}

/* Vue cartes mobile (.eb-card-cta) : bouton pleine largeur → wrapper block. */
.eb-card-cta .cta-status-wrapper,
.eb-card-cta .cta-status-wrapper--choice {
  flex: 1;
  display: block;
  width: 100%;
}
.eb-card-cta .cta-status-wrapper .btn {
  width: 100%;
}
.eb-card-cta .cta-status-banner {
  top: 12px;
  right: -36px;
  width: 120px;
  height: 16px;
  font-size: 9px;
  letter-spacing: .08em;
}

/* Table responsive étroite (≤767.98px) — bouton plus petit, bandeau réduit. */
@media (max-width: 767.98px) {
  .cta-status-banner {
    top: 6px;
    right: -26px;
    width: 90px;
    height: 11px;
    font-size: 6.5px;
  }
  .cta-status-wrapper--display .cta-status-banner {
    top: 9px;
    right: -30px;
    width: 100px;
    height: 13px;
    font-size: 7.5px;
  }
}