/*!
 * Tom Select theme for CMS Builder
 *
 * Adapted for the CMSB admin: flat Bootstrap 3 look, matching .form-control
 * aesthetics, grey pills, CMSB focus glow.
 *
 * Forked 2026-04-12 from Tom Select 2.5.2 default theme (modified):
 *   https://cdn.jsdelivr.net/npm/tom-select@2.5.2/dist/css/tom-select.default.css
 *
 * When upstream ships CSS changes worth picking up, diff their new
 * default.css against our fork and merge relevant deltas in place.
 *
 * Original work (c) Tom Select contributors, Apache License 2.0
 *   http://www.apache.org/licenses/LICENSE-2.0
 */

/*region CSS Variables */

:root {
    /* Plugin padding slots (reserved right-padding for clear button + caret) */
    --ts-pr-clear-button: 0px;
    --ts-pr-caret:        0px;
    --ts-pr-min:          .75rem;

    /* Borders */
    --ts-border:          #CCCCCC;   /* control, dropdown, spinner */
    --ts-border-subtle:   #e6e6e6;   /* disabled pill border */
    --ts-border-pill:     #dee2e6;   /* pill border (BS5 --bs-border-color) */

    /* Text */
    --ts-text:            #303030;   /* primary text */
    --ts-text-strong:     #333333;   /* pill label, × hover */
    --ts-text-muted:      #666666;   /* clear button, secondary */
    --ts-text-dim:        #999;      /* × resting, disabled pill text */

    /* Surfaces */
    --ts-pill-bg:         #efefef;
    --ts-pill-active-bg:  #5b8def;   /* selected-for-delete pill */
    --ts-disabled-bg:     #fafafa;

    /* Matches BS3 .form-control:focus */
    --ts-focus:           #66afe9;
    --ts-focus-glow:      rgba(102, 175, 233, 0.6);

    --ts-chevron:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/></svg>");
}

/*endregion*/
/*region Core Control */

.ts-wrapper {
    position:   relative;
    display:    block;
    width:      100%;
    max-width:  100%;
    height:     auto !important;
    border:     none !important;
    padding:    0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.input-group .ts-wrapper { display: block; }
.input-group.ts-w100 {
    width: 100%;
}
.ts-wrapper.single .ts-dropdown {
    width:     max-content;
    min-width: 100%;
    max-width: 100%;   /* cap at .ts-wrapper's width (absolute-positioned containing block) so dropdown doesn't overflow its column */
}

.ts-control {
    border:        1px solid var(--ts-border);
    border-radius: 0;
    background:    #fff;
    padding:       8px;
    width:         100%;
    overflow:      hidden;
    position:      relative;
    z-index:       1;
    box-sizing:    border-box;
    display:       inline-flex;
    flex-wrap:     wrap;
    cursor:        text;
    color:         var(--ts-text);
    font-family:   inherit;
    font-size:     14px;
    line-height:   normal;   /* match native <select> baseline */
}

.ts-control:not(.rtl) {
    padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}
.ts-control.rtl {
    padding-left: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
    text-align:   right;
}

.ts-wrapper.focus .ts-control {
    border-color: var(--ts-focus);
    box-shadow:   inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px var(--ts-focus-glow);
}

.disabled .ts-control {
    opacity:          0.5;
    background-color: var(--ts-disabled-bg);
}
.disabled .ts-control,
.disabled .ts-control * {
    cursor: default !important;
}

/* No visibility:hidden - it blocks focus() so Del/Backspace can't delete active pills. */
.input-hidden .ts-control > input {
    opacity:        0;
    pointer-events: none;
    position:       static !important;
    left:           auto !important;
}

.ts-control > input {
    flex:                1 1 auto;
    min-width:           7rem;
    display:             inline-block !important;
    padding:             0 !important;
    min-height:          0 !important;
    max-height:          none !important;
    max-width:           100% !important;
    margin:              0 !important;
    text-indent:         0 !important;
    border:              0 none !important;
    background:          none !important;
    line-height:         inherit !important;
    user-select:         auto !important;
    box-shadow:          none !important;
}
.ts-control > input:focus {
    outline: none !important;
}

.has-items .ts-control > input {
    margin: 0 2px 0 0 !important;
}
.ts-wrapper.single .ts-control > input {
    margin-left: 2px !important;
}

/*endregion*/
/*region Single Select */

.ts-wrapper.single .ts-control {
    height:        34px;
    padding:       3px 28px 3px 8px;
    align-items:   center;
    color:         var(--ts-text-muted);
    --ts-pr-caret: 2.5rem;   /* 24px reserve keeps typed text from rendering under the chevron (at ~20.5px from right) */
}
.ts-wrapper.single .ts-control,
.ts-wrapper.single .ts-control input {
    cursor: pointer;
}
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.single.input-active .ts-control input {
    cursor: text;
}
/* Hide the selected .item only when the input has actual content (user is searching) -
   :not(:placeholder-shown) is true when the input holds non-placeholder text */
.ts-wrapper.single:has(.ts-control > input:not(:placeholder-shown)) .ts-control .item {
    display: none;
}

/* Force single-line layout on single-select so the caret and the selected .item always
   share the row. The item already truncates with text-overflow:ellipsis. */
.ts-wrapper.single .ts-control {
    flex-wrap: nowrap;
}
.ts-wrapper.single .ts-control .item {
    min-width: 0;      /* allow .item to shrink past its content width so flex has room for input */
    flex-shrink: 1;
}
.ts-wrapper.single .ts-control > input {
    flex: 0 0 auto;    /* input holds its natural size; .item shrinks to make room */
}
/* Once the user is typing (.item hidden by :has rule above), let the input take the full row. */
.ts-wrapper.single:has(.ts-control > input:not(:placeholder-shown)) .ts-control > input {
    flex: 1 1 auto !important;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.multi  .ts-control {
    background-image:    var(--ts-chevron);
    background-repeat:   no-repeat;
    background-size:     12px;
    background-position: right 8.5px center;
}
.ts-wrapper.single .ts-control.rtl {
    background-position: left 8.5px center;
}

/*endregion*/
/*region Multi Select */

.ts-wrapper.multi .ts-control {
    min-height:    34px;
    padding:       3px 5px;
    align-items:   center;
    --ts-pr-caret: 2.5rem;   /* reserve for the chevron, same as single; right-padding flows through the --ts-pr-* chain */
}

/*endregion*/
/*region Multi Select Pills */

.ts-wrapper.multi .ts-control .item {
    background:    var(--ts-pill-bg);
    color:         var(--ts-text-strong);
    text-shadow:   none;
    border:        1px solid var(--ts-border-pill);
    border-radius: 4px;
    padding:       0 0 0 5px;
    margin:        2px 5px 2px 0;
    font-size:     14px;
    line-height:   20px;
    overflow:      visible;
    box-shadow:    none;
}

.ts-wrapper.multi .ts-control .item.active {
    background:   var(--ts-pill-active-bg);
    border-color: var(--ts-pill-active-bg);
    color:        #fff;
}
.ts-wrapper.multi .ts-control .item.active .remove {
    color: rgba(255, 255, 255, 0.85);
}
.ts-wrapper.multi .ts-control .item.active .remove:hover {
    color: #fff;
}

.ts-wrapper.multi.disabled .ts-control .item {
    color:        var(--ts-text-dim);
    background:   none;
    border-color: var(--ts-border-subtle);
}

/*endregion*/
/*region Dropdown */

.ts-dropdown {
    position:      absolute;
    top:           100%;
    left:          0;
    z-index:       1050;
    width:         100%;
    min-width:     0;
    border:        1px solid var(--ts-border);
    border-top:    0;
    border-radius: 0;
    background:    #fff;
    margin:        0;
    box-sizing:    border-box;
    box-shadow:    0 6px 12px rgba(0, 0, 0, .175);
}

.ts-wrapper.dropdown-active .ts-control {
    border-radius: 0;
}

.ts-dropdown-content {
    overflow:        hidden auto;
    max-height:      250px;
    scroll-behavior: smooth;
}

.ts-dropdown :is(.option, .optgroup-header, .no-results, .create) {
    padding:     3px 4px 3px 8px;
    line-height: normal;   /* match native; overrides inherited 20px */
}
.ts-dropdown .option {
    display:     flex;
    align-items: center;
}
/* Margin not gap - gap would split the highlight <span> from the trailing text node. */
.ts-dropdown .option input.tomselect-checkbox {
    margin: 0 6px 0 0;
}
.ts-dropdown .option,
.ts-dropdown [data-disabled],
.ts-dropdown [data-disabled] [data-selectable].option {
    cursor:  inherit;
    opacity: 0.5;
}
.ts-dropdown [data-selectable] {
    cursor:   pointer;
    overflow: hidden;
}
.ts-dropdown [data-selectable].option {
    opacity: 1;
}

.ts-dropdown .active {
    background-color: #f5f5f5;
    color:            #495c68;
}
.ts-dropdown .option.selected {
    background-color: var(--ts-focus);
    color:            #fff;
    font-weight:      500;
}
.ts-dropdown .option.selected.active {
    background-color: #0a5fd4;   /* darker blue when hovering the already-selected option */
}
.ts-wrapper.single .option.selected {
    background-color: SelectedItem;
    color:            SelectedItemText;
    font-weight:      normal;
}
.ts-dropdown .create {
    color: rgba(48, 48, 48, 0.5);
}

.ts-dropdown [data-selectable] .highlight {
    background:  transparent;
    font-weight: 600;
}

.ts-dropdown .optgroup-header {
    color:       var(--ts-text);
    background:  #fff;
    cursor:      default;
    padding-top: 7px;
    font-weight: bold;
}
.ts-dropdown .optgroup .option {
    padding-left: 20px;
}
.ts-dropdown .optgroup {
    border-top: 1px solid #f0f0f0;
}
.ts-dropdown .optgroup:first-child {
    border-top: 0;
}

.ts-dropdown .spinner {
    display: inline-block;
    width:   30px;
    height:  30px;
    margin:  5px 8px;
}
.ts-dropdown .spinner::after {
    content:       " ";
    display:       block;
    width:         24px;
    height:        24px;
    margin:        3px;
    border-radius: 50%;
    border-width:  5px;
    border-style:  solid;
    border-color:  var(--ts-border) transparent;
    animation:     lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ts-dropdown .option,
.ts-control .item,
.ts-wrapper .no-results {
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/*endregion*/
/*region Utilities */

/* Screen-reader-only */
.ts-hidden-accessible {
    border:      0 !important;
    clip-path:   inset(50%) !important;
    overflow:    hidden !important;
    padding:     0 !important;
    position:    absolute !important;
    width:       1px !important;
    white-space: nowrap !important;
}

/*endregion*/
/*region Plugin - clear_button */

.plugin-clear_button {
    --ts-pr-clear-button: 1em;
}
.plugin-clear_button .clear-button {
    opacity:      0;
    position:     absolute;
    top:          50%;
    right:        2px;
    transform:    translateY(-50%);
    margin-right: 0 !important;
    background:   transparent !important;
    transition:   opacity 0.5s;
    cursor:       pointer;
    color:        var(--ts-text-muted);
    font-size:    18px;
    padding:      6px 8px;
    line-height:  1;
}
.plugin-clear_button .clear-button:hover {
    color: var(--ts-text-strong);
}
.plugin-clear_button.single .clear-button {
    right: max(var(--ts-pr-caret), 8px);
}
.plugin-clear_button.focus.has-items .clear-button,
.plugin-clear_button:not(.disabled):hover.has-items .clear-button {
    opacity: 1;
}

/*endregion*/
/*region Plugin - remove_button */

.ts-wrapper.plugin-remove_button .item {
    display:       inline-flex;
    align-items:   center;
    padding-right: 0 !important;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
    display:         flex;
    align-items:     center;
    align-self:      stretch;
    padding:         0 5px 0 4px;
    margin-left:     0;
    font-size:       14px;
    font-weight:     bold;
    line-height:     20px;
    color:           var(--ts-text-dim);
    background:      transparent;
    border:          0;
    text-shadow:     none;
    text-decoration: none;
    cursor:          pointer;
    box-sizing:      border-box;
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
    color: var(--ts-text-strong);
}
.ts-wrapper.plugin-remove_button.disabled .item .remove {
    color: var(--ts-text-dim);
}
.ts-wrapper.plugin-remove_button .remove-single {
    position:  absolute;
    right:     0;
    top:       0;
    font-size: 23px;
}

.ts-wrapper.plugin-remove_button.rtl .item {
    padding-left: 0 !important;
}
.ts-wrapper.plugin-remove_button.rtl .item .remove {
    margin-left:  0;
    margin-right: 2px;
}

/*endregion*/
/*region Plugin - drag_drop */

.ts-wrapper.plugin-drag_drop .ts-dragging {
    color: transparent !important;
}
.ts-wrapper.plugin-drag_drop .ts-dragging > * {
    visibility: hidden !important;
}

/*endregion*/
/*region Plugin - checkbox_options */

.plugin-checkbox_options .option input {
    margin: 0;
}

/*endregion*/
/*region Plugin - dropdown_header */

.ts-wrapper .dropdown-header {
    position:      relative;
    padding:       10px 8px;
    border-bottom: 1px solid var(--ts-border);
    background:    #f5f5f5;
    border-radius: 0;
    font-size:     13px;
}

.ts-wrapper .dropdown-header-close {
    position:    absolute;
    right:       8px;
    top:         50%;
    color:       var(--ts-text);
    opacity:     0.4;
    margin-top:  -12px;
    line-height: 20px;
    font-size:   20px !important;
}
.ts-wrapper .dropdown-header-close:hover {
    color: black;
}

/*endregion*/
/*region Plugin - dropdown_input */

.plugin-dropdown_input.focus.dropdown-active .ts-control {
    box-shadow: none;
    border:     1px solid var(--ts-border);
}
.plugin-dropdown_input .dropdown-input {
    display:      block;
    padding:       8px;
    width:         100%;
    border-bottom: 1px solid var(--ts-border);
    background:    transparent;
    box-shadow:   inset 0 1px 1px rgba(0, 0, 0, 0.1);
}
.plugin-dropdown_input .items-placeholder {
    border:     0 none !important;
    box-shadow: none !important;
    width:      100%;
}
.plugin-dropdown_input.has-items .items-placeholder,
.plugin-dropdown_input.dropdown-active .items-placeholder {
    display: none !important;
}

/*endregion*/
/*region Plugin - input_autogrow */

.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
    min-width: 0;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
    flex:      none;
    min-width: 4px;
    max-width: calc(100% - 40px) !important;   /* breathing room - typing stays on the current row instead of wrapping */
}
/* Full-width containers already have ample horizontal room; don't cap the input */
.input-group.ts-w100 .ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
    max-width: 100% !important;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
    color: transparent;
}

/*endregion*/
/*region Plugin - optgroup_columns */

.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
    display: flex;
}
.ts-dropdown.plugin-optgroup_columns .optgroup {
    border-right: 1px solid #f2f2f2;
    border-top:   0 none;
    flex-grow:    1;
    flex-basis:   0;
    min-width:    0;
}
.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
    border-right: 0 none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup::before {
    display: none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup-header {
    border-top: 0 none;
}

/*endregion*/
/*region Custom - Clear selection row */

/* "Clear selection" row injected at the top of the dropdown via the dropdown_header
   plugin (see Fields/ForeignKey.js). */
.ts-wrapper .clear-row {
    display:        flex;
    align-items:    center;
    gap:            4px;
    padding:        3px 4px;
    font-size:      14px;
    color:          var(--ts-text-muted);
    cursor:         pointer;
    border-bottom:  1px solid #f0f0f0;
    transition:     background-color 100ms ease-out;
}
.ts-wrapper:not(.has-items) .clear-row {
    display: none;
}
/* Hide during active search - "Clear selection" reads ambiguously as "Clear search" once typing starts. */
.ts-wrapper:has(.ts-control > input:not(:placeholder-shown)) .clear-row {
    display: none;
}
.ts-wrapper .clear-row:hover {
    background-color: #f5f5f5;     /* matches .ts-dropdown .active */
    color:            var(--ts-text-strong);
}
.ts-wrapper .clear-row .clear-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           16px;
    height:          16px;
    font-size:       16px;
    color:           var(--ts-text-dim);
    line-height:     1;
}
.ts-wrapper .clear-row:hover .clear-icon {
    color: var(--ts-text-strong);
}

/*endregion*/
/*region Custom - Single Select Ghost */

/* On focus, the selected pill dims and the caret parks at its leading edge. Typing is
   ephemeral; blur without committing restores the pill. Single-select only. */
.ts-wrapper.single.focus .ts-control .item {
    opacity:     0.45;
    order:       1;
    margin-left: -2px !important;   /* counteract input's 2px so pill's x-position doesn't shift on focus */
}
/* Keep the input caret-sized whether focused or not. TS needs it in the DOM to receive
   keyboard events, but a ~70px default width would stretch the wrapper for no visible gain. */
.ts-wrapper.single .ts-control > input {
    width:     2px !important;    /* just enough for a visible caret */
    min-width: 2px !important;
    padding:   0 !important;
    margin:    0 !important;
    flex:      0 0 auto;
}
.ts-wrapper.single.focus .ts-control > input {
    order:       0;
    caret-color: var(--ts-focus);
}
.ts-wrapper.single.focus .ts-control > input::placeholder {
    color: transparent;   /* dimmed pill is the hint during focus; don't double up */
}
.ts-wrapper.single:has(.ts-control > input:not(:placeholder-shown)) .ts-control > input {
    width:     auto !important;    /* unlock our 2px cap once the user types so input can grow */
    min-width: 4px !important;
}

/*endregion*/