/**
 * vocabulary.css
 *
 * Stile di vocabulary.php: form di filtro (caselle HSK, select
 * categoria/genere), tabella dei risultati, paginazione. Area centrale
 * al 100%, come search.php.
 */

.vocabolario-pagina {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
}

.vocabolario-titolo {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* --- Form di filtro --- */
.vocabolario-filtri {
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--ombra-morbida);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.vocabolario-fieldset {
    border: none;
    padding: 0;
    margin: 0 0 1.25rem;
}
.vocabolario-fieldset legend {
    font-weight: 700;
    font-size: .95rem;
    color: var(--c-inchiostro);
    padding: 0 0 .6rem;
}

.vocabolario-hsk-caselle {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}
.vocabolario-hsk-opzione {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--c-nebbia);
    border: 1.5px solid var(--c-bordo);
    border-radius: 999px;
    padding: .4rem .9rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--c-inchiostro);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}
.vocabolario-hsk-opzione:has(input:checked) {
    border-color: var(--c-giada);
    background: #e8f6ee;
    color: var(--c-giada-scuro);
}
.vocabolario-hsk-opzione input {
    accent-color: var(--c-giada);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.vocabolario-select-riga {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.vocabolario-campo {
    flex: 1;
    min-width: 200px;
}
.vocabolario-campo label {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: var(--c-pietra);
    margin-bottom: .35rem;
}
.vocabolario-campo select {
    width: 100%;
    padding: .6rem .7rem;
    border: 1.5px solid var(--c-bordo);
    border-radius: 8px;
    font-size: .92rem;
    font-family: inherit;
    background: #fff;
}
.vocabolario-campo select:focus {
    outline: none;
    border-color: var(--c-giada);
}

.vocabolario-azioni-filtro {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.vocabolario-azioni-filtro .pulsante-auth {
    width: auto;
    padding: .65rem 1.75rem;
}
.vocabolario-azzera {
    font-size: .85rem;
    color: var(--c-pietra);
    text-decoration: none;
}
.vocabolario-azzera:hover {
    text-decoration: underline;
}

/* --- Risultati --- */
.vocabolario-messaggio {
    text-align: center;
    color: var(--c-pietra);
    font-size: .95rem;
    padding: 2rem 0;
}
.vocabolario-errore {
    color: var(--c-sigillo);
}
.vocabolario-conteggio {
    font-size: .88rem;
    color: var(--c-pietra);
    margin-bottom: .75rem;
}

.vocabolario-tabella-contenitore {
    overflow-x: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--ombra-morbida);
}
.vocabolario-tabella {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.vocabolario-tabella th,
.vocabolario-tabella td {
    padding: .7rem .9rem;
    text-align: left;
    border-bottom: 1px solid var(--c-bordo);
    vertical-align: middle;
}
.vocabolario-tabella th {
    background: var(--c-nebbia);
    color: var(--c-inchiostro);
    font-weight: 700;
    white-space: nowrap;
}
.vocabolario-tabella tbody tr:hover {
    background: #fafcfb;
}
.vocabolario-cella-cinese {
    font-size: 1.15rem;
    white-space: nowrap;
}
.vocabolario-cella-traduzioni {
    color: var(--c-pietra);
    max-width: 260px;
}

/* La scheda-termine dentro una cella di tabella deve restare compatta:
   solo il pannellino a icone è visibile di default (il resto è già
   ".collassabile", nascosto finché non cliccato — vedi
   termine_rendi_scheda_completa()), ma togliamo comunque margini
   pensati per un contesto a piena larghezza. */
.vocabolario-tabella .scheda-termine {
    min-width: 160px;
}
.vocabolario-tabella .pannellino {
    display: flex;
    gap: .5rem;
    align-items: center;
}
.vocabolario-tabella .pannellino strong {
    display: none; /* il termine è già nella prima colonna della riga */
}

/* --- Paginazione --- */
.vocabolario-paginazione {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    margin-top: 1.5rem;
}
.vocabolario-paginazione a,
.vocabolario-pagina-corrente {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 .6rem;
    border-radius: 8px;
    font-size: .88rem;
    text-decoration: none;
}
.vocabolario-paginazione a {
    color: var(--c-inchiostro);
    background: #fff;
    border: 1px solid var(--c-bordo);
}
.vocabolario-paginazione a:hover {
    border-color: var(--c-giada);
    color: var(--c-giada-scuro);
}
.vocabolario-pagina-corrente {
    background: var(--c-giada);
    color: #fff;
    font-weight: 700;
}
.vocabolario-paginazione-puntini {
    color: var(--c-pietra);
    padding: 0 .3rem;
}

@media (max-width: 600px) {
    .vocabolario-select-riga {
        flex-direction: column;
    }
}