/* ================================================
   DMU — Tom Select Styles (LIGHT MODE / DEFAULT)
   ================================================ */

/* Base wrapper */
.ts-wrapper {
    font-size: 1em;
}

/* MAIN SELECT BOX (default state) */
.ts-wrapper .ts-control {
    border: 1px solid #ced4da;
    /* neutral border by default */
    border-radius: 10px;
    /* match your inputs */
    padding: 7px 10px;
    /* clean internal spacing */
    min-height: 40px;
    background: #fff;
    cursor: pointer;
    box-shadow: none !important;
}

/* Focus / dropdown open (primary outline) */
.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(155, 75, 187, 0.18) !important;
    /* glow */
}

/* Dropdown */
.ts-dropdown {
    border: 1px solid #ced4da;
    /* match default border */
    border-radius: 10px;
    padding: 5px 0;
    background: #fff;
    box-shadow: none !important;
}

/* Dropdown content container */
.ts-dropdown .ts-dropdown-content {
    box-shadow: none !important;
}

/* Dropdown items */
.ts-dropdown .option {
    padding: 8px 12px;
    font-size: 1em;
    cursor: pointer;
}

/* Hovered / active item */
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background: #f2f2f2 !important;
    /* light gray hover */
    color: var(--primary) !important;
}

/* Selected item inside dropdown */
.ts-dropdown .option.selected {
    background: #f2f2f2 !important;
    color: var(--primary) !important;
}

/* Search input inside dropdown */
.ts-dropdown .dropdown-input {
    border: none !important;
    border-bottom: 1px solid #e6d7f4 !important;
    padding: 8px 12px;
    margin-bottom: 5px;
    font-size: 1em;
    box-shadow: none !important;
}

/* Remove ugly blue focus/outline inside dropdown */
.ts-dropdown .dropdown-input:focus,
.ts-dropdown *:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Placeholder color inside control input */
.ts-control input::placeholder {
    color: #aaa;
}

.ts-dropdown.dmu-dropdown { z-index: 99999 !important; }

/* ================================================
   DARK MODE OVERRIDES (data-color starts with "dark-")
   ================================================ */

html[data-color^="dark-"] .ts-wrapper .ts-control {
    border: 1px solid rgba(var(--separator-light-rgb, 46, 46, 46), 1);
    border-radius: 10px;
    padding: 7px 10px;
    min-height: 40px;
    background: var(--foreground, #1d1d1d);
    color: var(--light-text, #f0f0f0);
    box-shadow: none !important;
}

/* Text inside the control (typed value / selected labels) */
html[data-color^="dark-"] .ts-wrapper .ts-control input {
    color: var(--light-text, #f0f0f0);
}

/* Focus / dropdown open in dark mode */
html[data-color^="dark-"] .ts-wrapper.focus .ts-control,
html[data-color^="dark-"] .ts-wrapper.dropdown-active .ts-control {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 151, 103, 183), 0.3) !important;
}

/* Dropdown panel */
html[data-color^="dark-"] .ts-dropdown {
    border: 1px solid rgba(var(--separator-light-rgb, 46, 46, 46), 1);
    border-radius: 10px;
    padding: 5px 0;
    background: var(--foreground, #1d1d1d);
    box-shadow: none !important;
}

/* Dropdown items */
html[data-color^="dark-"] .ts-dropdown .option {
    padding: 8px 12px;
    font-size: 1em;
    cursor: pointer;
    color: var(--light-text, #f0f0f0);
}

/* Hovered / active item */
html[data-color^="dark-"] .ts-dropdown .option:hover,
html[data-color^="dark-"] .ts-dropdown .option.active {
    background: var(--background-light, #292929) !important;
    color: var(--primary, #9e62c7) !important;
}

/* Selected item inside dropdown */
html[data-color^="dark-"] .ts-dropdown .option.selected {
    background: var(--background-light, #292929) !important;
    color: var(--primary, #9e62c7) !important;
}

/* Search input inside dropdown (dark) */
html[data-color^="dark-"] .ts-dropdown .dropdown-input {
    border: none !important;
    border-bottom: 1px solid rgba(var(--primary-rgb, 151, 103, 183), 0.6) !important;
    padding: 8px 12px;
    margin-bottom: 5px;
    font-size: 1em;
    background: transparent;
    color: var(--light-text, #f0f0f0);
    box-shadow: none !important;
}

/* Placeholder inside the main control in dark mode */
html[data-color^="dark-"] .ts-control input::placeholder {
    color: var(--muted, #727272);
}

/* Placeholder inside dropdown search in dark mode */
html[data-color^="dark-"] .ts-dropdown .dropdown-input::placeholder {
    color: var(--muted, #727272);
}

/* Scrollbar thumb in dark mode dropdown (optional, to match tables) */
html[data-color^="dark-"] .ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb {
    background: rgba(var(--separator-light-rgb, 46, 46, 46), 0.8);
}


/* ================================================
   ICON PICKER (dmu-select-icon)
   ================================================ */

.dmu-icon-opt,
.dmu-icon-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dmu-icon-opt svg,
.dmu-icon-item svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}


/* ================================================
   COUNTRY PICKER (dmu-select-country)
   ================================================ */

.dmu-country-opt,
.dmu-country-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dmu-country-flag {
    width: 18px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.dmu-country-dial {
    font-size: 12px;
    white-space: nowrap;
}


/* ================================================
   TomSelect (Employee AJAX) – Multi chips
   ================================================ */

/* 1) Neutralize TomSelect's default multi item styling */
.ts-wrapper.dmu-select-employee-ajax.multi .ts-control>.item {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 .35rem .35rem 0 !important;
    /* spacing between chips */
    border-radius: 0 !important;
}

/* TomSelect sets white text when an item becomes .active.
   You removed the active background, so reset the color too. */
.ts-wrapper.dmu-select-employee-ajax.multi .ts-control>.item,
.ts-wrapper.dmu-select-employee-ajax.multi .ts-control>.item.active,
.ts-wrapper.dmu-select-employee-ajax.multi .ts-control>.item:hover {
    color: inherit !important;
}

/* 2) Chip layout (your custom item markup) */
.ts-wrapper.dmu-select-employee-ajax.multi .dmu-employee-item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .2rem .45rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    color: inherit;
}

.ts-wrapper.dmu-select-employee-ajax.multi .dmu-employee-name {
    white-space: nowrap;
    color: inherit;
}

/* ================================================
   TomSelect – remove (X) for multi chips
   Scoped to employee select
   ================================================ */

/* Remove the ugly separator line */
.ts-wrapper.dmu-select-employee-ajax.multi .ts-control .item .remove {
    border-left: none !important;
    margin-left: 6px;
    padding-left: 6px;
}

/* Hide remove button by default (and disable clicks while hidden) */
.ts-wrapper.dmu-select-employee-ajax.multi .ts-control .item .remove {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
    color: #64748b;
    font-weight: 600;
}

/* Show X only on hover */
.ts-wrapper.dmu-select-employee-ajax.multi .ts-control .item:hover .remove {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ts-wrapper.dmu-select-employee-ajax.multi .ts-control .item .remove:hover {
    color: #ef4444;
}

/* ================================================
   TomSelect – rounded remove (X)
   ================================================ */

.ts-wrapper.dmu-select-employee-ajax.multi .ts-control .item .remove {
    margin-left: -2px;
    /* bring closer to name */
    padding: 0;
    /* reset default */
    width: 16px;
    height: 16px;
    border-radius: 999px;
    /* round background */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    background: transparent;
    transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

/* Show subtle bg on hover of chip */
.ts-wrapper.dmu-select-employee-ajax.multi .ts-control .item:hover .remove {
    background: rgba(148, 163, 184, 0.18);
}

/* Stronger feedback on X hover */
.ts-wrapper.dmu-select-employee-ajax.multi .ts-control .item .remove:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}