/* ============================================================
 * TOMSELECT - SELECT2/BOOTSTRAP 5 LOOK-ALIKE
 * ============================================================
 * Sections:
 *   1. LIGHT MODE       - Matches Select2 v4 Bootstrap 5 theme
 *   2. DARK MODE        - Dark variant for .app-skin-dark
 *   3. BREAK LINE MODE  - Multi-select pills wrap instead of scroll
 *   4. PURE TEXT MODE   - Borderless select that looks like plain text
 *   5. INPUT LIKE       - Native inputs styled to match TomSelect
 *   6. DROPDOWN SEARCH  - Select2-style search input inside dropdown
 * ============================================================ */


/* ============================================================
 * 1. LIGHT MODE
 * ============================================================ */

/* Base control - matches .select2-selection */
.ts-wrapper .ts-control,
.ts-wrapper.focus .ts-control,
.ts-wrapper.active .ts-control {
    width: 100% !important;
    min-height: calc(1.5em + .75rem + 2px) !important;
    padding: .575rem 2.25rem .575rem .75rem !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: .25rem !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;

    /* Custom caret matching Select2 BS5 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 16px 12px !important;
    cursor: pointer !important;
}

.items-placeholder {
    cursor: pointer !important;
}

.ts-wrapper.disabled .items-placeholder {
    cursor: not-allowed !important;
}

/* Focus / active state - subtle, no blue halo */
.ts-wrapper.focus .ts-control,
.ts-wrapper.active .ts-control {
    border-color: #ced4da !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* Search input inside the control */
.ts-wrapper .ts-control input {
    background-color: transparent !important;
    color: #212529 !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: 0 !important;
    min-width: 80px !important;
    flex-grow: 1 !important;
}

.ts-wrapper .ts-control input::placeholder {
    color: #6c757d !important;
}

/* Pills (selected items) - kept original style: gray solid with simple x */
.ts-wrapper .ts-control .item {
    white-space: nowrap !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    background: #ecf0f4 !important;
    color: #283C50 !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    border: none !important;
}

/* Remove "x" inside pills - simple text style */
.ts-wrapper .ts-control .item .remove {
    color: #283C50 !important;
    border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
    background: transparent !important;
    text-indent: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 1px 10px !important;
    margin-left: 8px !important;
}

/* Dropdown panel - outer wrapper, hidden overflow keeps rounded corners */
.ts-dropdown {
    overflow: hidden !important;
    color: #212529 !important;
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: .25rem !important;
    z-index: 1100 !important;
    padding-top: 0 !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.06) !important;
}

/* Dropdown content - scrollable list of options */
.ts-dropdown .ts-dropdown-content {
    max-height: 15rem !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background-color: #fff !important;
    color: #212529 !important;
}

/* Options - matches .select2-results__option */
.ts-dropdown .option,
.ts-dropdown .option[data-selectable] {
    padding: .7rem .75rem !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    background: #fff !important;
    color: #212529 !important;
}

/* Hover/active option - light blue like Select2 BS5 */
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    color: #3454d1 !important;
    background-color: #f2f6fd !important;
}

/* Selected option (already chosen in multiple) */
.ts-dropdown .option.selected {
    color: #3454d1 !important;
    background-color: #f2f6fd !important;
}

/* Disabled state */
.ts-wrapper.disabled .ts-control {
    color: #6c757d !important;
    cursor: not-allowed !important;
    background-color: #e9ecef !important;
    border-color: #ced4da !important;
    box-shadow: none !important;
}


/* ============================================================
 * 2. DARK MODE
 * ============================================================ */

.app-skin-dark .ts-wrapper .ts-control,
.app-skin-dark .ts-wrapper.focus .ts-control,
.app-skin-dark .ts-wrapper.active .ts-control {
    color: #FFFFFF !important;
    background-color: #1C2438 !important;
    border-color: transparent !important;
    box-shadow: none !important;

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

.app-skin-dark .ts-wrapper.focus .ts-control,
.app-skin-dark .ts-wrapper.active .ts-control {
    border-color: transparent !important;
    box-shadow: none !important;
}

.app-skin-dark .ts-wrapper .ts-control input {
    color: #FFFFFF !important;
}

.app-skin-dark .ts-wrapper .ts-control input::placeholder {
    color: #9CA3AF !important;
}

/* Pills - dark variant, original style */
.app-skin-dark .ts-wrapper .ts-control .item {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
}

.app-skin-dark .ts-wrapper .ts-control .item .remove {
    color: #FFFFFF !important;
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: transparent !important;
    text-indent: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 4px !important;
    margin-left: 4px !important;
}

/* Dropdown - dark variant outer wrapper */
.app-skin-dark .ts-dropdown {
    color: #FFFFFF !important;
    background-color: #1C2438 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
}

/* Dropdown content - scrollable list, dark */
.app-skin-dark .ts-dropdown .ts-dropdown-content {
    background-color: #1C2438 !important;
    color: #FFFFFF !important;
}

.app-skin-dark .ts-dropdown .option,
.app-skin-dark .ts-dropdown .option[data-selectable] {
    color: #FFFFFF !important;
    background: #1C2438 !important;
}

.app-skin-dark .ts-dropdown .option:hover,
.app-skin-dark .ts-dropdown .option.active {
    color: #FFFFFF !important;
    background-color: rgba(52, 84, 209, 0.25) !important;
}

.app-skin-dark .ts-dropdown .option.selected {
    color: #FFFFFF !important;
    background-color: rgba(52, 84, 209, 0.35) !important;
}


/* ============================================================
 * 3. BREAK LINE MODE
 * ------------------------------------------------------------
 * Add the .break-l class to the original <select> element.
 * TomSelect copies it onto the wrapper, enabling pill wrapping
 * instead of horizontal scroll. Works in both light and dark mode.
 * ============================================================ */

.ts-wrapper.break-l .ts-control {
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
}

.ts-wrapper.break-l .ts-control .item {
    white-space: normal !important;
}


/* ============================================================
 * 4. PURE TEXT MODE
 * ------------------------------------------------------------
 * Add the .tomselect-pure-text class to render the select as
 * plain text (no border, no caret). Useful for inline editable
 * labels that open a dropdown on click.
 * ============================================================ */

/* Wrapper - shrink to content */
.ts-wrapper.tomselect-pure-text {
    width: auto !important;
    min-width: 100% !important;
}

/* Control - strip all visual chrome */
.ts-wrapper.tomselect-pure-text .ts-control {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    line-height: 1.2 !important;
    color: #626f7d !important;
    font-weight: bold !important;
    font-size: inherit !important;
    padding-right: 0 !important;
    background-image: none !important;
}

/* Remove the caret arrow entirely */
.ts-wrapper.tomselect-pure-text .ts-control::after,
.ts-wrapper.tomselect-pure-text .ts-control.dropdown-active::after {
    display: none !important;
    content: none !important;
}

/* Dropdown panel */
.ts-wrapper.tomselect-pure-text .ts-dropdown {
    width: auto !important;
    min-width: 100% !important;
    max-width: none !important;
    font-size: 13px !important;
    color: #626f7d !important;
    border: 1px solid #d1d5db;
    background: white;
}

/* Options */
.ts-wrapper.tomselect-pure-text .ts-dropdown .option {
    white-space: nowrap !important;
    padding: 0.35rem 0.75rem !important;
}

/* Selected item shown in the control */
.ts-wrapper.tomselect-pure-text .ts-control .item {
    background: transparent !important;
    padding: 0 !important;
    white-space: nowrap !important;
    border: none !important;
}

/* Hover / active in dropdown */
.ts-wrapper.tomselect-pure-text .ts-dropdown .option:hover,
.ts-wrapper.tomselect-pure-text .ts-dropdown .option.active {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
}

/* Disabled state - keep text readable */
.ts-wrapper.tomselect-pure-text.disabled .ts-control {
    opacity: 0.7;
    cursor: not-allowed;
}


/* ============================================================
 * 5. INPUT LIKE TOMSELECT
 * ------------------------------------------------------------
 * Add the .like-tomselect class to a native <input> to make it
 * visually identical to the TomSelect control. Useful when mixing
 * native inputs and selects in the same form row.
 * ============================================================ */

.like-tomselect {
    width: 100% !important;
    min-height: calc(1.5em + .75rem + 2px) !important;
    padding: .575rem 2.25rem .575rem .75rem !important;
    font-family: inherit !important;
    font-size: .95rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: .25rem !important;
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.like-tomselect:focus {
    border-color: #ced4da !important;
    box-shadow: none !important;
}

.like-tomselect::placeholder {
    color: #6c757d !important;
}

/* Dark mode */
html.app-skin-dark .like-tomselect {
    background: #1C2438 !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.app-skin-dark .like-tomselect:focus {
    border-color: transparent !important;
}

html.app-skin-dark .like-tomselect::placeholder {
    color: #9CA3AF !important;
}

/* Invert spin buttons on number inputs in dark mode for visibility */
html.app-skin-dark .like-tomselect[type="number"]::-webkit-inner-spin-button,
html.app-skin-dark .like-tomselect[type="number"]::-webkit-outer-spin-button {
    filter: invert(1);
}


/* ============================================================
 * 6. DROPDOWN SEARCH INPUT (Select2 BS5 style)
 * ------------------------------------------------------------
 * Styles for the dropdown_input plugin, which moves the search
 * field inside the dropdown panel instead of the control.
 * ============================================================ */

/* Wrapper around the input - sits at the top of the dropdown */
.ts-dropdown .dropdown-input-wrap {
    padding: .375rem .75rem !important;
    background: #fff !important;
    border-bottom: 0 !important;
}

/* The actual search input - matches Select2 BS5 search field */
.ts-dropdown .dropdown-input {
    display: block !important;
    width: 100% !important;
    padding: .375rem .75rem !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid #ced4da !important;
    border-radius: .25rem !important;
    outline: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.ts-dropdown .dropdown-input:focus {
    border-color: #ced4da !important;
    box-shadow: none !important;
}

.ts-dropdown .dropdown-input::placeholder {
    color: #6c757d !important;
}

/* Dark mode */
.app-skin-dark .ts-dropdown .dropdown-input-wrap {
    background: #1C2438 !important;
}

.app-skin-dark .ts-dropdown .dropdown-input {
    background-color: #131A2B !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.app-skin-dark .ts-dropdown .dropdown-input:focus {
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important;
}

.app-skin-dark .ts-dropdown .dropdown-input::placeholder {
    color: #9CA3AF !important;
}

/* ============================================================
 * TOMSELECT ENABLE / DISABLE TRANSITION
 * ------------------------------------------------------------
 * Add-only animation layer for TomSelect disabled/enabled states.
 *
 * This does not change the base TomSelect styling.
 * It only animates visual properties when TomSelect toggles
 * the `.disabled` class on `.ts-wrapper`.
 * ============================================================ */

/* Base transition layer */
.ts-wrapper .ts-control {
    transform-origin: center !important;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        opacity 0.15s ease,
        filter 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease !important;
}

/* Animate selected pills together with the control */
.ts-wrapper .ts-control .item {
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        opacity 0.15s ease,
        transform 0.15s ease !important;
}

/* Disabled visual animation */
.ts-wrapper.disabled .ts-control {
    opacity: 0.72 !important;
    filter: saturate(0.75) brightness(0.98) !important;
    transform: scale(0.995) !important;
}

/* Disabled pills animation */
.ts-wrapper.disabled .ts-control .item {
    opacity: 0.65 !important;
    transform: scale(0.98) !important;
}

/* Restore clean enabled state */
.ts-wrapper:not(.disabled) .ts-control {
    opacity: 1 !important;
    filter: none !important;
    transform: scale(1) !important;
}

.ts-wrapper:not(.disabled) .ts-control .item {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Avoid motion for users who disable animations at OS level */
@media (prefers-reduced-motion: reduce) {
    .ts-wrapper .ts-control,
    .ts-wrapper .ts-control .item {
        transition: none !important;
    }
}