/* ================================================
   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);
}