.form-control.manticore-autocomplete {
    padding-right:1.4rem;
}
.clear-search {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1.2em;
    color: #888;
    z-index: 2;
    user-select: none;
}
.autocomplete-results {
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    max-height: 15em;
    overflow-y: auto;
    z-index: 1000;
    width: 100%;
    grid-template-columns: auto 1fr;
    margin-top: 0.5rem;
    display: none;
}
.autocomplete-results.visible {
    display: grid;
    border: 1px solid #ddd;
    border-top: none;
}
.autocomplete-results.has-both {
    gap: 1em;
    width: 37em;
    left: -25.8em;
}
.autocomplete-columns {
    display: flex;
    gap: 1rem;
}
.autocomplete-pages {
    min-width: 0;
    max-width: 24em;
    text-align: right;
}
.autocomplete-suggestions {
    min-width: 0;
    text-align: left;
}
.autocomplete-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    width: 100%;
    display: inline-block;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background-color: var(--muistio);;
}

.autocomplete-item button {
    font-size:85%;
    border-width:0.1em;
    padding:0.2em 0.5em;
}
.autocomplete-item button:hover, .autocomplete-item button:active {
    color:#fff;
    background-color: var(--taivaansini);
}
/* Smooth transitions */
.autocomplete-item {
    transition: all 0.15s ease;
}

/* Loading state */
.autocomplete-results.loading::after {
    content: "🔄 Ladataan...";
    display: block;
    padding: 20px;
    text-align: center;
    color: --var(pakkasyo);
}

/* Empty state */
.autocomplete-results.empty::after {
    content: "Ei hakuehdotuksia";
    display: block;
    padding: 20px;
    text-align: center;
    font-style: italic;
    color: --var(pakkasyo);
}
@media (max-width: 900px) {
    .autocomplete-results, 
    .autocomplete-results.has-both,
    .autocomplete-results.has-pages,
    .autocomplete-results.has-suggestions {
        width: 100%;
        left: 0;
        max-height: 70vh;
        grid-template-columns: 1fr;
    }
    .autocomplete-results.has-both {
        gap: 0;
    }
    .autocomplete-suggestions {
        /* order: 1; */
        border-bottom: 2px solid #dee2e6;
    }
    .autocomplete-pages {
        /* order: 2; */
        border-right: none;
        max-width: inherit;
    }
    .autocomplete-suggestions, .autocomplete-pages {
        text-align: center;
    }
    
    /* Mobile section headers */
    /* .autocomplete-suggestions::before {
        content: "🔍";
        background: #007bff;
        color: white;
    }
    
    .autocomplete-pages::before {
        content: "📄";
        background: #6c757d;
        color: white;
    } */
}