/*
 * cw-form-controls.css
 * Portal + admin form-control normaliser. The dashboards load AdminLTE (Bootstrap 4),
 * Bootstrap 5, select2 and bootstrap-datepicker together; the conflicting `height` /
 * `line-height` on <select> and select2 boxes was clipping the option / placeholder text
 * (Gender, Marital Status, "Set status to…", job-post fields, list filter bars).
 * Scoped to `body.hold-transition` so the public marketing site is untouched.
 */

body.hold-transition select.form-control,
body.hold-transition select.form-select,
body.hold-transition .form-select,
body.hold-transition textarea.form-control,
body.hold-transition input.form-control:not([type="checkbox"]):not([type="radio"]) {
    min-height: 42px;
    height: auto;
    line-height: 1.5;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

body.hold-transition select.form-control,
body.hold-transition select.form-select {
    /* room for the native dropdown arrow so the last character isn't hidden under it */
    padding-right: 2rem;
    background-position: right 0.6rem center;
}

/* select2 single-select box */
body.hold-transition .select2-container--default .select2-selection--single,
body.hold-transition .select2-container--bootstrap4 .select2-selection--single {
    height: 42px;
    display: flex;
    align-items: center;
}

body.hold-transition .select2-container--default .select2-selection--single .select2-selection__rendered,
body.hold-transition .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    padding-left: 0.75rem;
    padding-right: 1.75rem;
}

body.hold-transition .select2-container--default .select2-selection--single .select2-selection__arrow,
body.hold-transition .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    height: 40px;
}

/* select2 multi-select box (tags, skills, languages) */
body.hold-transition .select2-container--default .select2-selection--multiple,
body.hold-transition .select2-container--bootstrap4 .select2-selection--multiple {
    min-height: 42px;
    padding-bottom: 2px;
}

/* small inline filter / bulk-action selects sometimes shrink below usable height */
body.hold-transition .form-control-sm,
body.hold-transition select.form-control-sm {
    min-height: 34px;
    line-height: 1.4;
}