/**
 * Select2 styling so the global searchable dropdowns match Bootstrap 5 inputs.
 * Loaded after select2.min.css.
 */

/* Match the height/border/radius of .form-control and .form-select. */
.select2-container--default .select2-selection--single {
    height: calc(1.5em + 0.9rem + 2px);
    padding: 0.05rem 0.2rem;
    border: 1px solid var(--tb-border-color, #e9ebec);
    border-radius: 0.25rem;
    background-color: var(--tb-input-bg, #fff);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + 0.7rem);
    color: var(--tb-body-color, #212529);
    padding-left: 0.6rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.9rem);
}

/* Focus ring consistent with Bootstrap. */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--tb-primary, #3577f1);
    outline: 0;
}

/* Keep an invalid select looking invalid. */
.is-invalid + .select2-container--default .select2-selection--single {
    border-color: var(--tb-danger, #f06548);
}

/* ~5 rows then scroll (the exact px cap is also set from JS). */
.select2-container .select2-results__options {
    max-height: 170px;
    overflow-y: auto;
}

.select2-container .select2-results__option {
    padding: 6px 12px;
    font-size: 0.8125rem;
}

/* The search box inside the dropdown. */
.select2-container .select2-search--dropdown .select2-search__field {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--tb-border-color, #e9ebec);
    border-radius: 0.25rem;
}

/* Above modals (1055) and our detached row menus (1100). */
.select2-container {
    z-index: 1200;
}

/* The results panel itself. Without an explicit background/border it can render
   as an empty white box when it is anchored inside a modal. */
.select2-container .select2-dropdown {
    background-color: var(--tb-secondary-bg, #fff);
    border: 1px solid var(--tb-border-color, #e9ebec);
    border-radius: 0.25rem;
    box-shadow: 0 5px 10px rgba(30, 32, 37, 0.12);
    z-index: 1200;
}

/* Results must be visible and laid out even when the modal clips its body. */
.select2-container .select2-results {
    display: block;
}

.select2-container .select2-results__option {
    display: list-item;
    list-style: none;
}

/* Make the closed control fill its form field.

   Important: do NOT put a width on `.select2-container` generally. Select2
   appends the *dropdown* as its own .select2-container (carrying the same
   --default theme class) and sizes it inline in px to match the field; a width
   rule that also matches the dropdown overrides that and stretches the open list
   across the modal or the whole viewport. Matching only a container that holds a
   selection keeps the dropdown untouched. */
.modal .select2-container:has(> .select2-selection) {
    width: 100% !important;
}

/* The dropdown is appended to the field's wrapper (see dropdownParentFor in
   searchable-selects.js), so that wrapper must be a positioning context. The JS
   sets this inline too; the class keeps it correct if styles load late. */
.select2-dropdown-parent {
    position: relative;
}

/* Dark mode follows the theme variables. */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-dropdown {
    background-color: var(--tb-input-bg, #2a2f34);
    border-color: var(--tb-border-color, #32383e);
    color: var(--tb-body-color, #ced4da);
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--tb-tertiary-bg, #363b3f);
}

/* ---------------------------------------------------------------------------
   Server-side table search (x-form.table-search)

   These listings paginate on the server, so this box submits the term to the
   controller and searches every row - not just the ones on screen.
   --------------------------------------------------------------------------- */
.table-search {
    display: block;
    width: 100%;
}

.table-search__field {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;           /* centred, like the rest of the tables */
}

.table-search__input.form-control {
    width: 100%;
    height: auto;
    padding: 0.5rem 2.75rem;
    text-align: center;        /* placeholder + term sit in the middle */
    border: 1px solid var(--tb-border-color, #e9ebec);
    border-radius: 0.3rem;
    background-color: var(--tb-secondary-bg, #fff);
    color: var(--tb-body-color, #212529);
}

.table-search__input.form-control::placeholder {
    color: var(--tb-secondary-color, #878a99);
    opacity: 1;
}

.table-search__input.form-control:focus {
    border-color: var(--tb-primary, #3577f1);
    box-shadow: 0 0 0 0.15rem rgba(53, 119, 241, 0.15);
    outline: 0;
}

/* Hide the browser's own clear button so ours is the only one. */
.table-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.table-search__clear {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    line-height: 1;
    font-size: 1.25rem;
    text-decoration: none;
    color: var(--tb-secondary-color, #878a99);
}

.table-search__clear:hover {
    color: var(--tb-danger, #f06548);
}

.table-search__hint {
    margin-top: 0.35rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--tb-secondary-color, #878a99);
}

/* Search button inside the field. */
.table-search__btn {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    color: var(--tb-secondary-color, #878a99);
    cursor: pointer;
}

.table-search__btn:hover,
.table-search__btn:focus-visible {
    background-color: var(--tb-primary, #3577f1);
    color: #fff;
    outline: 0;
}

/* When a term is present the clear "x" sits to the left of the button. */
.table-search__clear {
    right: 2.4rem;
}

/* Spinner shown while a live search reloads the page. */
.table-search__spinner {
    position: absolute;
    top: 50%;
    left: 0.7rem;
    transform: translateY(-50%);
    width: 0.95rem;
    height: 0.95rem;
    border: 2px solid var(--tb-border-color, #e9ebec);
    border-top-color: var(--tb-primary, #3577f1);
    border-radius: 50%;
    animation: table-search-spin 0.6s linear infinite;
    pointer-events: none;
}

@keyframes table-search-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* [hidden] must win over the display set above. */
.table-search__spinner[hidden] {
    display: none;
}