/* Tom Select custom styling to match Input v2 design */

/* ===== Autocomplete Wrapper with Icon & Floating Label ===== */
/* Structure identique à Input v2 */

/* Wrapper principal - permet d'ajouter icône et label */
.autocomplete-input-wrapper {
    width: 100%;
}

/* Container grid - même structure que Input v2 */
.autocomplete-input-container {
    display: grid;
    height: 56px; /* h-14 */
    width: 100%;
    border-radius: 0.75rem; /* rounded-xl */
    background-color: #1B1C24; /* bg-gray-900 */
    align-items: center;
    padding: 0.75rem 1rem; /* px-4 py-3 */
    box-shadow: 0 0 0 1px rgba(238, 241, 249, 0.2); /* ring-1 ring-whiteStroke */
    transition: box-shadow 0.15s ease-in-out;
}

/* Grid layout - avec icône à gauche */
.autocomplete-input-container.has-left-icon {
    grid-template-columns: auto 12px 1fr; /* auto_12px_1fr */
}

/* Sans icône */
.autocomplete-input-container.no-icon {
    grid-template-columns: 1fr;
}

/* Icon container */
.autocomplete-icon {
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Spacer entre icône et input */
.autocomplete-spacer {
    /* vide, juste pour l'espacement grid */
}

/* Float field container - contient Tom Select et le label */
.autocomplete-float-field {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Floating label - même style que Input v2 */
.autocomplete-float-field label {
    position: absolute;
    left: 0;
    color: #EEF1F9; /* text-white-50 */
    font-size: 0.875rem; /* text-sm */
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    pointer-events: none;
    transition: all 0.2s ease;
    top: 50%;
    transform: translateY(-50%);
}

/* Label floated - monte en haut */
.autocomplete-float-field label.label-floated {
    top: -8px;
    transform: translateY(0);
    font-size: 0.5rem; /* text-[8px] */
    text-transform: uppercase;
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #9195A4; /* text-gray-300 */
}

/* Required asterisk */
.autocomplete-float-field label .required {
    color: #FF5E5E; /* text-error-400 */
}

/* Focus state - purple ring */
.autocomplete-input-container:focus-within {
    box-shadow: 0 0 0 2px #5630F9; /* ring-2 ring-purple-500 */
}

/* Disabled state */
.autocomplete-input-container.disabled {
    background-color: #2C2E3A; /* bg-gray-800 */
    box-shadow: 0 0 0 1px rgba(238, 241, 249, 0.2); /* ring-1 ring-whiteAlpha-200 */
}

.autocomplete-input-container.disabled label {
    color: #515465; /* text-gray-600 */
}

/* Error state */
.autocomplete-input-container.has-error {
    box-shadow: 0 0 0 2px #FF5E5E; /* ring-2 ring-error-400 */
}

/* ===== Tom Select Integration ===== */

/* Main container - s'intègre dans notre wrapper */
.autocomplete-float-field .ts-wrapper {
    width: 100%;
    position: static; /* Pas de positioning pour ne pas interférer avec le label */
}

/* Control - TRANSPARENT car le styling est fait par autocomplete-input-container */
.autocomplete-float-field .ts-wrapper .ts-control,
.autocomplete-float-field .ts-wrapper.full .ts-control,
.autocomplete-float-field .ts-wrapper.single .ts-control {
    height: 100% !important;
    width: 100%;
    border-radius: 0 !important; /* Pas de border-radius, c'est le container qui l'a */
    background-color: transparent !important; /* Transparent */
    background-image: none !important;
    padding: 7px 0 0 0 !important; /* Padding top pour laisser place au label, pas de padding horizontal */
    display: flex;
    align-items: flex-start; /* Align top pour le label */
    border: none !important;
    box-shadow: none !important; /* Pas de box-shadow, c'est le container qui l'a */
    outline: none !important;
    min-height: auto !important;
}

/* Focus state - pas de style car géré par le container */
.autocomplete-float-field .ts-wrapper.focus .ts-control,
.autocomplete-float-field .ts-wrapper.dropdown-active .ts-control {
    box-shadow: none !important;
    outline: none !important;
}

/* Disabled state - transparent aussi */
.autocomplete-float-field .ts-wrapper.disabled .ts-control {
    background-color: transparent !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

/* Input text styling - matches Input v2 input */
.autocomplete-float-field .ts-wrapper .ts-control input {
    background: transparent !important;
    color: #EEF1F9 !important; /* white-50 */
    caret-color: #8F85FF !important; /* caret-purple-300 */
    font-family: 'Poppins', sans-serif !important;
    font-size: 1rem !important; /* text-base */
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: -0.025em !important;
    outline: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1;
}

.autocomplete-float-field .ts-wrapper .ts-control input::placeholder {
    color: transparent !important; /* Placeholder masqué car on utilise le label flottant */
}

/* Selected items */
.autocomplete-float-field .ts-wrapper .ts-control .item {
    background: transparent !important;
    color: #EEF1F9 !important; /* white-50 */
    border: none !important;
    padding-top: 4px; !important;
    margin: 0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

/* Clear button - hide it */
.ts-wrapper .ts-control .clear-button {
    display: none !important;
}

/* Dropdown menu */
.ts-wrapper .ts-dropdown {
    border: none;
    border-radius: 0.75rem; /* rounded-xl */
    background-color: #1B1C24; /* bg-gray-900 */
    box-shadow: 0 0 0 1px rgba(238, 241, 249, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    margin-top: 0.5rem;
    padding: 0.5rem 0;
}

/* Dropdown dans notre structure autocomplete - largeur complète du container */
.autocomplete-input-container {
    position: relative;
}

.autocomplete-float-field {
    position: relative;
}

.autocomplete-float-field .ts-dropdown {
    /* Positionnement absolu pour couvrir toute la largeur du container parent */
    position: absolute !important;
    /* Compenser l'offset: icône (24px/1.5rem) + spacer (12px) = 36px */
    left: calc(-1.5rem - 12px) !important;
    right: 0 !important;
    width: auto !important;
    top: 100% !important;
    margin-top: 0.5rem !important;
}

/* Sans icône, pas d'offset */
.autocomplete-input-container.no-icon .autocomplete-float-field .ts-dropdown {
    left: 0 !important;
}

/* Dropdown options */
.ts-wrapper .ts-dropdown .option {
    padding: 0.75rem 1rem;
    color: rgba(238, 241, 249, 0.8);
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.ts-wrapper .ts-dropdown .option:hover,
.ts-wrapper .ts-dropdown .option.active {
    background-color: rgba(168, 85, 247, 0.1); /* Couleur de survol conservée */
    color: white;
}

.ts-wrapper .ts-dropdown .option.selected {
    background-color: rgba(168, 85, 247, 0.2);
    color: #8F85FF; /* purple-300 */
}

/* No results message */
.ts-wrapper .ts-dropdown .no-results {
    padding: 0.75rem 1rem;
    color: rgba(238, 241, 249, 0.5);
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    text-align: center;
}

/* Loading state */
.ts-wrapper .ts-dropdown .spinner {
    border-color: rgba(168, 85, 247, 0.3);
    border-top-color: #A855F7;
}

/* Disabled state - matches Input v2 disabled */
.ts-wrapper.disabled .ts-control {
    background-color: #2C2E3A; /* bg-gray-800 */
    box-shadow: 0 0 0 1px rgba(238, 241, 249, 0.2);
    cursor: not-allowed;
}

.ts-wrapper.disabled .ts-control input {
    color: rgba(238, 241, 249, 0.5);
    cursor: not-allowed;
}

/* Error state - matches Input v2 error (ring-2 ring-error-400) */
.ts-wrapper.has-error .ts-control {
    box-shadow: 0 0 0 2px #FF5E5E; /* ring-2 ring-error-400 */
}

/* Remove default dropdown arrow */
.ts-wrapper .ts-control .ts-dropdown-indicator {
    display: none;
}

/* Hide the clear button by default (can be enabled if needed) */
.ts-wrapper .ts-control .clear-button {
    display: none;
}