/**
 * Select2 single-select: vertically center the dropdown arrow and keep the chevron visible.
 * Load this synchronously with select2.min.css to avoid a first-paint jump when deferred CSS applies.
 */

/* Positioning context for the absolutely placed arrow (needed when .select2-selection--single uses display:flex overrides). */
.select2-container--default .select2-selection--single {
    position: relative;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    align-items: center !important;
    background: transparent !important;
    background-image: none !important;
    background-position: center !important;
    background-size: auto !important;
    bottom: auto !important;
    color: #6c757d;
    display: flex !important;
    filter: none !important;
    height: 100% !important;
    justify-content: center !important;
    margin-top: 0 !important;
    min-height: 24px !important;
    top: 0 !important;
    transform: none !important;
    width: 20px;
    min-width: 20px;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
    transform: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow::before,
.select2-container--default .select2-selection--single .select2-selection__arrow::after {
    content: none !important;
    display: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    background: transparent !important;
    border-color: currentColor !important;
    border-style: solid !important;
    border-width: 0 2px 2px 0 !important;
    clip-path: none !important;
    color: currentColor !important;
    display: block !important;
    height: 7px !important;
    left: auto !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
    position: static !important;
    top: auto !important;
    transform-origin: center center !important;
    transform: rotate(45deg) !important;
    width: 7px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b::after,
.select2-container--default .select2-selection--single .select2-selection__arrow b::before {
    content: none !important;
    display: none !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: rotate(-135deg) !important;
}

/* Create/edit release & other tab forms */
.tab-informetion .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0 !important;
    bottom: auto !important;
    margin-top: 0 !important;
    transform: none !important;
}

.tab-informetion .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
    transform: none !important;
}

/*
 * Artist role row: the chevron <b> is position:absolute, so the arrow wrapper gets zero height if height:auto.
 * That clips or hides the triangle. Match the tall 54px single-select controls.
 */
.tab-informetion form .artist-role-row .select2-container--default .select2-selection--single .select2-selection__arrow,
.tab-informetion form .label-role-row .select2-container--default .select2-selection--single .select2-selection__arrow,
#UpdateReleaseForm .artist-role-row .select2-container--default .select2-selection--single .select2-selection__arrow,
#UpdateTrackForm .artist-role-row .select2-container--default .select2-selection--single .select2-selection__arrow,
#UpdateReleaseForm .label-role-row .select2-container--default .select2-selection--single .select2-selection__arrow,
#UpdateTrackForm .label-role-row .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    min-height: 24px !important;
    top: 0 !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tab-informetion form .artist-role-row .select2-container--default .select2-selection--single .select2-selection__arrow b,
.tab-informetion form .label-role-row .select2-container--default .select2-selection--single .select2-selection__arrow b,
#UpdateReleaseForm .artist-role-row .select2-container--default .select2-selection--single .select2-selection__arrow b,
#UpdateTrackForm .artist-role-row .select2-container--default .select2-selection--single .select2-selection__arrow b,
#UpdateReleaseForm .label-role-row .select2-container--default .select2-selection--single .select2-selection__arrow b,
#UpdateTrackForm .label-role-row .select2-container--default .select2-selection--single .select2-selection__arrow b {
    left: auto !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    position: static !important;
    top: auto !important;
}

html.light-mode .select2-container--default .select2-selection--single .select2-selection__arrow b {
    background: transparent !important;
}

html.light-mode .select2-container--default .select2-selection--single .select2-selection__arrow {
    color: #4a4a55;
}

html.light-mode .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    background: transparent !important;
}

html.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow b {
    background: transparent !important;
}

html.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow {
    color: rgba(255, 255, 255, 0.85);
}

html.dark-mode .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    background: transparent !important;
}

/* Higher-specificity overrides for older release/edit form Select2 rules that also use !important. */
.tab-informetion form .select2-input-box .select2-container--default .select2-selection--single .select2-selection__arrow b,
.tab-informetion form .artist-role-row .select2-container--default .select2-selection--single .select2-selection__arrow b,
.tab-informetion form .label-role-row .select2-container--default .select2-selection--single .select2-selection__arrow b,
#UpdateReleaseForm .artist-role-row .select2-container--default .select2-selection--single .select2-selection__arrow b,
#UpdateTrackForm .artist-role-row .select2-container--default .select2-selection--single .select2-selection__arrow b,
#UpdateReleaseForm .label-role-row .select2-container--default .select2-selection--single .select2-selection__arrow b,
#UpdateTrackForm .label-role-row .select2-container--default .select2-selection--single .select2-selection__arrow b,
#EditTrack .select2-container--default .select2-selection--single .select2-selection__arrow b {
    background: transparent !important;
    border-color: currentColor !important;
    border-style: solid !important;
    border-width: 0 2px 2px 0 !important;
    display: block !important;
    height: 7px !important;
    left: auto !important;
    margin: 0 !important;
    position: static !important;
    top: auto !important;
    transform: rotate(45deg) !important;
    transform-origin: center center !important;
    width: 7px !important;
}

.tab-informetion form .select2-input-box .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
.tab-informetion form .artist-role-row .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
.tab-informetion form .label-role-row .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
#UpdateReleaseForm .artist-role-row .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
#UpdateTrackForm .artist-role-row .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
#UpdateReleaseForm .label-role-row .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
#UpdateTrackForm .label-role-row .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
#EditTrack .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: rotate(-135deg) !important;
}