/*
 * 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;
  /* overflow:hidden + clip-path = filet de sécurité UNIQUEMENT. IMPORTANT : sur
     Chrome récent, quand le CTA voisin est un `.btn` Bootstrap, le bandeau (couche
     composite via transform:rotate + z-index) ÉCHAPPE à ce masque d'ANCÊTRE et
     déborde du bouton (le clip ajouté en 767e679e fonctionnait avant un changement
     de compositing de Chrome). Le vrai cadrage se fait donc par un `clip-path`
     porté par le BANDEAU LUI-MÊME (self-clip, toujours honoré même sur la couche
     composite) : un polygone calé sur les bords haut/droit du bouton qui reproduit
     le ruban de coin affleurant sans dépendre de ce clip d'ancêtre. Cf. les
     `clip-path: polygon(...)` sur .cta-status-banner (un par contexte). */
  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: var(--eb-surface-hover) !important;
  border-color: var(--eb-border) !important;
  color: var(--eb-text) !important;
}
.cta-status-wrapper > .btn-secondary:hover,
.cta-status-wrapper > .btn.btn-secondary:hover {
  background-color: var(--eb-bg) !important;
  border-color: var(--eb-border) !important;
  color: var(--eb-text) !important;
}

.cta-status-banner {
  position: absolute;
  /* Ruban de coin en biais : il DÉBORDE volontairement le coin haut-droit, et le
     `clip-path` (self-clip) le retaille aux bords haut+droit du bouton → aspect
     ruban affleurant. Le polygone est calé sur cette géométrie (angle 33°) + une
     taille de bouton représentative ; les deux coupes visibles (haut, droit) sont
     indépendantes de la largeur du bouton (bandeau ancré au coin). */
  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;
  clip-path: polygon(33.5px 0, 70px 0, 77.7px 11.9px, 77.5px 12px, 15.1px 12px);
  -webkit-clip-path: polygon(33.5px 0, 70px 0, 77.7px 11.9px, 77.5px 12px, 15.1px 12px);
  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,
.cta-status-wrapper--choice.cta-status-wrapper--bloquee > .btn {
  /* Réserve la largeur du bandeau en biais (TERMINÉE / BLOQUÉE) pour éviter
     que le libellé du bouton (« Terminée », « Se désinscrire ») ne passe
     sous le bandeau et se retrouve tronqué (« Se désinsc… »). */
  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: var(--eb-warning-light);
  color: var(--eb-warning);
  border: 1px solid rgba(234, 88, 12, .40);
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
}
.eb-chip-conflit:hover {
  background: var(--eb-warning-light);
  color: var(--eb-warning);
  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, ruban plus grand.
   clip-path recalculé pour cette géométrie + bouton hero ~121x40. */
.cta-status-wrapper--display .cta-status-banner {
  top: 11px;
  right: -34px;
  width: 110px;
  height: 14px;
  font-size: 8px;
  clip-path: polygon(32.7px 0, 75.5px 0, 84.6px 14px, 11.2px 14px);
  -webkit-clip-path: polygon(32.7px 0, 75.5px 0, 84.6px 14px, 11.2px 14px);
}

/* 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;
  clip-path: polygon(35.6px 0, 83.4px 0, 93.8px 16px, 11px 16px);
  -webkit-clip-path: polygon(35.6px 0, 83.4px 0, 93.8px 16px, 11px 16px);
}

/* 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;
    clip-path: polygon(32.4px 0, 64.1px 0, 71px 10.7px, 70.5px 11px, 15.4px 11px);
    -webkit-clip-path: polygon(32.4px 0, 64.1px 0, 71px 10.7px, 70.5px 11px, 15.4px 11px);
  }
  .cta-status-wrapper--display .cta-status-banner {
    top: 9px;
    right: -30px;
    width: 100px;
    height: 13px;
    font-size: 7.5px;
    clip-path: polygon(31.5px 0, 69.6px 0, 77.9px 12.8px, 77.6px 13px, 11.5px 13px);
    -webkit-clip-path: polygon(31.5px 0, 69.6px 0, 77.9px 12.8px, 77.6px 13px, 11.5px 13px);
  }
}