/* =============================================================================
   DASH DROPDOWN DESIGN SYSTEM
   =============================================================================
   Two canonical dropdown styles + size variants.

   Usage in Python / Dash:
     dcc.Dropdown(className="blue-dropdown")
     dcc.Dropdown(className="blue-dropdown blue-dropdown-wide")
     dcc.Dropdown(className="red-dropdown red-dropdown-small", multi=True)
   ============================================================================= */

@keyframes dd-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* =============================================================================
   1. BLUE-DROPDOWN
   -----------------------------------------------------------------------------
   White background, navy border, red selected-value pills, navy arrow/clear.
   Arrow and clear sit stacked on the right, inside the outer border box.
   On hover the arrow and clear switch from navy to red.
   ============================================================================= */

/* ── Outer wrapper ── */
.blue-dropdown {
    position: relative !important;
    box-sizing: border-box !important;

    border: 1px solid var(--ffbad-blue, #101F69) !important;
    border-radius: 8px !important;
    background-color: var(--ffbad-white) !important;

    /* default width — override with size modifiers below */
    /* min-width: 220px !important;
    max-width: 220px !important; */
    width: 100% !important;

    padding: 4px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    margin-right: 10px;
}

/* ── Inner Select (react-select v1 root) ── */
.blue-dropdown .Select {
    background-color: transparent !important;
}

/* ── Control row (closed state) ── */
.blue-dropdown .Select-control {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;

    /* leave room on the right for the stacked arrow + clear */
    padding-right: 36px !important;
    min-height: 2.2rem !important;
    height: auto !important;

    display: flex !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* keep red background on open state */
.blue-dropdown .is-open > .Select-control,
.blue-dropdown .Select.is-open .Select-control {
    background-color: transparent !important;
}

/* ── Placeholder ── */
.blue-dropdown .Select-placeholder {
    color: var(--ffbad-grey) !important;
    font-style: italic !important;
    font-size: 14px !important;
}

/* ── Multi-value wrapper — wraps pills neatly ── */
.blue-dropdown .Select-multi-value-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    gap: 2px 4px !important;
    min-width: 0 !important;
}

/* ── Selected-value pill ── */
.blue-dropdown .Select-value {
    display: inline-flex !important;
    align-items: center !important;

    background-color: transparent !important;
    color: var(--ffbad-blue) !important;

    /* padding: 2px 6px !important; */
    margin: 2px 4px 2px 0 !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
    box-sizing: border-box !important;
}

/* ── Value label (text inside the pill) ── */
.blue-dropdown .Select-value-label {
  color: var(--ffbad-blue) !important;
  font-weight: 700 !important;
  background-color: transparent !important;
  display: inline-block !important;
  /* max-width: 150px !important; */
  min-width: 0 !important;

  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* ── "×" icon inside the multi pill ── */
.blue-dropdown .Select-value-icon {
    color: var(--ffbad-red) !important;
    fill: var(--ffbad-red) !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: color 0.15s ease !important;
}
.blue-dropdown .Select-value-icon:hover {
    color: var(--ffbad-red-dark) !important;
    border-left-color: rgba(184, 31, 23, 0.35) !important;
}

.blue-dropdown.Select--multi .Select-value {
  background-color: #ebf5ff;
  border-radius: 8px;
  border: 1px solid var(--ffbad-red);
  font-size: 13px;
  line-height: 1.4;
  margin-left: 5px;
  margin-top: 5px;
  vertical-align: top;
}

/* ── Arrow zone — top-right corner, inside outer box ── */
.blue-dropdown .Select-arrow-zone {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    right: 4px !important;
    top: 4px !important;
    width: 24px !important;
    height: 20px !important;
    border-radius: 4px !important;
    padding: 2px 4px !important;
    cursor: pointer !important;
    z-index: 3 !important;
    transition: color 0.15s ease !important;
    color: var(--ffbad-blue) !important;
}
.blue-dropdown .Select-arrow-zone:hover {
    color: var(--ffbad-red) !important;
}

/* ── Arrow caret ── */
.blue-dropdown .Select-arrow {
    border-color: var(--ffbad-blue) transparent transparent !important;
    border-width: 6px 5px 0 !important;
    border-style: solid !important;
    transition: border-color 0.15s ease !important;
}
.blue-dropdown .Select-arrow-zone:hover .Select-arrow {
    border-color: var(--ffbad-red) transparent transparent !important;
}

/* ── Blue dropdown: arrow points up when open ── */
/* Arrow flip when open — scoped via the control's child arrow only */
.is-open > .Select-control .Select-arrow {
    top: 0px !important;
    /* border-color: var(--dd-blue) !important; */
    transform: rotate(180deg) !important;
}

/* ── Clear zone — bottom-right corner (single-value "×") ── */
.blue-dropdown .Select-clear-zone {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    right: 4px !important;
    bottom: 4px !important;
    width: 24px !important;
    height: 20px !important;
    border-radius: 4px !important;
    padding: 2px 4px !important;
    cursor: pointer !important;
    z-index: 3 !important;
    color: var(--ffbad-blue) !important;
    transition: color 0.15s ease !important;
}
.blue-dropdown .Select-clear-zone:hover {
    color: var(--ffbad-red) !important;
}

.blue-dropdown .Select-clear {
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* ── Typing input (search / filter) ── */
.blue-dropdown .Select-input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.blue-dropdown .Select-input > input {
    color: var(--ffbad-blue) !important;
}

/* ── Drop-down menu container ── */
.blue-dropdown .Select-menu-outer {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 100% !important;
    min-width: 100% !important;
    width: 100% !important;            /* was: max-content — was letting it grow infinitely */
    max-width: 90vw !important;

    background-color: var(--ffbad-white) !important;
    border: 1px solid var(--ffbad-blue, #101F69) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(16, 31, 105, 0.12) !important;
    margin-top: 4px !important;
    z-index: 9999 !important;
    animation: dd-fade-in 0.18s ease !important;
    overflow: hidden !important;       /* hard clip at the container edge */
}

/* ── Menu list ── */
.blue-dropdown .Select-menu {
    color: var(--ffbad-blue) !important;
    font-size: 14px !important;
    cursor: pointer !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 300px !important;

    width: 100% !important;   
    box-sizing: border-box !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    line-height: 30px !important;
}

/* ── Individual options ── */
.blue-dropdown .Select-option {
    color: var(--ffbad-blue) !important;
    font-weight: 500 !important;
    background-color: var(--ffbad-white) !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
    /* line-height: 1.5 !important; */
}

.blue-dropdown .Select-option.is-focused {
    background-color: var(--text-light) !important;
    color: var(--ffbad-blue) !important;
}
.blue-dropdown .Select-option.is-selected {
    background-color: var(--ffbad-blue) !important;
    color: var(--ffbad-white) !important;
    font-weight: 700 !important;
}
.blue-dropdown .Select-option.is-disabled {
    opacity: var(--disabled-opacity) !important;
    cursor: not-allowed !important;
}

/* ── No results message ── */
.blue-dropdown .Select-noresults {
    color: var(--ffbad-blue) !important;
    background-color: var(--text-light) !important;
    text-align: center !important;
    padding: 8px 12px !important;
}

/* ── Rounded menu corners ── */
.blue-dropdown .Select-menu:first-child {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
}
.blue-dropdown .Select-menu:last-child {
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

/* ── Disabled state (whole dropdown) ── */
.blue-dropdown .Select.is-disabled > .Select-control {
    opacity: var(--disabled-opacity) !important;
    cursor: not-allowed !important;
    background-color: #f0f2f8 !important;
}
.blue-dropdown.is-disabled,
.blue-dropdown .Select.is-disabled {
    pointer-events: none !important;
    opacity: var(--disabled-opacity) !important;
}

/* ── Virtualized list support ── */
.blue-dropdown .VirtualSelectGrid { z-index: 1; }
.blue-dropdown .VirtualizedSelectOption {
    display: block;
    align-items: left;
    text-align: left !important;
    padding: 0 0.5rem;

    cursor: pointer;
    color: var(--ffbad-blue);
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    line-height: 35px !important;
    height: 35px !important;
    box-sizing: border-box !important;
}

.blue-dropdown .VirtualizedSelectFocusedOption {
    font-weight: bold;
    background-color: var(--ffbad-bg-light);
    color: var(--ffbad-red);
}
.blue-dropdown .VirtualizedSelectSelectedOption {
    font-weight: bold;
    color: var(--ffbad-white);
    background-color: var(--ffbad-blue);
}
.blue-dropdown .VirtualizedSelectDisabledOption {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

/* =============================================================================
   1b. BLUE-DROPDOWN — size modifiers
   Add ONE modifier alongside blue-dropdown, e.g.:
     className="blue-dropdown blue-dropdown-wide"
   ============================================================================= */

/* Wide — longer labels, e.g. full names, long categories */
.blue-dropdown.blue-dropdown-xwide {
    min-width: 500px !important;
    max-width: 500px !important;
}
.blue-dropdown.blue-dropdown-xwide .Select-value-label {
    max-width: 420px !important;
}

/* Wide — longer labels, e.g. full names, long categories */
.blue-dropdown.blue-dropdown-wide {
    min-width: 320px !important;
    max-width: 320px !important;
}
.blue-dropdown.blue-dropdown-wide .Select-value-label {
    max-width: 240px !important;
}

/* Narrow — short codes, short lists */
.blue-dropdown.blue-dropdown-narrow {
    min-width: 160px !important;
    max-width: 160px !important;
}
.blue-dropdown.blue-dropdown-narrow .Select-value-label {
    max-width: 100px !important;
}

/* Default — short codes, short lists */
.blue-dropdown.blue-dropdown-default {
    min-width: 220px !important;
    max-width: 220px !important;
}
.blue-dropdown.blue-dropdown-default .Select-value-label {
    max-width: 220px !important;
}

/* Small — compact UI areas, sidebars */
.blue-dropdown.blue-dropdown-small {
    min-width: 120px !important;
    max-width: 120px !important;
    font-size: 11px !important;
    padding: 2px !important;
}
.blue-dropdown.blue-dropdown-small .Select-control {
    min-height: 1.8rem !important;
    padding-right: 30px !important;
}
.blue-dropdown.blue-dropdown-small .Select-value-label {
    max-width: 80px !important;
}

/* XSmall — icon-level dropdowns, tight grids */
.blue-dropdown.blue-dropdown-xsmall {
    min-width: 80px !important;
    max-width: 80px !important;
    font-size: 10px !important;
    padding: 1px !important;
    border-radius: 4px !important;
}
.blue-dropdown.blue-dropdown-xsmall .Select-control {
    min-height: 1.6rem !important;
    padding-right: 26px !important;
}
.blue-dropdown.blue-dropdown-xsmall .Select-value-label {
    max-width: 52px !important;
}
.blue-dropdown.blue-dropdown-xsmall .Select-arrow-zone,
.blue-dropdown.blue-dropdown-xsmall .Select-clear-zone {
    width: 18px !important;
    height: 16px !important;
}


/* =============================================================================
   2. RED-DROPDOWN
   -----------------------------------------------------------------------------
   Solid red control bar, white text, navy menu.
   Fixes from athlete-profile-dropdown-red:
     • Outer border restored (was "none" which made it look broken when hovered)
     • Placeholder changed to white/semi-transparent (was grey — invisible on red)
     • Select-value color set to white consistently (was var(--ffbad-blue, #101F69) on wrapper but
       white on label — contradictory)
     • Arrow-zone color set to white (was --ffbad-blue which was invisible on red)
     • Clear zone added (was missing entirely)
     • Multi-value pill added (was missing)
     • Disabled state added
   ============================================================================= */

/* ── Outer wrapper ── */
.red-dropdown {
    position: relative !important;
    box-sizing: border-box !important;

    /* thin red border so the control has a defined edge when unfocused */
    border: 1.5px solid var(--ffbad-red) !important;
    border-radius: 8px !important;
    background-color: transparent !important;

    min-width: 80px !important;
    max-width: 80px !important;
    width: 100% !important;

    font-size: 15px !important;
    font-weight: 700 !important;
}

/* ── Inner Select root ── */
.red-dropdown .Select {
    background-color: transparent !important;
}

/* ── Control row ── */
.red-dropdown .Select-control {
    background-color: var(--ffbad-red) !important;
    border-radius: 6px !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--ffbad-white) !important;

    min-height: 2.2rem !important;
    height: auto !important;
    padding-right: 36px !important;

    display: flex !important;
    align-items: center !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* stays red when open or focused */
.red-dropdown .is-open > .Select-control,
.red-dropdown .Select.is-open .Select-control,
.red-dropdown .Select-control:focus-within {
    background-color: var(--ffbad-red) !important;
    color: var(--ffbad-white) !important;
}

/* ── Placeholder ── */
.red-dropdown .Select-placeholder {
    /* white semi-transparent so it is readable on red */
    color: var(--ffbad-grey) !important;
    font-style: italic !important;
    font-size: 14px !important;
}

/* ── Multi-value wrapper ── */
.red-dropdown .Select-multi-value-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    gap: 2px 4px !important;
    min-width: 0 !important;
}

/* ── Selected-value pill (multi) ── */
.red-dropdown .Select-value {
    display: inline-flex !important;
    align-items: center !important;

    color: var(--ffbad-white) !important;

    padding: 1px 5px !important;
    margin: 2px 3px 2px 2px !important;
    flex-shrink: 1 !important;
    box-sizing: border-box !important;
}

/* ── Value label ── */
.red-dropdown .Select-value-label {
    color: var(--ffbad-white) !important;
    font-weight: 700 !important;
    background-color: transparent !important;

    display: inline-block !important;
    max-width: 120px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

/* ── "×" icon inside multi pill ── */
.red-dropdown .Select-value-icon {
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: color 0.15s ease !important;
}
.red-dropdown .Select-value-icon:hover {
    color: var(--ffbad-white) !important;
}

/* ── Arrow zone — top-right, white caret on red ── */
.red-dropdown .Select-arrow-zone {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    right: 4px !important;
    top: 4px !important;
    width: 24px !important;
    height: 20px !important;
    border-radius: 4px !important;
    padding: 2px 4px !important;
    cursor: pointer !important;
    z-index: 3 !important;
    color: var(--ffbad-white) !important;
    transition: opacity 0.15s ease !important;
}

/* .red-dropdown .Select-arrow-zone:hover {
    opacity: 0.75 !important;
} */

/* ── Arrow caret (white) ── */
.red-dropdown .Select-arrow {
    border-color: var(--ffbad-white) transparent transparent !important;
    border-width: 6px 5px 0 !important;
    border-style: solid !important;
}

.red-dropdown .Select.is-open .Select-arrow,
.red-dropdown .is-open > .Select-control .Select-arrow {
    border-color: transparent transparent var(--dd-white) !important;
    border-width: 0 5px 6px !important;
    transition: border-color 0.15s ease !important;
}

/* ── Clear zone — bottom-right ── */
.red-dropdown .Select-clear-zone {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    right: 4px !important;
    bottom: 4px !important;
    width: 24px !important;
    height: 20px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    z-index: 3 !important;
    color: var(--ffbad-white) !important;
    transition: opacity 0.15s ease !important;
}
.red-dropdown .Select-clear-zone:hover {
    opacity: 0.75 !important;
}
.red-dropdown .Select-clear {
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* ── Typing input ── */
.red-dropdown .Select-input {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
.red-dropdown .Select-input > input {
    color: var(--ffbad-white) !important;
}

/* ── Drop-down menu container (white, navy border) ── */
.red-dropdown .Select-menu-outer {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 100% !important;
    min-width: 100% !important;
    width: max-content !important;
    width: -moz-max-content !important;
    max-width: 90vw !important;

    background-color: var(--ffbad-white) !important;
    border: 1px solid var(--ffbad-red) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(16, 31, 105, 0.12) !important;
    margin-top: 4px !important;
    z-index: 9999 !important;
    overflow: hidden !important;
    text-align: center !important;
    animation: dd-fade-in 0.18s ease !important;
}

/* ── Menu list ── */
.red-dropdown .Select-menu {
    width: auto !important;
    color: var(--ffbad-blue) !important;
    font-size: inherit !important;
    cursor: pointer !important;
}

/* ── Individual options ── */
.red-dropdown .Select-option {
    color: var(--ffbad-blue) !important;
    font-weight: 600 !important;
    background-color: var(--ffbad-white) !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
    cursor: pointer !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: background-color 0.15s ease !important;
}
.red-dropdown .Select-option.is-focused {
    background-color: var(--ffbad-red-light) !important;
    color: var(--ffbad-red-dark) !important;
}
.red-dropdown .Select-option.is-selected {
    background-color: var(--ffbad-bg-light) !important;
    color: var(--ffbad-red) !important;
    font-weight: 700 !important;
}
.red-dropdown .Select-option.is-disabled {
    opacity: var(--disabled-opacity) !important;
    cursor: not-allowed !important;
}

/* ── No results message ── */
.red-dropdown .Select-noresults {
    color: var(--ffbad-blue) !important;
    background-color: var(--text-light) !important;
    text-align: center !important;
    padding: 8px 12px !important;
}

/* ── Rounded menu corners ── */
.red-dropdown .Select-menu:first-child {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
}
.red-dropdown .Select-menu:last-child {
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

/* ── Disabled state ── */
.red-dropdown .Select.is-disabled > .Select-control {
    opacity: var(--disabled-opacity) !important;
    cursor: not-allowed !important;
    background-color: #e57a74 !important; /* muted red */
}
.red-dropdown.is-disabled,
.red-dropdown .Select.is-disabled {
    pointer-events: none !important;
    opacity: var(--disabled-opacity) !important;
}

/* ── Virtualized list support ── */
.red-dropdown .VirtualSelectGrid { z-index: 1; }
.red-dropdown .VirtualizedSelectOption {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    cursor: pointer;
    color: var(--ffbad-blue);
}
.red-dropdown .VirtualizedSelectFocusedOption {
    font-weight: bold;
    background-color: var(--ffbad-bg-light);
    color: var(--ffbad-red);
}
.red-dropdown .VirtualizedSelectSelectedOption {
    font-weight: bold;
    color: var(--ffbad-red);
    background-color: var(--ffbad-bg-light);
}
.red-dropdown .VirtualizedSelectDisabledOption {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}


/* =============================================================================
   2b. RED-DROPDOWN — size modifiers
   ============================================================================= */

/* Wide */
.red-dropdown.red-dropdown-wide {
    min-width: 200px !important;
    max-width: 200px !important;
}
.red-dropdown.red-dropdown-wide .Select-value-label {
    max-width: 140px !important;
}

/* Narrow */
.red-dropdown.red-dropdown-narrow {
    min-width: 100px !important;
    max-width: 100px !important;
}
.red-dropdown.red-dropdown-narrow .Select-value-label {
    max-width: 64px !important;
}

/* Small */
.red-dropdown.red-dropdown-small {
    min-width: 70px !important;
    max-width: 70px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}
.red-dropdown.red-dropdown-small .Select-control {
    min-height: 1.8rem !important;
    padding-right: 30px !important;
}
.red-dropdown.red-dropdown-small .Select-value-label {
    max-width: 44px !important;
}

/* XSmall */
.red-dropdown.red-dropdown-xsmall {
    min-width: 52px !important;
    max-width: 52px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
}
.red-dropdown.red-dropdown-xsmall .Select-control {
    min-height: 1.5rem !important;
    padding-right: 24px !important;
    border-radius: 3px !important;
}
.red-dropdown.red-dropdown-xsmall .Select-value-label {
    max-width: 30px !important;
}
.red-dropdown.red-dropdown-xsmall .Select-arrow-zone,
.red-dropdown.red-dropdown-xsmall .Select-clear-zone {
    width: 18px !important;
    height: 14px !important;
}

/* =============================================================================
   ACCORDEON ITEM
   -----------------------------------------------------------------------------

   ============================================================================= */

.accordion-item {
  color: var(--ffbad-blue);
  background-color: var(--ffbad-white);
  border: var(--ffbad-blue);
}

.accordion-button:not(.collapsed){
    border: 1px solid var(--ffbad-blue, #101F69) !important;
    border-radius: 8px !important;
    background-color:var(--ffbad-white);
    color: var(--ffbad-blue);
}

.accordion-button.collapsed{
    border: 1px solid var(--ffbad-blue, #101F69) !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    color: var(--ffbad-blue);
}