/**
 * Select2 4.1 multi-select tag geometry - applied to EVERY backend screen.
 *
 * 4.1 changed the multi-select tag markup: the remove control went from a floated <span> to a
 * <button> absolutely positioned at left:0 inside the choice, and 4.1 reserves room for it with
 * padding-left:20px on .select2-selection__choice. Any per-screen CSS that sets its own padding
 * on __choice takes that space away, and the "x" lands on top of the label text. That is the
 * single most common Select2 regression in this admin, and it kept coming back because each
 * screen fixed it locally.
 *
 * This file is registered for every backend module by XWebModule::beforeControllerAction() and is
 * deliberately narrow. It carries two things and nothing else:
 *   1. the multi-select choice/remove geometry below, which is global because the bug is global;
 *   2. a DataTables grid filter rule scoped to .main-filter (see the bottom of this file).
 * Neither can restyle a control that a screen lays out itself.
 *
 * It is NOT select2-backend-theme.css. That file also normalises control heights, floats and
 * inline layout with !important, which is correct for the screens that opt into it (Cms,
 * InditionBlog, Messaging, Admin) but breaks screens with their own sizing - forcing it
 * everywhere half-overrode the Shop product grid's category filter. The theme stays opt-in;
 * only this geometry fix is global.
 *
 * The properties here are chosen not to collide with the theme's __choice rule (which sets
 * display/float/margin/vertical-align but no padding or position), so the two compose safely in
 * either registration order.
 */

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    padding: 2px 8px 2px 22px !important;
    position: relative !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    background-color: transparent !important;
    border: none !important;
    border-right: 1px solid #aaa !important;
    bottom: 0 !important;
    color: #999 !important;
    cursor: pointer !important;
    font-weight: bold !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 5px !important;
    position: absolute !important;
    top: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #333 !important;
}

/** 4.1 wraps the tag label in its own span; it must not add padding of its own. */
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding-left: 0 !important;
}

/**
 * DataTables grid filter row: match the theme's .form-control.
 *
 * A DataTables filter cell renders a text filter as <input class="filter form-control"> but a
 * select filter as <select class="filter single-select">, which xdatatable.js then hands to a
 * bare .select2() with no options at all. The generated container therefore never receives
 * .form-control, so Select2's own stylesheet applies and the dropdown sits at 28px with square
 * corners and an #aaa border next to a 39px text input with 4px corners and a #ddd border.
 * Restate the theme's metrics (theme.css .form-control: 39px / 9px 12px / 1px #ddd / 4px / 13px).
 *
 * Scoped to .main-filter - the row DataTables emits - so it can only ever affect a grid filter
 * cell. It cannot reach a form or any screen that sizes its own controls, which is what made
 * applying select2-backend-theme.css globally unsafe.
 *
 * No !important needed: at (0,3,0) these outrank Select2's own (0,2,0) rules on their own.
 */
.main-filter .select2-container--default .select2-selection--single {
    height: 39px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.main-filter .select2-container--default .select2-selection--single .select2-selection__rendered {
    /* 39px box less the 1px top and bottom borders, so the label centres optically. */
    line-height: 37px;
    padding-left: 12px;
    padding-right: 28px;
    color: #555;
    font-size: 13px;
}

.main-filter .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 37px;
}

/**
 * CGridView filter row: match that grid's native filter inputs.
 *
 * Same problem as the DataTables row above, different target. A CGridView filter cell renders
 * bare <input>/<select> elements which do NOT carry .form-control - measured at 30px, 1px #ccc,
 * square - while Select2 renders its own 32px, 1px #aaa, 4px-radius control next to them. So the
 * dropdown is 2px taller, a different border colour and rounded against square neighbours.
 *
 * Deliberately NOT the same metrics as the .main-filter rule: these two grid types style their
 * own inputs differently, so "consistent" means matching the siblings in the same grid, not
 * making every Select2 in the admin identical.
 *
 * min-height rather than height on the multiple, so a control with tags in it still grows.
 * Screens with their own filter styling (Customer's .cust-v2 rules, for instance) use !important
 * and more specific selectors, so they continue to win over this.
 */
.grid-view .filters .select2-container--default .select2-selection--single,
.grid-view .filters .select2-container--default .select2-selection--multiple {
    min-height: 30px;
    border: 1px solid #ccc;
    border-radius: 0;
}

.grid-view .filters .select2-container--default .select2-selection--single {
    height: 30px;
}

.grid-view .filters .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px;
}

.grid-view .filters .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 28px;
}

/**
 * Compact tags inside grid filter cells.
 *
 * The global __choice rule at the top of this file reserves a 22px left gutter for the absolutely
 * positioned remove button. That is right in a full-width form field, but a filter column is
 * often only 120-210px wide, so a single tag ends up nearly the full width of the control, the
 * inline search field can no longer sit beside it, and the whole control wraps to a second line -
 * measured at 59.7px against native filter inputs at 30px.
 *
 * Shrink the tag and cap its width so the search field always keeps a slot on the same line. The
 * global rule uses !important, so these have to as well.
 */
.grid-view .filters .select2-container--default .select2-selection--multiple .select2-selection__choice,
.main-filter .select2-container--default .select2-selection--multiple .select2-selection__choice {
    padding: 0 4px 0 17px !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    line-height: 18px !important;
    font-size: 12px;
    /* leave room for the inline search field so the row cannot wrap */
    max-width: calc(100% - 24px);
}

.grid-view .filters .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.main-filter .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    padding: 0 3px !important;
    font-size: 11px;
}

/* v4 pads the selection itself; trim it so one row of tags still lands on the native height. */
.grid-view .filters .select2-container--default .select2-selection--multiple,
.main-filter .select2-container--default .select2-selection--multiple {
    padding-bottom: 2px;
    padding-right: 2px;
}

.grid-view .filters .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field,
.main-filter .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    height: 18px;
    margin-top: 2px;
}

/**
 * NOTE: a max-height/overflow-y cap was tried here to stop filters with many selected values
 * (the Open Orders tab pre-selects 7 statuses, which stacked to 165px) from pushing the grid
 * header down. It is deliberately NOT in place: capping the selection turns it into a scroll
 * container, which is a plausible cause of "clicking the filter does nothing" reports, and
 * keeping the control clickable matters more than keeping the row perfectly aligned.
 *
 * If the tall-control problem needs solving, do it without making the selection scrollable.
 */