.layout-monitoring-hiddenside {
  position: relative !important;
  left: 6rem !important;
  right: 1rem !important;
  width: calc(
    100vw - 10rem
  ) !important; /* Fixe la carte à 100px du bord gauche de l'écran */
}

.layout-monitoring-openside {
  position: relative !important;
  left: calc(200px + 1rem) !important;
  right: 1rem !important;
  width: calc(
    100vw - 200px - 3rem
  ) !important; /* Fixe la carte à 100px du bord gauche de l'écran */
}
/* 
#table-daily-shape .ag-cell {
    padding-left : 0px !important;
    padding-right : 0px !important;
} */

.secondary-header {
  font-size: 24px !important;
  color: var(--ffbad-red, #d52b1e) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0rem 0rem 1rem 0rem !important;
}

.SingleDatePicker_picker {
  z-index: 2;
  background-color: #fff;
  position: absolute;
}

.profile-picture-summary {
  transition: transform 0.3s ease; /* Définir la transition de transformation */
}

.profile-picture-summary:hover {
  transform: scale(1.2); /* Agrandit l'image à 110% lors du survol */
}

.t-period {
  position: relative;
  border-radius: 50%;
}

.card-summary:hover {
  transform: scale(1.05); /* Grossissement à 110% */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* Ombre pour un effet plus visible */
  cursor: pointer !important;
}

.card-summary {
  transition: transform 0.3s ease; /* Animation fluide */
  margin: auto;
  padding: 0px;
  width: 200px;
  height: 150px;
  background-color: white;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  border-radius: 10px;
}

.card-period {
  margin: auto;
  padding: 0px;
  width: 200px;
  height: 150px;
  background-color: white;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  border-radius: 25px;
}

.circle-photo-period {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
  margin: -40px 0px 0px 55px;
  padding: 5px;
  width: 90px;
  height: 90px;
  border-radius: 100%;
  border: 2px solid white;
  background-color: white;
  position: relative;
}
.name-period {
  margin-top: 5px;
}

.control-ps {
  position: relative;
}
.days-block-period {
  background-color: rgb(196, 11, 113);
  color: white;
  padding: 10px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
}

/* CARTE DU JOUR */
/* Conteneur principal */
.athlete-info-container-individual-monitoring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 250px; /* Limite la largeur */
  max-width: 250px;
  flex-shrink: 0; /* Empêche de rétrécir */
}

/* Première div : Image et infos personnelles */
.athlete-info-header-individual-monitoring {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Image ronde */
.athlete-photo-individual-monitoring {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
}

/* Texte des infos personnelles */
.athlete-info-text-individual-monitoring {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.athlete-name-individual-monitoring {
  font-size: 24px;
  font-weight: 900;
  color: var(--ffbad-blue, #101f69);
  margin: 0;
}

.athlete-firstname-individual-monitoring {
  font-size: 24px;
  font-weight: 300;
  color: var(--ffbad-blue, #101f69);
  margin: 0;
}

.athlete-age-individual-monitoring {
  font-size: 20px;
  font-weight: 300;
  color: var(--ffbad-blue, #101f69);
  margin: 0;
}

/* Seconde div : Remplissage */
.athlete-info-filling-individual-monitoring {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ffbad-blue, #101f69);
  border-radius: 10px;
  padding: 10px;
  width: 80%;
  background-color: #f9f9f9;
}

.athlete-info-filling-individual-monitoring::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(
    --fill-percentage,
    0%
  ); /* La largeur est contrôlée par la variable CSS */
  background: linear-gradient(
    90deg,
    rgba(255, 69, 0, 0.8) 0%,
    /* Rouge au début */ rgba(255, 165, 0, 0.6) 50%,
    /* Orange au milieu */ rgba(33, 209, 0, 0.8) 100% /* Vert à la fin */
  );
  opacity: 0.3; /* Transparence pour un effet subtil */
  z-index: 0;
}

.athlete-info-filling-title-individual-monitoring {
  font-size: 16px;
  color: var(--ffbad-blue, #101f69);
  text-align: center;
}

.athlete-info-filling-value-individual-monitoring {
  font-size: 20px;
  font-weight: bold;
  color: var(--ffbad-blue, #101f69);
  text-align: center;
}

.athlete-summary-individual-monitoring {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-start; /* Aligne le haut des sections */
  justify-content: space-between;
  width: 100%;
}

/* cards :*/
.cards-container-individual-monitoring {
  display: flex; /* Utilise Flexbox */
  flex-wrap: wrap; /* Permet de passer à une nouvelle ligne si l'espace est insuffisant */
  gap: 15px; /* Espacement de 10px entre les cartes */
  justify-content: flex-start; /* Aligne les cartes à gauche */
  align-items: flex-start; /* Aligne les cartes en haut */
  width: 100%; /* Utilise toute la largeur disponible */
}

/* Conteneur général de la carte */
.athlete-card-individual-monitoring {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Aligne le contenu en haut */
  /* text-align: center; */
  padding: 0px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: white;
  height: auto;
}

/* Conteneur de l'image */
.athlete-card-image-container-individual-monitoring {
  display: flex;
  justify-content: center; /* Centre l'image horizontalement */
  align-items: center; /* Centre l'image verticalement */
  background-color: var(--background-color, transparent); /* Étend le fond */
  width: 100%; /* Assure une largeur complète */
  padding: 5px 0; /* Espace autour de l'image */
  border-bottom: 1px solid #ccc;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
}

/* Style de l'image */
.athlete-card-image-individual-monitoring {
  max-width: 30px; /* Taille maximale pour l'image */
  max-height: 30px; /* Optionnel pour limiter la hauteur */
  object-fit: contain; /* Maintient les proportions */
}

.no-data-message-individual-monitoring {
  text-align: center;
  color: red;
  margin: 20px;
  font-size: 1.2em;
}

.card-value {
  font-size: 28px;
  color: var(--ffbad-blue, #101f69);
  font-weight: bold;
}

.card-change {
  font-size: 16px;
  color: var(--ffbad-blue, #101f69);
  margin-left: "5px";
}

/* Carte sommeil */
.athlete-card-individual-monitoring.sleep {
  width: 125px;
  /* height: 190px; */
}

/* Cartes fatigue et stress (groupe) */
.athlete-card-group-individual-monitoring.fatigue-stress {
  display: grid;
  grid-template-rows: 1fr 1fr; /* Empilement vertical des cartes */
  gap: 10px; /* Espacement entre fatigue et stress */
  width: 125px; /* Largeur du groupe */
  height: 180px; /* Hauteur totale du groupe */
}

/* Carte muscle load et motivation (groupe) */
.athlete-card-group-individual-monitoring.muscle-motivation {
  display: grid;
  grid-template-rows: 1fr 1fr; /* Empilement vertical des cartes */
  gap: 10px; /* Espacement entre muscle load et motivation */
  width: 125px; /* Largeur du groupe */
  height: 180px; /* Hauteur totale du groupe */
}

/* Carte blessure */
.athlete-card-individual-monitoring.injury {
  width: 150px;
  /* height: 190px; */
}

/* Carte HRV */
.athlete-card-individual-monitoring.cardiac {
  width: 140px;
  /* height: 190px; */
}

/* Carte cycle menstruel */
.athlete-card-individual-monitoring.menstrual {
  width: 125px;
  height: 160px;
}

/* Flexbox pour aligner les éléments */
.filter-container {
  margin: 0.5rem;
  margin-bottom: 0;
  padding: 1.2rem;
  display: flex; /* Active le Flexbox */
  flex-wrap: wrap; /* Permet le retour à la ligne */
  gap: 1.2rem; /* your spacing */
  justify-content: flex-start; /* Aligne les éléments à gauche */
}

.DateRangePicker .DateInput {
  width: 46% !important;
  font-weight: bold !important;
}

.msg {
  display: flex !important;
  align-items: flex-end !important;
  margin-bottom: 10px !important;
  font-family: Helvetica, sans-serif !important;
  font-size: 16px !important;
}

.msg-img {
  flex-shrink: 0 !important; /* 🔒 empêche de rétrécir */
  width: 50px !important;
  height: 50px !important;
  margin-right: 10px !important;
  background-color: #ddd !important;
  background-position: center !important;
  background-size: cover !important;
  border-radius: 50% !important;
}

.msg-bubble {
  flex: 1 !important; /* ⚖️ occupe tout l'espace restant */
  max-width: 100% !important; /* évite dépassement */
  padding: 15px !important;
  border-radius: 15px !important;
  background: #ececec !important;
  border-bottom-left-radius: 0 !important;
  word-wrap: break-word !important; /* 🚫 évite que les mots trop longs débordent */
  text-align: left !important;
}

.msg-info-name {
  font-weight: bold !important;
  margin-bottom: 10px !important;
  text-align: left !important;
}

.msg-text {
  white-space: pre-wrap !important;
  line-height: 1.4em !important;
  text-align: left !important;
}

.ag-header-group-kpi .ag-header-group-cell-label {
  justify-content: center !important;
}

.ag-header-cell.custom-center-header .ag-header-cell-label {
  justify-content: center !important;
  text-align: center !important;
}

.ag-cell.custom-center-cell {
  text-align: center !important;
  justify-content: center !important;
}

.ag-right-border {
  border-right: 1px solid #babfc7 !important;
}

.ag-left-border {
  border-left: 1px solid #babfc7 !important;
}

.bold-cell {
  font-weight: bold;
}

/* Control the dialog width to 80% of the viewport */
.modal-global-overview-monitoring-ams .modal-dialog {
  max-width: 80vw !important; /* hard limit */
  width: 80vw !important; /* target width */
  margin: 1.75rem auto; /* keep it centered horizontally */
}

/* Le vrai contenu du modal (scrollable) */
.modal-global-overview-monitoring-ams .modal-content {
  border: none !important; /* on enlève la bordure interne Bootstrap */
  /* background: transparent !important; */
  box-shadow: none !important;
  overflow-y: auto !important;
  flex: 1 !important;
  padding: 0.5em;
}

.modal-global-overview-monitoring-ams .modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  border-bottom: none;
}

/* Responsive fallback: use full width on very small screens */
@media (max-width: 576px) {
  .modal-global-overview-monitoring-ams .modal-dialog {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 0.5rem auto;
  }
}