/*
  The select-like controls on the page shell (template-v3): select2, and the chips that the other
  select-like components draw.

  Why this file exists
  --------------------
  select2 never had a look of its own here. On template.html pages it inherited one from Minton:
  assets/css/default/app.min.css restyles every select2 part - 38px tall, #ced4da border, 12px
  padding, a soft dropdown shadow - and, crucially, pins `.select2-container { width: 100% }`.

  ShellConfiguration removes the "app-css" asset for shell pages (the shell draws its own chrome and
  must not fight Minton's). Nothing replaced Minton's select2 block, so on a shell page select2 falls
  all the way back to the vendor default theme: 28px tall, #aaa border, 4px radius, #444 text, a
  #5897fb dropdown highlight and no container width at all. Beside a shell .form-control (33px,
  --sl-200, --shell-radius, 12.5px) it reads as a control from another application.

  Two consequences of the missing container width are outright bugs:

    * select2 defaults to `width: 'resolve'`, which measures the original <select> once at init and
      writes the result to the container as an inline pixel width. With Minton's
      `width: 100% !important` gone there is nothing to beat that inline width, so the control keeps
      the pixels it was born with: it overflows its column when the grid gets narrower (the
      testdataanalyzer "Create new tests" page: "Order no." and "Material Link" running past the
      card) and it collapses to a sliver when it is initialised inside a hidden tab or modal.
    * inside an .input-group the container is not a flex item, so the group wraps onto two rows.

  Everything here is scoped to body.shell, so template-v1/v2 pages keep Minton's select2 exactly as
  it is.

  Bootstrap 5.1
  -------------
  The theme is Bootstrap 5.1: --bs-border-color, --bs-secondary-bg, --bs-secondary-color and the
  other 5.2+ variables do NOT exist and a var() naming one silently drops the whole declaration.
  Only --bs-gray-* and --bs-primary* are safe. Colours below come from the shell tokens.

  Specificity
  -----------
  The compiled theme carries `.select2-selection__choice { background-color: #ff6900 !important }`
  (buildBootstrap, from customizations/bootstrap/custom.scss). An !important declaration is only
  beaten by another !important one, and between two of those specificity decides before order - so
  the chip rules below are !important and carry the body.shell prefix that outranks it.
*/

/* ── the container ───────────────────────────────────────────────────────
   What app.min.css did, restored. `width` is !important because select2 writes an inline pixel
   width onto this element at init and never updates it. */

body.shell .select2-container {
    width: 100% !important;
    max-width: 100%;
}

/* A grid column defaults to min-width:auto, so the min-content width of a long option label can
   push the column - and the card around it - wider than its track. Only columns that hold a select2
   are touched; a bare `min-width: 0` on every column would change wrapping across every shell page.
   Browsers without :has() simply keep the old behaviour, which the width rule above already makes
   survivable. */
body.shell .row > [class*="col"]:has(.select2-container) {
    min-width: 0;
}

/* ── single select: the shell's .form-control ────────────────────────── */

body.shell .select2-container .select2-selection--single {
    height: 33px;
    border: 1px solid var(--sl-200);
    border-radius: var(--shell-radius);
    background-color: var(--bs-white);
    outline: 0;
}

body.shell .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 31px;
    padding-left: 10px;
    padding-right: 30px;
    font-size: 12.5px;
    color: var(--sl-800);
}

body.shell .select2-container .select2-selection--single .select2-selection__placeholder {
    color: var(--sl-400);
}

/* The vendor flattens the corners on the joined edge while the panel is open. The shell's panel is
   a detached menu with its own radius and a 4px gap (below), so the control keeps its shape. */
body.shell .select2-container--open .select2-selection--single,
body.shell .select2-container--open .select2-selection--multiple {
    border-radius: var(--shell-radius);
}

/* ── the arrow ───────────────────────────────────────────────────────── */

body.shell .select2-container .select2-selection--single .select2-selection__arrow {
    height: 31px;
    width: 30px;
    right: 1px;
}

body.shell .select2-container .select2-selection--single .select2-selection__arrow b {
    border-color: var(--sl-400) transparent transparent transparent;
    border-width: 5px 4px 0 4px;
    margin-left: -4px;
}

body.shell .select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--sl-600) transparent;
    border-width: 0 4px 5px 4px;
}

/* custom.css draws the same triangle on the multiple variant with a ::before. Recoloured here
   rather than there, so template.html pages keep the grey they have always had. */
body.shell .select2-container .select2-selection--multiple::before {
    border-top-color: var(--sl-400);
}

body.shell .select2-container--open .select2-selection--multiple::before {
    border-bottom-color: var(--sl-600);
}

/* ── the clear "×" (allowClear) ──────────────────────────────────────── */

body.shell .select2-container .select2-selection__clear {
    color: var(--sl-400);
    font-size: 15px;
    font-weight: 400;
    line-height: 29px;
    margin-right: 8px;
}

body.shell .select2-container .select2-selection__clear:hover {
    color: var(--sl-700);
}

/* ── focus and open: the shell's focus ring ──────────────────────────── */

body.shell .select2-container--focus .select2-selection--single,
body.shell .select2-container--focus .select2-selection--multiple,
body.shell .select2-container--open .select2-selection--single,
body.shell .select2-container--open .select2-selection--multiple {
    border: 1px solid var(--brand-500);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
    outline: 0;
}

/* ── disabled: the same grey as .form-control:disabled ───────────────── */

body.shell .select2-container--disabled .select2-selection--single,
body.shell .select2-container--disabled .select2-selection--multiple {
    background-color: var(--bs-gray-200, #e9ecef);
    border-color: var(--sl-200);
    box-shadow: none;
}

body.shell .select2-container--disabled .select2-selection__rendered {
    color: var(--sl-600);
}

/* ── multiple: the same box, with chips inside ───────────────────────── */

body.shell .select2-container .select2-selection--multiple {
    min-height: 33px;
    border: 1px solid var(--sl-200);
    border-radius: var(--shell-radius);
    background-color: var(--bs-white);
    cursor: text;
}

/* flex rather than the vendor's floats: the chips then wrap and centre on their own, and the row
   keeps its height when one of them is taller than the others. */
body.shell .select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 3px 24px 3px 6px;
    margin: 0;
    line-height: normal;
}

body.shell .select2-container .select2-selection--multiple .select2-selection__rendered li {
    float: none;
    margin: 0;
}

/* ── chips ───────────────────────────────────────────────────────────────
   --brand-100 behind --brand-800 is the shell's own chip pairing (.shell-page-badge in shell.css):
   5.1:1 against it, where the solid brand orange this replaces put --sl-800 on #ff6900 at 5.1:1 but
   read as a row of buttons, and white on that orange would have been 2.9:1. */

body.shell .select2-container .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: var(--brand-100) !important;
    color: var(--brand-800);
    border: 1px solid transparent;
    border-radius: var(--shell-radius-sm);
    padding: 1px 7px;
    font-size: 11.5px;
    line-height: 18px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.shell .select2-container .select2-selection__choice__remove {
    color: var(--brand-700);
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    margin: 0;
    order: 1; /* the vendor puts the × first; the shell's chips carry it on the right */
}

body.shell .select2-container .select2-selection__choice__remove:hover,
body.shell .select2-container .select2-selection__choice__remove:focus {
    color: var(--brand-800);
    outline: 0;
}

body.shell .select2-container .select2-selection--multiple .select2-search--inline {
    float: none;
    display: flex;
    flex: 1 1 60px;
    min-width: 60px;
}

body.shell .select2-container .select2-selection--multiple .select2-search__field {
    margin: 0;
    padding: 0;
    height: 21px;
    width: 100% !important;
    font-size: 12.5px;
    color: var(--sl-800);
    background: transparent;
}

body.shell .select2-container .select2-search__field::placeholder {
    color: var(--sl-400);
}

/* ── the dropdown panel: the shell's .dropdown-menu ──────────────────── */

body.shell .select2-dropdown {
    border: 1px solid var(--sl-200);
    border-radius: var(--shell-radius-lg);
    background-color: var(--bs-white);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
    padding: 6px;
    font-size: 12.5px;
    /* Above a Bootstrap modal (1055), for the inits that pass no dropdownParent. */
    z-index: 1056;
    overflow: hidden;
}

/* The vendor drops the border and the radius on the joined edge and sits the panel flush against
   the control. The shell's menus are detached, so both come back and the panel is offset by 4px. */
body.shell .select2-dropdown--below {
    margin-top: 4px;
}

body.shell .select2-dropdown--above {
    margin-top: -4px;
}

body.shell .select2-container--open .select2-dropdown--above,
body.shell .select2-container--open .select2-dropdown--below {
    border: 1px solid var(--sl-200);
    border-radius: var(--shell-radius-lg);
}

/* ── the dropdown's search box: a small .form-control ────────────────── */

body.shell .select2-container .select2-search--dropdown {
    padding: 0 0 6px;
    background-color: transparent;
}

body.shell .select2-container .select2-search--dropdown .select2-search__field {
    height: 33px;
    padding: 6px 10px;
    border: 1px solid var(--sl-200);
    border-radius: var(--shell-radius);
    background-color: var(--bs-white);
    font-size: 12.5px;
    color: var(--sl-800);
    outline: 0;
}

body.shell .select2-container .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
}

/* ── the rows ────────────────────────────────────────────────────────── */

body.shell .select2-dropdown .select2-results__option {
    padding: 7px 10px;
    border-radius: var(--shell-radius);
    color: var(--sl-700);
}

body.shell .select2-dropdown .select2-results__option[aria-disabled="true"] {
    color: var(--sl-400);
}

body.shell .select2-dropdown .select2-results__group {
    padding: 7px 10px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sl-500);
}

/* The brand tint, the same pairing the sidebar's current item uses. --brand-800 rather than
   --brand-600 for the label: 5.6:1 against --brand-50, where --brand-600 is 2.7:1. */
body.shell .select2-dropdown .select2-results__option--highlighted,
body.shell .select2-dropdown .select2-results__option--highlighted[aria-selected],
body.shell .select2-dropdown .select2-results__option[aria-selected="true"]:hover {
    background-color: var(--brand-50);
    color: var(--brand-800);
}

body.shell .select2-dropdown .select2-results__option--selected,
body.shell .select2-dropdown .select2-results__option[aria-selected="true"] {
    background-color: var(--brand-50);
    color: var(--brand-800);
    font-weight: 600;
}

body.shell .select2-dropdown .select2-results > .select2-results__options {
    max-height: 240px;
}

/* ── inside an .input-group ──────────────────────────────────────────────
   The container has to be a flex item or the group wraps onto a second row. The hidden original
   <select> stays in the DOM as the container's previous sibling, so "is this the first control in
   the group" is `.select2-hidden-accessible:first-child + .select2-container`, not :first-child. */

body.shell .input-group > .select2-container {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: -1px;
}

body.shell .input-group > .select2-hidden-accessible:first-child + .select2-container {
    margin-left: 0;
}

body.shell .input-group > .select2-container .select2-selection--single,
body.shell .input-group > .select2-container .select2-selection--multiple {
    border-radius: 0;
}

body.shell .input-group > .select2-hidden-accessible:first-child + .select2-container .select2-selection--single,
body.shell .input-group > .select2-hidden-accessible:first-child + .select2-container .select2-selection--multiple {
    border-top-left-radius: var(--shell-radius);
    border-bottom-left-radius: var(--shell-radius);
}

body.shell .input-group > .select2-container:last-child .select2-selection--single,
body.shell .input-group > .select2-container:last-child .select2-selection--multiple {
    border-top-right-radius: var(--shell-radius);
    border-bottom-right-radius: var(--shell-radius);
}

/* An open control has to draw its ring over its neighbours in the group. */
body.shell .input-group > .select2-container--focus,
body.shell .input-group > .select2-container--open {
    z-index: 3;
    position: relative;
}

/* ── inside a modal ──────────────────────────────────────────────────────
   width:100% above already covers the other half of the modal problem: a select2 initialised while
   its dialog is still display:none measures zero and used to render as a sliver. */

body.shell .modal .select2-container {
    width: 100% !important;
}

/* ══ the other select-like controls ═══════════════════════════════════════
   SmartSelect (assets/js/components/smart-select.js) draws its own control and injects its own
   stylesheet, which reaches for --bs-border-color, --bs-secondary-bg, --bs-secondary-color and
   --bs-soft-primary. The first three do not exist in Bootstrap 5.1, so it silently uses its
   hard-coded fallbacks; the fourth does exist in the branded build and is a pale orange that left
   the chip text at 3.2:1. admin-console.css already corrects this for the three admin console
   pages - the same correction, for every shell page.

   Sizing is deliberately not touched: SmartSelect's 38px control against the shell's 33px
   .form-control is a separate decision, noted in the merge request. */

body.shell .smart-select__control {
    border-color: var(--sl-200);
    border-radius: var(--shell-radius);
    color: var(--sl-800);
}

body.shell .smart-select__control.is-open {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
}

body.shell .smart-select.is-disabled .smart-select__control {
    background: var(--bs-gray-200, #e9ecef);
}

body.shell .smart-select__placeholder,
body.shell .smart-select__search::placeholder,
body.shell .smart-select__caret {
    color: var(--sl-400);
}

body.shell .smart-select__tag {
    background: var(--brand-100);
    color: var(--brand-800);
    border-radius: var(--shell-radius-sm);
}

body.shell .smart-select__tag-remove {
    color: var(--brand-700);
    opacity: 1;
}

body.shell .smart-select__tag-remove:hover,
body.shell .smart-select__tag-remove:focus {
    color: var(--brand-800);
}

body.shell .smart-select__dropdown {
    border-color: var(--sl-200);
    border-radius: var(--shell-radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
}

body.shell .smart-select__option:hover,
body.shell .smart-select__option.is-active {
    background: var(--brand-50);
    color: var(--brand-800);
}

/* smart-select mode="list": the same list, inline under the control. */
body.shell .smart-select__panel {
    border-color: var(--sl-200);
    border-radius: var(--shell-radius-lg);
}