/*
 * Tom Select — aligné sur les tokens Paravenda :
 * CSS par défaut conservé + overrides ciblés (hors @layer, !important).
 * Tom Select copie les classes Tailwind du <select> sur .ts-wrapper → double bordure sans reset.
 */

.autocomplete-field-wrapper .ts-wrapper {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/*
 * Le champ de destinataires est construit depuis un input Symfony déjà stylé.
 * Tom Select recopie ces classes sur son wrapper : on neutralise cette couche
 * pour que seul .ts-control porte la bordure et l'espacement du champ.
 */
input[data-controller~="email-recipients"] + .ts-wrapper {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

input[data-controller~="email-recipients"] + .ts-wrapper .ts-control {
    box-shadow: none !important;
}

.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
div.ts-wrapper.single .ts-control,
.ts-wrapper.single.plugin-clear_button .ts-control,
.ts-wrapper.single.plugin-virtual_scroll .ts-control {
    display: flex !important;
    align-items: center !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    color: var(--ink) !important;
    background-color: var(--surface) !important;
    background-image: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 1px 2px 0 rgb(52 35 44 / 0.05) !important;
}

/* Sélecteur accompagné d'une action : hauteur stable, même avec une valeur longue. */
.lm-inline-autocomplete-action .ts-wrapper.single .ts-control {
    flex-wrap: nowrap !important;
    min-height: 2.75rem !important;
    height: 2.75rem !important;
    overflow: hidden !important;
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
    border-color: var(--accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

.ts-wrapper[class*="focus:border-accent"].focus .ts-control,
.ts-wrapper[class*="focus:border-accent"].dropdown-active .ts-control {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

.ts-wrapper .ts-control > .item {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.ts-wrapper .ts-control > input {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    color: var(--ink) !important;
}

.ts-wrapper.multi .ts-control {
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
}

.ts-wrapper.multi .ts-control > .item {
    flex: 0 1 auto !important;
    max-width: 100% !important;
    padding: 0.25rem 0.625rem !important;
    overflow: hidden !important;
    color: var(--on-dark) !important;
    background: var(--dark) !important;
    border: 0 !important;
    border-radius: 9999px !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
    text-overflow: ellipsis !important;
}

.ts-wrapper.multi .ts-control > .item .remove {
    margin-left: 0.4rem !important;
    padding-left: 0.4rem !important;
    color: var(--on-dark-muted) !important;
    background: transparent !important;
    border-left-color: rgb(241 231 223 / 0.25) !important;
}

.ts-wrapper.multi .ts-control > .item.active {
    color: var(--on-dark) !important;
    background: var(--dark) !important;
    border: 0 !important;
}

.ts-wrapper.multi .ts-control > .item .remove:hover {
    color: var(--on-dark) !important;
    background: transparent !important;
}

.lm-email-recipient {
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
    align-items: baseline;
    gap: 0.25rem;
}

.lm-email-recipient-name {
    overflow: hidden;
    font-weight: 650;
    color: var(--on-dark);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-email-recipient-address {
    overflow: hidden;
    color: var(--on-dark);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-wrapper.single .ts-control::after {
    border-color: var(--muted) transparent transparent !important;
}

.ts-dropdown {
    z-index: 50 !important;
    margin-top: 0.25rem !important;
    border: 1px solid var(--line) !important;
    border-radius: 0.5rem !important;
    background: var(--surface) !important;
    box-shadow:
        0 10px 15px -3px rgb(52 35 44 / 0.1),
        0 4px 6px -4px rgb(52 35 44 / 0.1) !important;
}

.ts-dropdown .option,
.ts-dropdown .no-results,
.ts-dropdown .create,
.ts-dropdown .loading-more-results,
.ts-dropdown .no-more-results {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    color: var(--ink) !important;
}

.ts-dropdown .active,
.ts-dropdown .option:hover {
    background-color: var(--soft) !important;
    color: var(--ink) !important;
}

.ts-dropdown .lm-email-recipient-name {
    color: var(--ink);
}

.ts-dropdown .lm-email-recipient-address {
    color: var(--muted);
}

.ts-dropdown .option .highlight {
    background-color: var(--success-bg) !important;
    color: var(--success-text) !important;
}