/*
 * Project-wide select2 skin — the TMS look (resources/views/livewire/partials/select2-standard.blade.php)
 * applied to every select2 on every page that uses the admin / app / customer layouts.
 *
 * Loaded right AFTER assets/css/custom.css (see the layouts), because custom.css forces
 * `height: 28px !important` and `font-size: 10px !important` on every select2, and
 * resources/css/app.css forces the multi-select chip layout with !important. The `html body`
 * prefix out-ranks those selectors; !important is used only where they already use it.
 *
 * Deliberately NOT touched here: widths. Many pages size select2 themselves (the per-page
 * `.select2 { width: 250vw }` rule, .full_width_select2, …); a global width would shift layouts.
 *
 * Opt-in classes (same names as the TMS partial, so existing markup keeps working):
 *   tms-s2--count   on a <select multiple>: one pill "N selected" instead of a row of chips
 *   tms-s2--sm      on a <select>: shorter control
 *   tms-s2-drop--multi  via dropdownCssClass: tick boxes in a multi-select's list
 *
 * To switch the skin off everywhere, remove the <link> to this file from the layouts.
 */

/* ---------- control ---------- */
html body .select2-container--default .select2-selection--single,
html body .select2-container--default .select2-selection--multiple {
    min-height: 2.375rem !important;
    border: 1px solid #cbd5e1;
    border-radius: .5rem;
    background: #fff;
    font-size: .875rem !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
html body .select2-container--default .select2-selection--single {
    height: 2.375rem !important;
    position: relative;
}
html body .select2-container--default .select2-selection--multiple {
    height: auto !important;
    padding: .15rem .35rem !important;
}
html body .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.25;
    padding-left: .75rem;
    padding-right: 2.75rem;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html body .select2-container--default .select2-selection--single .select2-selection__arrow {
    position: absolute;
    top: 0;
    right: .35rem;
    height: 100% !important;
}
html body .select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute;
    top: 50%;
    right: 1.6rem;
    transform: translateY(-50%);
    margin: 0;
    font-size: 1.05rem;
    color: #94a3b8;
}
html body .select2-container--default .select2-selection--single .select2-selection__placeholder,
html body .select2-container--default .select2-search--inline .select2-search__field::placeholder {
    color: #94a3b8;
}

/* focus / open */
html body .select2-container--default.select2-container--focus .select2-selection--multiple,
html body .select2-container--default.select2-container--focus .select2-selection--single,
html body .select2-container--default.select2-container--open .select2-selection--single,
html body .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .15);
}
/* The control is a picker, not a text box: pointer everywhere on it, including a multi-select's inline
   search box (read-only — app.js moves multi-select searching into the open list), and no text caret. */
html body .select2-container .select2-selection,
html body .select2-container .select2-selection__rendered,
html body .select2-container .select2-selection--multiple .select2-search--inline,
html body .select2-container .select2-selection--multiple .select2-search__field {
    cursor: pointer !important;
}
html body .select2-container .select2-selection--multiple .select2-search__field[readonly] {
    caret-color: transparent;
}
html body .select2-container--default.select2-container--disabled .select2-selection,
html body .select2-container--default.select2-container--disabled .select2-search__field {
    background: #f1f5f9;
    cursor: not-allowed !important;
}

/* multi-select chips (layout itself stays as resources/css/app.css sets it: wrapping chips) */
html body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    padding: .05rem .5rem .05rem 1.35rem;
    font-size: .75rem;
    font-weight: 500;
    color: #065f46;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 9999px;
    position: relative;
}
html body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border: 0;
    color: #10b981;
    background: transparent;
}
html body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #dc2626;
    background: transparent;
}
html body .select2-container--default .select2-search--inline .select2-search__field {
    font-size: .8125rem;
    font-family: inherit;
}

/* ---------- opt-in: shorter control ---------- */
html body .tms-s2--sm + .select2-container--default .select2-selection--single {
    min-height: 2rem !important;
    height: 2rem !important;
}
html body .tms-s2--sm + .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: .75rem;
}

/* custom.css pins every .select2 container at 35px; the control is taller now and a multi-select
   can grow, so let the container follow its content instead of letting it spill over the fields below. */
html body .select2.select2-container {
    height: auto !important;
}

/* ---------- "N selected" multi-select ----------
   Every multi-select2 gets it automatically: resources/js/app.js (summariseMultiSelect2) adds
   .s2-summary to the container and keeps data-summary = the one picked name, or "N selected"
   (title lists them all). Pages that manage their own summary use .tms-s2--count on the <select>.
   Opt out (keep chips) with data-s2-chips on the <select>. */
/* One row at exactly the single-select height. custom.css gives every select2 selection
   `flex-direction: column; justify-content: center`, which stacked pill / search / arrow on top
   of each other and made these about twice as tall — hence the !important row layout here. */
html body .tms-s2--count + .select2-container .select2-selection--multiple,
html body .select2-container.s2-summary .select2-selection--multiple {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    align-content: center !important;
    flex-wrap: nowrap !important;
    height: 2.375rem !important;
    min-height: 2.375rem !important;
    max-height: 2.375rem !important;
    padding: 0 .35rem !important;
    position: relative;
    overflow: hidden !important;
    cursor: pointer;
}
/* multi-select clear (×): vertically centred, left of the arrow */
html body .tms-s2--count + .select2-container .select2-selection--multiple .select2-selection__clear,
html body .select2-container.s2-summary .select2-selection--multiple .select2-selection__clear {
    position: absolute;
    top: 50%;
    right: 1.6rem;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    height: auto;
    line-height: 1;
    font-size: 1.05rem;
    color: #94a3b8;
    background: transparent;
    border: 0;
}
html body .tms-s2--count + .select2-container .select2-selection__rendered,
html body .select2-container.s2-summary .select2-selection__rendered {
    display: none !important;
}
html body .tms-s2--count + .select2-container .select2-selection--multiple::before,
html body .select2-container.s2-summary .select2-selection--multiple::before {
    content: attr(data-summary);
    flex: 0 1 auto;
    max-width: calc(100% - 2rem);
    margin: 0 .25rem 0 .2rem;
    padding: .1rem .55rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.35rem;
    color: #065f46;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 9999px;
}
html body .tms-s2--count + .select2-container .select2-selection--multiple[data-summary=""]::before,
html body .tms-s2--count + .select2-container .select2-selection--multiple:not([data-summary])::before,
html body .select2-container.s2-summary .select2-selection--multiple[data-summary=""]::before,
html body .select2-container.s2-summary .select2-selection--multiple:not([data-summary])::before {
    display: none;
}
html body .tms-s2--count + .select2-container .select2-search--inline,
html body .select2-container.s2-summary .select2-search--inline {
    flex: 1 1 3rem !important;
    min-width: 3rem;
    min-height: 0 !important;
    height: 1.6rem !important;
    display: flex !important;
    align-items: center !important;
}
/* select2 4.1's inline search is a <textarea>; custom.css boxes every textarea (28px, border, 10px). */
html body .select2-container--default .select2-selection--multiple .select2-search__field {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent;
    padding: 0 !important;
    font-size: .8125rem !important;
    text-align: left;
    overflow: hidden;
}
html body .tms-s2--count + .select2-container .select2-search--inline .select2-search__field,
html body .select2-container.s2-summary .select2-search--inline .select2-search__field {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 0 .3rem !important;
    height: 1.6rem !important;
    line-height: 1.6rem !important;
    resize: none;
}
html body .tms-s2--count + .select2-container .select2-selection--multiple::after,
html body .select2-container.s2-summary .select2-selection--multiple::after {
    content: '';
    flex: 0 0 auto;
    margin: 0 .55rem 0 auto;
    border: 4px solid transparent;
    border-top-color: #64748b;
    border-bottom-width: 0;
}

/* ---------- dropdown (every select2 list, wherever it is attached) ---------- */
/* The open list lives in its own `span.select2-container` (no `select2` class — that one is the
   field). app.css makes every `.select2-container` `width: 100% !important` for fluid fields, which
   also stretched this floating wrapper to the full page width starting at the field's left edge:
   the page grew sideways and scrolled on open. The list sizes itself (select2 sets its width). */
html body .select2-container:not(.select2) {
    width: auto !important;
    max-width: none !important;
}

html body .select2-container--default .select2-dropdown {
    border-color: #10b981;
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 12px 28px -10px rgba(15, 23, 42, .35);
    font-size: .8125rem;
}
html body .select2-container--default .select2-search--dropdown {
    padding: .4rem;
}
html body .select2-container--default .select2-search--dropdown .select2-search__field {
    height: 2rem;
    padding: .25rem .5rem;
    border: 1px solid #cbd5e1;
    border-radius: .375rem;
    outline: none;
}
html body .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #10b981;
}
html body .select2-container--default .select2-results__option {
    padding: .4rem .65rem;
}
/* Keep a long list inside the viewport instead of running off the bottom of a modal. */
html body .select2-container--default .select2-results > .select2-results__options {
    max-height: 15rem;
    overscroll-behavior: contain;
}
html body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: #ecfdf5 !important;
    color: #065f46 !important;
}
html body .select2-container--default .select2-results__option--selected {
    background: #f0fdf4;
    font-weight: 600;
    color: #065f46;
}
html body .select2-container--default .tms-s2-sub {
    display: block;
    font-size: .6875rem;
    font-weight: 400;
    color: #94a3b8;
}

/* ---------- tick boxes in every multi-select's list ----------
   select2 marks a multi-select's result list with aria-multiselectable="true", so no page markup
   is needed; .tms-s2-drop--multi still works for pages that set it. With chips replaced by the
   summary, the ticks are where picks are seen and removed. */
html body .tms-s2-drop--multi .select2-results__option,
html body .select2-results__options[aria-multiselectable="true"] > .select2-results__option {
    position: relative;
    padding-left: 2rem;
}
/* empty box on every pickable row (not on "Searching…" / "No results" messages) */
html body .select2-results__options[aria-multiselectable="true"] > .select2-results__option--selectable::before,
html body .select2-results__options[aria-multiselectable="true"] > .select2-results__option--selected::before,
html body .tms-s2-drop--multi .select2-results__option::before {
    content: '';
    position: absolute;
    left: .6rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    margin-top: -.5rem;
    border: 1.5px solid #cbd5e1;
    border-radius: .25rem;
    background: #fff;
    transition: all .12s ease;
}
/* ticked — must stay after the empty-box rule above (same specificity) */
html body .select2-results__options[aria-multiselectable="true"] > .select2-results__option--selected::before,
html body .tms-s2-drop--multi .select2-results__option--selected::before {
    border-color: #059669;
    background: #059669 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E") center / .8rem no-repeat;
}
html body .tms-s2-bulk {
    display: flex;
    justify-content: space-between;
    padding: .3rem .65rem;
    font-size: .6875rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
html body .tms-s2-bulk button { font-weight: 600; color: #047857; }
html body .tms-s2-bulk button:hover { text-decoration: underline; }

/* Mary x-select icons (icon= / icon-right=, e.g. the o-check on Status fields) are absolutely placed over the
   native select. Once the select becomes a select2 they sat on top of the select2 text, so they are hidden;
   the select2 box has its own arrow. Mary 1 markup: the svg follows the select; Mary 2: it sits before it. */
select.select2-hidden-accessible ~ svg.absolute.pointer-events-none,
label.select > svg.pointer-events-none:has(~ select.select2-hidden-accessible) {
    display: none !important;
}

/* every select2 "×" (clear the pick, remove one chip) is a click target: pointer cursor + a hover cue */
html body .select2-container .select2-selection__clear,
html body .select2-container .select2-selection__choice__remove {
    cursor: pointer !important;
}
html body .select2-container--default .select2-selection--single .select2-selection__clear:hover,
html body .select2-container .select2-selection--multiple .select2-selection__clear:hover {
    color: #dc2626;
}