/* The .select__* rules, previously split (and diverged) across two global sheets. */
.mc-select-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    /* Some call sites sit inside .mc-user-modal, which centers text for its
       own avatar/heading content. Without an explicit left here, that
       ancestor's text-align:center is inherited by both the label and
       react-select's internal value/placeholder text, while LabelField's
       plain <input>/<select> escape it by accident (their label is a
       shrink-to-fit flex item, so centering has nowhere to show). Set
       explicitly rather than relying on layout so it holds regardless of
       what ancestor a page nests this field inside. */
    text-align: left;
}

/* Opt-in taller control. `.basic-single.h-sm .select__control` below (and the
   copy of it in the global styles.min2.css) pins every dropdown to a fixed 34px,
   and 3 class selectors outrank the single emotion class react-select generates
   from its `styles` prop — so the height cannot be raised from a call site's
   `styles={{ control: ... }}`. It takes a longer selector than that one, which
   is what this is. Use where a field stands alone and 34px looks undersized. */
.mc-select-field.control-lg .basic-single.h-sm .select__control {
    height: auto;
    min-height: 48px;
}

.basic-single.h-sm .select__control {
    min-height: 34px;
    height: 34px;
}

.basic-single.error .select__control {
    border-color: var(--btn-danger-bg);
}

/* The menu is absolutely positioned in normal flow, and react-select's own
   default is z-index 1 — the same as the sticky table head
   (.mc-table-head.sticky). On any page whose filter dropdown sits directly
   above a DataGrid the table comes later in the DOM, so the tie went to the
   table and the open menu was painted underneath the orange header. !important
   because react-select's emotion styles are injected at runtime and win on
   source order otherwise. */
.select__menu {
    z-index: 20 !important;
}

/* Keep the control from growing when a long value is selected inside a table. */
.d-table-select .select__value-container {
    flex-wrap: nowrap;
    overflow: hidden;
}

.d-table-select .select__placeholder,
.d-table-select .select__single-value {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}