/* ===== Autocomplete Wrapper with Icon & Floating Label ===== */

.autocomplete-input-wrapper {
    width: 100%;
}

.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;
}

.autocomplete-input-container.has-left-icon {
    grid-template-columns: auto 12px 1fr; /* auto_12px_1fr */
}

.autocomplete-input-container.no-icon {
    grid-template-columns: 1fr;
}

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

.autocomplete-spacer {
    /* vide, juste pour l'espacement grid */
}

.autocomplete-float-field {
    position: relative;
    width: 100%;
    height: 100%;
}

.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%);
}

.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 */
}

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

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

.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 */
}

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

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

.autocomplete-float-field .ts-wrapper {
    width: 100%;
    position: static; /* Pas de positioning pour ne pas interférer avec le label */
}

/* Le cadre, le fond et l'anneau appartiennent à `.autocomplete-input-container` : le contrôle Tom
   Select se rend transparent pour ne pas les doubler. */
.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;
    background-color: transparent !important;
    background-image: none !important;
    padding: 7px 0 0 0 !important; /* Le padding top laisse la place au label flottant. */
    display: flex;
    align-items: flex-start;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    min-height: auto !important;
}

.autocomplete-float-field .ts-wrapper.focus .ts-control,
.autocomplete-float-field .ts-wrapper.dropdown-active .ts-control {
    box-shadow: none !important;
    outline: none !important;
}

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

.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 */
}

.autocomplete-float-field .ts-wrapper .ts-control .item {
    background: transparent !important;
    color: #EEF1F9 !important; /* white-50 */
    border: none !important;
    /* Ligne à 1.375 et non 1 : l'item est tronqué par `overflow: hidden`, une ligne au ras du corps
       coupait la descente du « g » de « Liège ». Le padding compense pour garder la ligne de base. */
    padding-top: 1px !important;
    margin: 0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.375 !important;
}

.ts-wrapper .ts-control .clear-button {
    display: none !important;
}

.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;
}

.autocomplete-input-container {
    position: relative;
}

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

/* Le menu couvre toute la largeur du conteneur parent : le décalage à gauche compense l'icône
   (1.5rem) et son spacer (12px). */
.autocomplete-float-field .ts-dropdown {
    position: absolute !important;
    left: calc(-1.5rem - 12px) !important;
    right: 0 !important;
    width: auto !important;
    top: 100% !important;
    margin-top: 0.5rem !important;
}

.autocomplete-input-container.no-icon .autocomplete-float-field .ts-dropdown {
    left: 0 !important;
}

.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);
    color: white;
}

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

.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;
}

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

.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;
}

.ts-wrapper.has-error .ts-control {
    box-shadow: 0 0 0 2px #FF5E5E; /* ring-2 ring-error-400 */
}

.ts-wrapper .ts-control .ts-dropdown-indicator {
    display: none;
}

.ts-wrapper .ts-control .clear-button {
    display: none;
}

/* La ville sélectionnée tient sur une seule ligne : les libellés longs (« Paris 1er
   Arrondissement - 75001 (FR) ») passaient sur deux lignes dans les conteneurs étroits
   (popin de localisation) et se superposaient au label flottant. */
.autocomplete-float-field .ts-wrapper .ts-control {
    flex-wrap: nowrap;
    overflow: hidden;
}

.autocomplete-float-field .ts-wrapper .ts-control .item {
    /* Marge de respiration avant la flèche du dropdown : sans elle, l'ellipse vient
       s'écraser contre le chevron. */
    max-width: calc(100% - 2.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hauteur bornée à ~3 résultats ET à la place réelle dans la fenêtre (`--ts-dropdown-room`,
   mesurée par `autocomplete-dropdown-overflow`) : clavier ouvert, un menu retourné vers le haut
   sortait de l'écran en emportant ses premiers résultats. Plancher d'une ligne. */
dialog .ts-dropdown .ts-dropdown-content {
    max-height: clamp(3.5rem, var(--ts-dropdown-room, 10.5rem), 10.5rem);
}

/* Le conteneur du champ est une grille : sans min-width:0, sa colonne s'élargit à la largeur
   min-content d'un libellé long + l'input de saisie Tom Select (112px) et fait déborder la
   pilule hors de son cadre (popin de localisation, ville « Paris 1er Arrondissement… »). */
.autocomplete-input-container .autocomplete-float-field {
    min-width: 0;
}

/* Une seule troncature, celle du repos : au focus, l'item cède toute la place à l'input de
   saisie au lieu de coexister avec sa réserve de 112px — qui raccourcissait le libellé
   différemment selon l'état. La valeur vit dans le <select> : elle réapparaît au blur tant
   qu'aucune autre ville n'est choisie. */
.autocomplete-float-field .ts-wrapper.single.full.input-active .ts-control .item {
    display: none;
}

/* Bottom sheet mobile (sous `tab`) : le champ vit en bas de l'écran — le dropdown s'ouvre vers
   le HAUT, au-dessus de l'input, plutôt que vers un bas qui n'existe pas (bord de la sheet,
   clavier virtuel). */
@media (max-width: 767px) {
    dialog .autocomplete-float-field .ts-dropdown {
        top: auto !important;
        bottom: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0.75rem;
    }
}