/*
 * Ricerca globale del topbar (Ctrl/⌘+K), vedi
 * resources/views/vendor/filament-panels/components/global-search/field.blade.php.
 *
 * - "Cerca in Joorna": stessa larghezza del campo "Cerca hotel o gruppo"
 *   accanto (hotel-picker.css), così i due si leggono come una coppia.
 * - La "x" nativa del browser sugli input type=search è nascosta: al suo
 *   posto c'è il bottone .jo-gs-clear, lo stesso cerchietto del chip hotel.
 * - Il pannello risultati segue la larghezza del campo.
 *
 * Solo desktop (sm+): sotto, Filament comprime il topbar e il campo resta
 * fluido.
 */
@media (min-width: 640px) {
    .fi-global-search-field {
        width: 300px;
    }

    .fi-global-search-results-ctn {
        max-width: 26rem;
    }
}

@media (min-width: 640px) and (max-width: 1100px) {
    .fi-global-search-field {
        width: 240px;
    }
}

.fi-global-search-field input[type="search"]::-webkit-search-cancel-button,
.fi-global-search-field input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.jo-gs-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    margin-inline-end: 0.5rem;
    border-radius: 9999px;
    background-color: rgb(228 228 231); /* zinc-200 */
    color: rgb(113 113 122);            /* zinc-500 */
    transition: background-color 0.15s, color 0.15s;
}

.jo-gs-clear:hover {
    background-color: rgb(212 212 216); /* zinc-300 */
    color: rgb(63 63 70);               /* zinc-700 */
}

.dark .jo-gs-clear {
    background-color: rgb(255 255 255 / 0.1);
    color: rgb(161 161 170);            /* zinc-400 */
}

.dark .jo-gs-clear:hover {
    background-color: rgb(255 255 255 / 0.2);
    color: rgb(228 228 231);            /* zinc-200 */
}

.jo-gs-clear svg {
    width: 0.7rem;
    height: 0.7rem;
}

/* Telefono: niente scorciatoia da tastiera (Ctrl/⌘+K non c'è), e il campo
 * resta una lente che si allarga solo mentre si scrive; così il nome
 * dell'hotel nel chip resta leggibile e l'avatar non esce dallo schermo. */
@media (max-width: 639px) {
    .jo-gs-kbd {
        display: none;
    }

    .fi-topbar .fi-global-search-field {
        width: 2.75rem;
        transition: width .15s;
    }

    .fi-topbar .fi-global-search-field:focus-within {
        width: min(14rem, calc(100vw - 8rem));
    }

    .fi-topbar .fi-global-search-field input::placeholder {
        color: transparent;
    }

    .fi-topbar > nav,
    .fi-topbar > nav > .ms-auto {
        column-gap: .625rem;
    }

    /* Avatar e campanella non si comprimono (l'avatar finiva a larghezza 0,
     * fuori dal bordo): a stringersi è il chip dell'hotel. */
    .fi-topbar > nav > .ms-auto,
    .fi-topbar > nav > .ms-auto > * {
        flex-shrink: 0;
    }
}