/*
 * css/TODO_combo.css — Stili della combo con ricerca live (js/TODO_combo.js)
 * ---------------------------------------------------------------------------
 * .tcombo            contenitore relativo (input + X + dropdown)
 * .tcombo__dropdown  elenco risultati, header gruppo colorati (.tcombo__gruppo,
 *                    colore da --tcombo-gruppo), voce attiva (.is-attivo),
 *                    voce corrente (.is-corrente), <mark> per le parole trovate.
 * .tcombo--piccola   variante compatta usata nei popover.
 * .is-caricamento    spinner sottile durante la richiesta AJAX.
 */
.tcombo {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.tcombo__icona {
    position: absolute;
    left: 10px;
    width: 16px;
    height: 16px;
    pointer-events: none;
    color: var(--todo-testo-tenue, #9fa1ae);
}
.tcombo__icona svg { width: 16px; height: 16px; fill: currentColor; }

.tcombo__input {
    width: 100%;
    height: 34px;
    padding: 0 30px 0 34px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--todo-testo, #2c2f3c);
    outline: none;
    text-overflow: ellipsis;
    transition: border-color .15s, background-color .15s;
}
.tcombo__input:hover { background: var(--todo-hover, #eaedf5); }
.tcombo__input:focus {
    background: #fff;
    border-color: var(--todo-primario, #2f77e3);
    box-shadow: 0 0 0 3px rgba(47, 119, 227, .15);
}

.tcombo--piccola .tcombo__input {
    height: 32px;
    padding: 0 28px 0 10px;
    font-size: 14px;
    font-weight: 400;
    border-color: var(--todo-bordo, #dfe1e6);
    background: #fff;
}

.tcombo__clear {
    position: absolute;
    right: 6px;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--todo-testo-tenue, #9fa1ae);
    font-size: 17px;
    line-height: 18px;
    cursor: pointer;
    padding: 0;
}
.tcombo__clear:hover { background: var(--todo-hover, #eaedf5); color: var(--todo-testo, #2c2f3c); }

.tcombo.is-caricamento::after {
    content: "";
    position: absolute;
    right: 30px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--todo-bordo, #dfe1e6);
    border-top-color: var(--todo-primario, #2f77e3);
    border-radius: 50%;
    animation: tcombo-giro .6s linear infinite;
}
@keyframes tcombo-giro { to { transform: rotate(360deg); } }

.tcombo__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 260px;
    max-height: 340px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--todo-bordo, #dfe1e6);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(44, 47, 60, .16);
    z-index: 60;
    padding: 4px 0;
}
.tcombo__dropdown[hidden] { display: none; }
.tcombo__dropdown--statico { position: static; box-shadow: none; margin-top: 6px; min-width: 0; max-height: 240px; }

.tcombo__gruppo {
    padding: 6px 12px 4px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--tcombo-gruppo, #6b7280);
    position: sticky;
    top: -4px;
}

.tcombo__voce {
    padding: 7px 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--todo-testo, #2c2f3c);
}
.tcombo__voce.is-attivo { background: var(--todo-hover, #eaedf5); }
.tcombo__voce.is-corrente .tcombo__titolo { color: var(--todo-primario, #2f77e3); font-weight: 600; }
.tcombo__titolo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcombo__sotto { font-size: 12px; color: var(--todo-testo-tenue, #9fa1ae); margin-top: 1px; }
.tcombo__voce mark, .todo-pop__nome mark {
    background: #fff1a8;
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}
.tcombo__voce--extra {
    border-top: 1px solid var(--todo-bordo-leggero, #eef0f4);
    margin-top: 4px;
    color: var(--todo-primario, #2f77e3);
    font-weight: 500;
}
.tcombo__vuoto { padding: 10px 12px; font-size: 13px; color: var(--todo-testo-tenue, #9fa1ae); }