/* #dropdown-profile-discipline-athlete-profile .Select-value {
    padding-left : 0px !important;
} */


/* ----------- CATÉGORIES ----------- */
.dropdown-modern-matches-athlete-profile {
    max-width: 300px !important;
}

.custom-dropdown-filter {
    border: 1px solid var(--ffbad-blue, #101F69) !important; /* Bordure */
    border-radius: 6px !important; 
    min-width: 220px !important;       /* Coins arrondis */
    max-width: 220px !important;          /* Largeur maximale */
    width: 100% !important;               /* Largeur adaptative */
    padding: 5px !important;              /* Espacement interne */
    font-size: 12px !important;
    margin-right: 10px;
    /* font-weight: bold !important; */
}

.custom-dropdown-filter .Select-placeholder {
    color: var(--ffbad-blue-light) !important;
    font-size: 12px !important;
    font-weight: bold !important;
}

.custom-dropdown-filter .Select {
    background-color : #FFFFFF !important;
}

/* The main input/control area (closed state and general state) */
.custom-dropdown-filter .Select-control {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    padding-right: 34px !important;    /* Space reserved for the arrow zone */
    min-height: 2.2rem !important;

    /* display: flex !important;
    flex-direction: row !important; */

    align-items: center;
    height: auto !important;
    
    overflow: hidden !important;       /* Prevent any content from spilling outside */
    position: relative !important;
}

/* Placeholder text shown when no value is selected */
.custom-dropdown-filter .Select-placeholder {
    color: #999 !important;
    font-style: italic !important;
}

/* The "pill" that wraps the selected value */
.custom-dropdown-filter .Select-value {

    display: inline-flex !important;
    align-items: center !important;
    color: var(--ffbad-red, #D52B1E);

    border: 1.5px solid var(--ffbad-red, #D52B1E) !important;   /* 🔴 red border */
    border-radius: 6px !important;            /* pill shape */
    background-color: transparent !important; /* transparent background */

    padding: 2px 6px !important;              /* inner spacing */
    margin: 2px 4px 2px 0 !important;         /* spacing between pills */
    max-width: 100% !important;               /* never exceed control width */

    flex-shrink: 1 !important;
}

.custom-dropdown-filter .Select-value-icon {
    color: var(--ffbad-red, #D52B1E) !important;                /* red cross (text glyph) */
    fill: var(--ffbad-red, #D52B1E) !important;                 /* safety for svg-based clear icons */
    line-height: 1 !important;
    cursor: pointer !important;
}

/* Optional hover feedback on the clear cross */
.custom-dropdown-filter .Select-value-icon:hover {
    color: #b81f17 !important;
    border-left-color: rgba(184, 31, 23, 0.35) !important;
}


/* Multi-value wrapper (react-select v1) — allow wrapping within the control */
.custom-dropdown-filter .Select-multi-value-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    gap: 2px 4px !important;

}

/* The inner text label for the selected value */
.custom-dropdown-filter .Select-value-label {
    color: var(--ffbad-blue, #101F69) !important;
    background-color: transparent !important;
    font-weight: 700 !important;
    border-color: var(--ffbad-red, #D52B1E);
    
    display: inline-block !important;
    max-width: 150px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

/* Zone de la flèche */
/* The small clickable area that contains the dropdown arrow (caret). */
.custom-dropdown-filter .Select-arrow-zone {
    display: inline-flex !important;
    justify-content: center !important;
    position: absolute;
    width: auto;
    right: 3px;
    top: 3px;
    vertical-align: top;
    padding-right: initial;
    color: var(--ffbad-blue, #101F69);
    z-index: 3 !important;             /* above text/pills but below menu */

    padding: 4px 6px !important;   /* add space around the arrow */
    margin-right: 2px !important;  /* shift slightly inside the container */
    border-radius: 4px !important;
}

/* The small caret triangle inside the arrow zone */
.custom-dropdown-filter .Select-arrow {
    border-color: var(--ffbad-blue, #101F69) transparent transparent !important;
    border-width: 6px 6px 0 !important;
}

.custom-dropdown-filter .Select-clear-zone {
    display: inline-flex !important;
    justify-content: center !important;
    position: absolute;
    width: auto;
    right: 3px;
    bottom: 3px;
    vertical-align: bottom;
    padding-right: initial;
    color: var(--ffbad-blue, #101F69);
    z-index: 3 !important;             /* above text/pills but below menu */

    padding: 4px 6px !important;   /* add space around the arrow */
    margin-right: 2px !important;  /* shift slightly inside the container */
    border-radius: 4px !important;
}

.custom-dropdown-filter .Select-clear {
    color: var(--ffbad-blue, #101F69) !important;          /* blue default */
    border-width: 6px 6px 0 !important;
}

/* Hover → red */
.custom-dropdown-filter .Select-clear:hover {
    color: var(--ffbad-red, #D52B1E) !important;
}

/* The dropdown menu container that appears under the control */
.custom-dropdown-filter .Select-menu-outer {
    left: 0 !important;
    right: auto !important;
    top: 100% !important;              /* below the control */
    min-width: 100% !important;
    width: -moz-max-content !important; /* Firefox */
    width: max-content !important;      /* Other modern browsers */
    max-width: 90vw !important;         /* safety cap on small screens */
    overflow: visible !important;

    background-color: white !important;
    border: 1px solid var(--ffbad-blue, #101F69) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 8px rgba(16, 31, 105, 0.1) !important;
    margin-top: 0.3rem !important;
    z-index: 9999 !important;
    /* Animation d’apparition */
    animation: fadeInDropdown 0.2s ease-in-out !important;
}


.custom-dropdown-filter .Select-menu {
  /* In case internal blocks try to stretch, let content define size */
  width: auto !important;
}

/* Each option inside the menu (default state) */
/* .custom-dropdown-filter .Select-option {
    color: var(--ffbad-red) !important;
    font-weight: 600 !important;
} */


/* Hover/focus of an option in the menu */
.custom-dropdown-filter .Select-option.is-focused {
    background-color: rgba(213, 43, 30, 0.1) !important;
}


/* Selected option in the menu
.custom-dropdown-filter .Select-option.is-selected {
    background-color: var(--ffbad-red) !important;
    color: #ffffff !important;
}
 */

/* The input overlay react-select uses for filtering text */
.custom-dropdown-filter .Select-input {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.custom-dropdown-filter .VirtualSelectGrid {
  z-index: 1;
}

.custom-dropdown-filter .VirtualizedSelectOption {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 .5rem;
  cursor: pointer;
}
.custom-dropdown-filter .VirtualizedSelectFocusedOption {
    color: var(--ffbad-red, #D52B1E);
    background-color: #dfdfdf;
}
.custom-dropdown-filter .VirtualizedSelectDisabledOption {
  opacity: 0.5;
}
.custom-dropdown-filter .VirtualizedSelectSelectedOption {
    font-weight: bold;
    color: orange;
    background-color: #dfdfdf;
}

@keyframes fadeInDropdown {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 🟦 Option du haut : coins arrondis en haut */
.custom-dropdown-filter .Select-menu:first-child {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

/* 🟥 Option du bas : coins arrondis en bas */
.custom-dropdown-filter .Select-menu:last-child {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* Styles on the menu list container (not individual options) */
.custom-dropdown-filter .Select-menu {
    /* padding: 0.6rem 1rem !important; */
    color: var(--ffbad-blue, #101F69) !important;
    font-size: 0.9rem !important;
    transition: background 0.2s ease !important;
    cursor: pointer !important;
}

/* The row that appears when there are no matches */
.custom-dropdown-filter .Select-noresults {
    color: var(--ffbad-blue, #101F69) !important;
    background-color: rgb(16 31 105 / 20%) !important;
}


/* ==========================================================
   🔻 DROPDOWN
   ========================================================== */
.athlete-profile-dropdown-red {
    font-weight: 700 !important;
    font-size: 15px !important;
    width: 80px !important;
    max-width: 80px !important;
    height: 2.2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border: none !important;
}

/* Zone de la flèche */
/* The small caret triangle inside the arrow zone */
.athlete-profile-dropdown-red .Select-arrow {
    border-color: #ffffff transparent transparent !important;
    right: 8px !important;
    top: 0.65rem !important;
}

/* The small clickable area that contains the dropdown arrow (caret). */
.athlete-profile-dropdown-red .Select-arrow-zone {
  display: inline-flex;
  position: absolute;
  width: auto;
  right: 1px;
  top: 5px;
  vertical-align: top;
  padding-right: initial;
  color: var(--ffbad-blue, #101F69);
}

/* The main input/control area (closed state and general state) */
.athlete-profile-dropdown-red .Select-control {
    background-color: var(--ffbad-red) !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

/* Focus state of the control when the input is active (keyboard focus) */
.athlete-profile-dropdown-red .Select-control:focus-within {
    /* background-color: transparent !important; */
    background-color: var(--ffbad-red) !important;  /* stay red */
    color: #ffffff !important;                      /* keep text white */
}

.athlete-profile-dropdown-red .is-open > .Select-control,
.athlete-profile-dropdown-red .Select.is-open .Select-control {
  background-color: var(--ffbad-red) !important;  /* stay red */
  color: #ffffff !important;                      /* keep text white */
}

/* Placeholder text shown when no value is selected */
.athlete-profile-dropdown-red .Select-placeholder {
    color: #999 !important;
    font-style: italic !important;
}


/* The "pill" that wraps the selected value */
.athlete-profile-dropdown-red .Select-value {
    color: var(--ffbad-blue, #101F69) !important;
    font-weight: bold !important;
    cursor: pointer !important;
}


/* The inner text label for the selected value */
.athlete-profile-dropdown-red .Select-value-label {
    color: #ffffff !important;
    background-color: var(--ffbad-red) !important;
    font-weight: 700 !important;
}

/* The dropdown menu container that appears under the control */
.athlete-profile-dropdown-red .Select-menu-outer {
    left: 0 !important;
    right: auto !important;
    top: 100% !important;              /* below the control */
    min-width: 100% !important;
    width: -moz-max-content !important; /* Firefox */
    width: max-content !important;      /* Other modern browsers */
    max-width: 90vw !important;         /* safety cap on small screens */
    overflow: visible !important;

    background-color: white !important;
    border: 1px solid var(--ffbad-blue, #101F69) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 8px rgba(16, 31, 105, 0.1) !important;
    margin-top: 0.3rem !important;
    z-index: 9999 !important;
    /* Animation d’apparition */
    animation: fadeInDropdown 0.2s ease-in-out !important;
    text-align: center !important;      /* center inline text */
}

.athlete-profile-dropdown-red .Select-menu {
    /* In case internal blocks try to stretch, let content define size */
    width: auto !important;
    color: var(--ffbad-blue, #101F69) !important;
    font-size: 1rem !important;
    transition: background 0.2s ease !important;
    cursor: pointer !important;
}

/* Each option inside the menu (default state) */
.athlete-profile-dropdown-red .Select-option {
    color: var(--ffbad-red) !important;
    font-weight: 600 !important;
    text-align: center !important;      /* center inline text */
    display: flex !important;           /* some builds render options as flex */
    justify-content: center !important; /* center horizontally when flex */
    align-items: center !important;     /* vertical centering */
    white-space: nowrap !important;     /* keep a single line; menu grows to fit */
}

/* Hover/focus of an option in the menu */
.athlete-profile-dropdown-red .Select-option.is-focused {
    background-color: rgba(213, 43, 30, 0.1) !important;
}

/* Selected option in the menu */
.athlete-profile-dropdown-red .Select-option.is-selected {
    background-color: var(--ffbad-red) !important;
    color: #ffffff !important;
}

/* The input overlay react-select uses for filtering text */
.athlete-profile-dropdown-red .Select-input {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* 🔧 Removes a default border some Dash/DA components add */
.ddk-container .dash-dropdown {
    border-bottom: none !important;
    border-width: 0px !important;
}

.athlete-profile-dropdown-red .VirtualSelectGrid {
  z-index: 1;
}

.athlete-profile-dropdown-red .VirtualizedSelectOption {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 .5rem;
  cursor: pointer;
}
.athlete-profile-dropdown-red .VirtualizedSelectFocusedOption {
    color: var(--ffbad-red, #D52B1E);
    background-color: var(--ffbad-bg-light);
}
.athlete-profile-dropdown-red .VirtualizedSelectDisabledOption {
  opacity: 0.5;
}
.athlete-profile-dropdown-red .VirtualizedSelectSelectedOption {
    font-weight: bold;
    color: var(--ffbad-red, #D52B1E);
    background-color: var(--ffbad-bg-light);
    text-align: center !important;      /* center inline text */
    display: flex !important;           /* some builds render options as flex */
    justify-content: center !important; /* center horizontally when flex */
    align-items: center !important;     /* vertical centering */
    white-space: nowrap !important;     /* keep a single line; menu grows to fit */
}

@keyframes fadeInDropdown {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 🟦 Option du haut : coins arrondis en haut */
.athlete-profile-dropdown-red .Select-menu:first-child {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

/* 🟥 Option du bas : coins arrondis en bas */
.athlete-profile-dropdown-red .Select-menu:last-child {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* The row that appears when there are no matches */
.athlete-profile-dropdown-red .Select-noresults {
    color: var(--ffbad-blue, #101F69) !important;
    background-color: rgb(16 31 105 / 20%) !important;
    text-align: center !important;
}

.athlete-profile-dropdown-red .Select-option,
.athlete-profile-dropdown-red .Select-option.is-focused,
.athlete-profile-dropdown-red .Select-option.is-selected,
.athlete-profile-dropdown-red .VirtualizedSelectOption,
.athlete-profile-dropdown-red .Select-noresults {
    display: flex !important;            /* unified rendering model */
    justify-content: center !important;  /* horizontal centering */
    align-items: center !important;      /* vertical centering */
    text-align: center !important;       /* inline text centering */
    white-space: nowrap !important;      /* menu grows instead of wrapping */
    padding-left: 0 !important;          /* prevent left bias */
    padding-right: 0 !important;         /* prevent right bias */
}


/* === WRAPPER GLOBAL DU DROPDOWN === */
.custom-dropdown {
    border: 1px solid var(--ffbad-blue, #101F69) !important;
    border-radius: 8px !important;
    padding: 0.3rem 0.5rem !important;
    font-size: 0.9rem !important;
    color: var(--ffbad-blue, #101F69) !important;
    background-color: white !important;
    width: 100% !important;
    max-width: 500px !important;
}

/* 🔧 Désactive la bordure forcée de DDK */
.ddk-container .dash-dropdown {
    border-bottom: none !important;
    border-width: 0px !important;
}

/* === ZONE DE CONTRÔLE (input + flèche) === */
.custom-dropdown .Select-control {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

.custom-dropdown .Select-control:focus-within {
    /* outline: 1px solid rgba(213, 43, 30, 0.3) !important;
    border-radius: 8px !important;
    outline-offset: 0rem !important; */
    background-color: transparent !important;
}

/* === PLACEHOLDER === */
.custom-dropdown .Select-placeholder {
    color: #999 !important;
    font-style: italic !important;
}

/* === VALEUR SÉLECTIONNÉE === */
.custom-dropdown .Select-value {
    /*color: var(--ffbad-blue, #101F69) !important;*/
    color: var(--ffbad-blue, #101F69) !important;
    font-weight: bold !important;
    cursor: pointer !important;
}

.custom-dropdown .Select-value-label {
    color: var(--ffbad-blue, #101F69) !important;
    background-color: transparent !important;
}

/* === AJOUTS === */
.custom-dropdown .VirtualSelectGrid {
  z-index: 1;
}

.custom-dropdown .VirtualizedSelectOption {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 .5rem;
  cursor: pointer;
}
.custom-dropdown .VirtualizedSelectFocusedOption {
    color: var(--ffbad-red, #D52B1E);
    background-color: #dfdfdf;
}
.custom-dropdown .VirtualizedSelectDisabledOption {
  opacity: 0.5;
}
.custom-dropdown .VirtualizedSelectSelectedOption {
    font-weight: bold;
    color: var(--ffbad-red, #D52B1E);
    background-color: #dfdfdf;
}

/* === ZONE DE LA FLÈCHE === */
.custom-dropdown .Select-arrow-zone {
  display: inline-flex;
  position: absolute;
  width: auto;
  right: 5px;
  top: 5px;
  vertical-align: top;
  padding-right: initial;
  color: var(--ffbad-blue, #101F69);
}

.custom-dropdown .Select-arrow {
    border-color: var(--ffbad-blue, #101F69) transparent transparent !important;
    border-width: 6px 6px 0 !important;
}

/* === MENU DÉROULANT === */
.custom-dropdown .Select-menu-outer {
    background-color: white !important;
    border: 1px solid var(--ffbad-blue, #101F69) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 8px rgba(16, 31, 105, 0.1) !important;
    margin-top: 0.3rem !important;
    z-index: 9999 !important;
    min-width: 150px !important;
    /* Animation d’apparition */
    animation: fadeInDropdown 0.2s ease-in-out !important;
}

@keyframes fadeInDropdown {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 🟦 Option du haut : coins arrondis en haut */
.custom-dropdown .Select-menu:first-child {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

/* 🟥 Option du bas : coins arrondis en bas */
.custom-dropdown .Select-menu:last-child {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* === OPTIONS DANS LE MENU === */
.custom-dropdown .Select-menu {
    /* padding: 0.6rem 1rem !important; */
    color: var(--ffbad-blue, #101F69) !important;
    font-size: 0.9rem !important;
    transition: background 0.2s ease !important;
    cursor: pointer !important;
}

/* === OPTIONS DANS LE MENU === */
.custom-dropdown .Select-noresults {
    color: var(--ffbad-blue, #101F69) !important;
    background-color: rgb(16 31 105 / 20%) !important;
}

#dropdown-ranking-athlete {
    margin-top: 15px;
    bottom: 235px;
    width: 170px;
    border-radius: 5px;
    border: 2px solid var(--ffbad-blue, #101F69);
}

.dropdown-row {
    display: flex; /* Utilise flexbox pour aligner les conteneurs horizontalement */
    gap: 1rem; /* Espacement entre les conteneurs */
    width: 100%; /* Assure que la rangée prend toute la largeur */
}

.dropdown-container {
    display: flex; /* Utilise flexbox */
    flex-direction: column; /* Organise les éléments en colonne */
    flex-grow: 1; /* Permet au conteneur de grandir pour remplir l'espace */
    margin: 0 1rem; /* Marge autour du conteneur, réduit si besoin */
}

.label-dropdown {
    margin-bottom: 0.5rem; /* Marge en bas du label pour l'espacement avec le Dropdown */
}

.dropdown-period, .dropdown-opponents {
    width: 100%; /* S'assure que le Dropdown prend toute la largeur du conteneur */
}

/* === Bloc Discipline / Dropdown === */
.profile-discipline-athlete-profile {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0.3rem !important;
}

/* #dropdown-profile-discipline-athlete-profile .Select-value {
    padding-left : 0px !important;
} */

.filters-h3 {
    color: #0f1f6a !important; /* Couleur alignée avec le style des Dropdowns */
    font-weight: 550 !important; /* Poids de la police pour correspondre à la sélection dans le Dropdown */
    margin-bottom: 10px !important; /* Un peu plus d'espace au-dessus du Dropdown pour une séparation claire */
    font-size: 1.1rem !important; /* Taille de la police adaptée */
}

/* Style pour les labels */
.filter-label {
    font-size: 14px !important;
    font-weight: bold !important;
    color: var(--ffbad-blue, #101F69) !important;
    text-align: left !important;
    margin-bottom: 5px !important;  /* Espace sous le label */
    margin-left: 10px !important;
}

.custom-dropdown {
    border: 1px solid var(--ffbad-blue, #101F69) !important; /* Bordure */
    border-radius: 10px !important; 
    min-width: 200px !important;       /* Coins arrondis */
    max-width: 200px !important;          /* Largeur maximale */
    width: 100% !important;               /* Largeur adaptative */
    padding: 5px !important;              /* Espacement interne */
    font-size: 15px !important;
    font-weight: bold !important;
}

.custom-dropdown-wide {
    border: 1px solid var(--ffbad-blue, #101F69) !important; /* Bordure */
    border-radius: 10px !important; 
    min-width: 280px !important;       /* Coins arrondis */
    max-width: 280px !important;          /* Largeur maximale */
    width: 100% !important;               /* Largeur adaptative */
    padding: 5px !important;              /* Espacement interne */
    font-size: 15px !important;
    font-weight: bold !important;
}