.combo {
    position: relative;
    width: 260px;
    font-family: var(--font, sans-serif);
}

.combo-input {
    width: 100%;
    padding: 8px 30px 8px 8px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 4px;
    background: var(--bg, #fff);
    color: var(--text, #000);
}

.combo-arrow {
    position: absolute;
    right: 8px;
    top: 8px;
    pointer-events: none;
    color: #888;
}

.combo-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg, #fff);
    border: 1px solid var(--border-color, #ccc);
    border-top: none;
    max-height: 180px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
}

.combo-list li {
    padding: 8px;
    cursor: pointer;
}

.combo-list li:hover {
    background: var(--hover, #eee);
}

/* Thème sombre */
@media (prefers-color-scheme: dark) {
    .combo-input {
        background: #222;
        color: #eee;
        border-color: #555;
    }
    .combo-list {
        background: #222;
        color: #eee;
        border-color: #555;
    }
    .combo-list li:hover {
        background: #333;
    }
}

/* Style Nextcloud */
:root {
    --nc-blue: #0082c9;
}

.combo-input:focus {
    border-color: var(--nc-blue);
    box-shadow: 0 0 3px var(--nc-blue);
}