/* css/dictionary.css
   ---------------------------------------------------------------
   Stili per la pagina Dizionario (dictionary.html). Foglio dedicato
   e autonomo (stesso criterio di host.css/player.css/monitor.css):
   non dipende da host.css, così questa pagina "strumento" resta
   leggera e non trascina stili specifici del tabellone di gioco.

   Layout: la pagina occupa tutta l'altezza disponibile della
   finestra (100dvh, più affidabile di 100vh su mobile perché tiene
   conto delle barre del browser) e si divide in blocchi con
   flexbox. Controlli e barra di ricerca hanno altezza naturale,
   mentre l'area risultati prende TUTTO lo spazio verticale che
   resta (flex: 1; min-height: 0) e scorre internamente: è la
   tecnica standard per avere "il resto della pagina fisso, solo la
   tabella scorre", e si adatta da sola a qualunque dimensione di
   schermo senza bisogno di calcoli in pixel via JavaScript.
   ---------------------------------------------------------------- */

.dict-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 95%;
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 0 1rem 0;
    gap: 1rem;
    min-height: 0;
    box-sizing: border-box;
}

/* Il pulsante "Indietro" non sta più qui dentro: ora è fisso in alto a
   sinistra rispetto alla viewport (.back-btn-fixed, css/global.css), non
   più affiancato al titolo. Il titolo si centra da solo (h1 è già
   text-align: center di default, vedi global.css). */
.dict-topbar {
    flex-shrink: 0;
    /* Stacca l'intestazione (titolo) dal resto del contenuto sottostante,
       oltre al gap già applicato tra tutte le sezioni da .dict-page. */
    margin-bottom: 56px;
}

.dict-topbar h1 {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
}

.dict-panel {
    flex-shrink: 0;
    padding: 1.2rem;
}

/* =========================================================
   SEZIONE 1: SELEZIONE LINGUA E CATEGORIE
   ========================================================= */
.dict-lang-selector-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.dict-lang-card {
    cursor: pointer;
    position: relative;
}
.dict-lang-card input { display: none; }

.dict-lang-content {
    background: rgba(0, 0, 0, 0.15);
    padding: 10px;
    text-align: center;
    border-radius: 8px;
    border: 2px solid transparent;
    font-weight: bold;
    transition: all 0.3s;
}

.dict-lang-card input:checked + .dict-lang-content {
    border-color: var(--accent-color);
    background: rgba(59, 130, 246, 0.12);
    transform: scale(1.03);
}

.dict-category-panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.35s ease, margin 0.35s ease;
}
.dict-category-panel.visible {
    max-height: 220px;
    opacity: 1;
    margin-top: 12px;
}

.dict-category-title {
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--secondary);
    margin-bottom: 8px;
}

.dict-categories-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dict-categories-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.95rem;
}

.dict-categories-grid input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

/* =========================================================
   SEZIONE 2: BARRA DI RICERCA
   ========================================================= */
.dict-search-wrapper {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.dict-search-wrapper span.dict-search-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

#dict-search-input {
    flex: 1;
    font-size: 1.1rem;
    padding: 0.9rem 1rem;
    text-transform: uppercase;
}

/* =========================================================
   SEZIONE 3: TABELLA RISULTATI (basata su CSS Grid, non <table>,
   per poter animare in modo affidabile l'altezza di ogni riga)
   ========================================================= */
.dict-results-wrapper {
    /* Altezza calcolata dinamicamente in base allo schermo (55% dell'altezza
       visibile), con un minimo e un massimo sensati: così la tabella non
       cresce mai all'infinito verso il basso, ma si adatta comunque a
       schermi piccoli (telefono) o grandi (desktop). Usiamo dvh perché su
       mobile tiene conto correttamente delle barre dinamiche del browser. */
    height: clamp(320px, 55dvh, 640px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.dict-results-header,
.dict-row {
    display: grid;
    grid-template-columns: 2fr 1.4fr;
    align-items: center;
}

.dict-results-header {
    flex-shrink: 0;
    padding: 0.9rem 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    color: var(--secondary);
    border-bottom: 2px solid var(--card-border);
    background: var(--card-bg);
}

.dict-results-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.4rem 0;
}

.dict-results-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    color: var(--secondary);
    font-size: 1.05rem;
    opacity: 0.8;
}

/* Riga di parola: altezza fissa e nota, indispensabile per poter
   animare max-height in modo pulito (non si può animare "auto"). */
.dict-row {
    height: 52px;
    max-height: 52px;
    padding: 0 1.2rem;
    overflow: hidden;
    border-bottom: 1px solid var(--card-border);
    transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease, padding 0.3s ease;
}

.dict-row-word {
    font-weight: bold;
    font-size: 1.05rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dict-row-category {
    font-size: 0.9rem;
    opacity: 0.85;
    white-space: nowrap;
}

/* Stato "sta per apparire": la riga nasce collassata, spostata verso il
   basso e trasparente, poi il motore JS toglie questa classe subito dopo
   averla inserita nel DOM per far scattare la transizione -> effetto
   "risorge dal basso" mentre cresce e diventa opaca. */
.dict-row.dict-row-enter {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(16px);
}

/* Stato "sta per sparire": collassa in altezza e sfuma verso l'alto;
   le righe sottostanti risalgono naturalmente perché lo spazio si libera
   durante la stessa transizione (nessun calcolo JS di posizione necessario). */
.dict-row.dict-row-exit {
    max-height: 0 !important;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(-10px);
    border-bottom-color: transparent;
}

.dict-results-footer {
    flex-shrink: 0;
    padding: 0.6rem 1.2rem;
    font-size: 0.8rem;
    text-align: center;
    color: var(--secondary);
    border-top: 1px solid var(--card-border);
    opacity: 0.85;
}
.dict-results-footer:empty { display: none; }

/* =========================================================
   RESPONSIVE: telefono vs desktop
   ========================================================= */
@media (max-width: 640px) {
    .dict-lang-selector-grid { grid-template-columns: 1fr; }
    .dict-categories-grid { grid-template-columns: 1fr; }
    .dict-results-header, .dict-row { grid-template-columns: 1.6fr 1fr; }
    .dict-row { height: 46px; max-height: 46px; }
    .dict-row-word { font-size: 0.95rem; }
    .dict-row-category { font-size: 0.8rem; }
    .dict-panel { padding: 1rem; }
}