.tomselected,
.ts-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    padding-block: 0 !important;
    padding-inline: 0 !important;
    border: none !important;
}

/* Styles Tom Select avec spécificité élevée */
html body .ts-wrapper .ts-control {
    width: 100% !important;
    background-color: white !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    min-height: 38px !important;
}

html.dark body .ts-wrapper .ts-control {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
    border-color: #4b5563 !important;
}

html body .ts-dropdown {
    background-color: white !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    z-index: 10 !important;
}

html.dark body .ts-dropdown {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
    border-color: #4b5563 !important;
}

html body .ts-dropdown .option {
    padding: 0.5rem 0.75rem !important;
}

html body .ts-dropdown .option:hover {
    background-color: #f3f4f6 !important;
}

html.dark body .ts-dropdown .option:hover {
    background-color: #374151 !important;
}

html body .ts-dropdown .active {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
}

html.dark body .ts-dropdown .active {
    background-color: #374151 !important;
    color: #ffffff !important;
}

html body .ts-wrapper.focus .ts-control {
    border-color: #006d55 !important;
    box-shadow: 0 0 0 1px #006d55 !important;
    outline: none !important;
}

html body .ts-wrapper .item {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
    border-radius: 0.25rem !important;
    padding: 0.25rem 0.5rem !important;
    margin: 0.25rem !important;
}

html.dark body .ts-wrapper .item {
    background-color: #374151 !important;
    color: #e5e7eb !important;
}

/* Corriger l'alignement du texte saisi */
html body .ts-wrapper .ts-control input {
    color: #374151 !important;
}

html.dark body .ts-wrapper .ts-control input {
    color: #e5e7eb !important;
}

/* Styliser le placeholder */
html body .ts-wrapper.input-active .ts-control input::placeholder {
    color: #9ca3af !important;
}

html.dark body .ts-wrapper.input-active .ts-control input::placeholder {
    color: #6b7280 !important;
}

html body .ts-wrapper.single .ts-control {
    background-image: none !important;
    box-shadow: none !important;
}

html.dark body .ts-wrapper.single .ts-control {
    background-image: none !important;
    box-shadow: none !important;
}

/* Style des éléments sélectionnés dans les sélecteurs multi */
html body .ts-wrapper.multi .ts-control > div,
html body .ts-wrapper.multi .ts-control [data-value] {
    background: #006d55 !important;
    background-color: #006d55 !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid #005243 !important;
    text-shadow: none !important;
    border-radius: 0.25rem !important;
    box-shadow: none !important;
    padding: 0.25rem 0.5rem !important;
    margin: 0.25rem !important;
}

/* Version pour le mode sombre */
html body.dark .ts-wrapper.multi .ts-control > div,
html body.dark .ts-wrapper.multi .ts-control [data-value] {
    background: #008d6f !important;
    background-color: #008d6f !important;
    background-image: none !important;
    border: 1px solid #006d55 !important;
}

/* Style au survol des éléments sélectionnés */
html body .ts-wrapper.multi .ts-control > div:hover,
html body .ts-wrapper.multi .ts-control [data-value]:hover {
    background: #00a885 !important;
    background-color: #00a885 !important;
    border-color: #006d55 !important;
}

html body.dark .ts-wrapper.multi .ts-control > div:hover,
html body.dark .ts-wrapper.multi .ts-control [data-value]:hover {
    background: #00a885 !important;
    background-color: #00a885 !important;
    border-color: #008d6f !important;
}

/* Style pour les boutons de suppression d'éléments */
html body .ts-wrapper.multi .ts-control > div .remove,
html body .ts-wrapper.multi .ts-control [data-value] .remove {
    border-left: 1px solid #005243 !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

html body.dark .ts-wrapper.multi .ts-control > div .remove,
html body.dark .ts-wrapper.multi .ts-control [data-value] .remove {
    border-left: 1px solid #006d55 !important;
}

/* Capitaliser les noms de villes dans les menus déroulants et les éléments sélectionnés */
html body .ts-wrapper .ts-dropdown .option,
html body .ts-wrapper .ts-control [data-value],
html body .ts-wrapper .ts-control > div,
html body .ts-wrapper .ts-control > input {
    text-transform: capitalize !important;
}

/* Assurer que l'entrée utilisateur est également capitalisée */
html body .ts-wrapper.input-active .ts-control input {
    text-transform: capitalize !important;
}