/* 1. Assicurati che l'import sia in cima al file */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

/* 2. Forza il font su TUTTI i componenti dell'app */
.gate-app,
.gate-app * {
    font-family: 'Lato', sans-serif !important;
}

/* --- 1. Layout Generale --- */
.gate-app {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #111;
    overflow: hidden;
    border-radius: 15px;
    border: 1px solid #333;
}

/* --- 2. Area Knob (Colonna Destra) ---
   Griglia a 2 colonne (era una singola colonna): 5 knob in 3 righe invece
   di 5 righe, permette di ingrandirli restando entro l'altezza disponibile.
   Stesso identico schema di CompDisplay, vedi i commenti li' per il
   ragionamento completo. */
.area-knobs {
    width: 15%;              /* box quadrati ora, serve meno larghezza che con 125px x 240:168 */
    min-width: 230px;
    max-width: 250px;        /* tetto stretto sulla dimensione reale dei knob (90px x2 + gap + padding) */
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    flex-shrink: 0;
    padding-top: 10px;
    background-color: #1d2424;
}

#knobs-container {
    width: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-content: start; /* stesso motivo di CompDisplay.css: #knobs-container
      ha flex-grow:1 inline, senza questo lo spazio libero si distribuiva
      tra le righe invece che restare in fondo */
    gap: 8px 2px; /* un po' di respiro tra le righe (era 0): non più del tutto ammassate */
    padding: 16px 14px 0; /* top aumentato (era 6px): stacca la prima riga dalla label CONTROLS */
    box-sizing: border-box;
}
/* Il 5° knob (dispari) occupa entrambe le colonne e resta centrato invece
   di finire allineato a sinistra da solo. */
#knobs-container > .knob-wrapper:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* aspect-ratio quadrato (era 240:168): stesso fix di CompDisplay, vedi
   commento lì per il ragionamento completo. Larghezza ridotta a 90 per
   combaciare con l'altezza esistente, zero impatto sul budget verticale. */
.knob-wrapper {
    width: 100%;
    max-width: 90px;
    aspect-ratio: 1 / 1;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Wrapper introdotto per poter affiancare CONTROLS+knobs a VIEW OPT in
   landscape (vedi media query sotto): di default si comporta come se
   CONTROLS+knobs-container fossero ancora figli diretti di .area-knobs. */
.knobs-block {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
}

.knob-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* --- 3. Area Grafici / Canvas (Colonna Sinistra) --- */
.waveform-container {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: crosshair;
}

.waveform-container canvas {
    width: 100%;
    height: 33.3%;
    min-height: 0;
    display: block;
    touch-action: none;
}

/* --- 4. Elementi Visual & Componenti --- */
.hint-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    font-size: 12px;
    transition: opacity 0.2s;
}

#audioSelect {
    margin: 10px;
    width: 200px;
    background-color: #1a1a1a;
    color: #00ffff;
    border: 1px solid #00ffff;
    padding: 5px;
    font-family: 'Lato', sans-serif !important;
    font-size: 12px;
}

#audioSelect option {
    font-family: 'Lato', sans-serif !important;
    background-color: #222;
    color: #0ff;
}

/* VIEW OPT: 5 pulsanti su griglia a 3 colonne (compressore ne ha 4 su 2 colonne) */
.view-btn {
    width: 100%;
    min-height: 28px;
    background: transparent;
    color: #6f7a7a;
    border: 1px solid #3a4444;
    padding: 3px 4px;
    font-size: 8px;
    line-height: 1.15;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.2s;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
}

.view-btn.active {
    background: rgba(0, 255, 255, 0.14);
    color: #0ff;
    border-color: #0ff;
}

/* Bottone IN/OUT a 3 stati (Input / Output / Input+Output): sostituisce i
   due vecchi bottoni separati Input Wave e Output Wave — stessa logica di
   CompDisplay, vedi commento li' per il ragionamento completo. */
.view-btn-inout {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 2px;
    column-gap: 6px;
}
.inout-swap-icon {
    font-size: 11px;
    line-height: 1;
    color: inherit;
    flex-shrink: 0;
}
.inout-dots {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}
.inout-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    transition: background 0.2s, box-shadow 0.2s;
}
.inout-dot-in.is-on {
    background: #d8d8d8;
}
.inout-dot-out.is-on {
    background: #00ffff;
    box-shadow: 0 0 4px rgba(0, 255, 255, 0.7);
}
.inout-label {
    white-space: normal;
}

.right-labels {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 10px;
    letter-spacing: 1px;
    background: #e0e0e0;
    color: #111;
    padding: 2px 12px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
}

.logo-container {
    height: 100%;
    display: flex;
    align-items: center;
    min-width: 0;        /* puo' restringersi sotto il "max-content" se lo
                            spazio scarseggia (vedi .gate-display-logo) */
    overflow: hidden;
}

/* Logo immagine (era un titolo testuale "NOISE GATE"): stesso schema del
   Compressor, vedi commento in style_compDisplay.css per il ragionamento
   completo. Rapporto l/a di questo logo (3.52:1) vicino a quello del Comb
   Filter (3.5:1): l'altezza resta il vincolo primario senza bisogno di
   restringere ulteriormente la larghezza, a differenza del logo del
   Compressor (10.4:1, molto piu' estremo). */
.gate-display-logo {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
}

.audio-controls-top {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    background-color: #111;
}

/* =========================================================
   GUSCIO MOBILE (noise gate) — stesso schema del compressore:
   sotto i 768px .gate-app passa da riga a colonna, grafici in
   alto ad altezza fissa, poi le 5 manopole in griglia (3+2),
   poi VIEW OPT su riga unica (5 pulsanti stretti).
   ========================================================= */
@media (max-width: 768px) {
    /* height:100% (non piu' auto) + overflow:hidden: stesso ragionamento
       di CompDisplay/LimiterDisplay — .gate-app riempie esattamente il
       budget di #effect-mount, cosi' .waveform-container (flex:1 inline)
       puo' crescere fino a riempire lo spazio rimasto sotto .area-knobs
       (che resta a dimensione naturale, mai ridimensionata). */
    .gate-app {
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    .audio-controls-top {
        height: 44px;
        padding: 0 8px;
    }
    #audioSelect {
        width: 130px;
        margin: 0;
        font-size: 10px;
        padding: 4px;
    }

    /* Rimosso flex:none/height:auto/overflow:visible e l'altezza fissa
       90px sul canvas: con .gate-app ora a altezza definita, la catena
       di flex:1 gia' inline (waveform-container, canvas-row,
       waveCanvasWrap) da' al canvas tutta l'altezza che avanza sotto
       .area-knobs, senza bisogno di un valore fisso a caso. */
    .waveform-container {
        padding: 0 10px 10px !important;
    }

    .area-knobs {
        width: 100% !important;
        max-width: none; /* la base ora ha max-width:380px per la griglia
          2 colonne desktop: qui va tolto */
        height: auto !important;
        min-width: 0;
        padding-top: 0;
    }
    /* display:flex esplicito: la base e' ora display:grid. */
    #knobs-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        overflow-y: visible;
        gap: 8px 10px;
        padding: 10px 10px 4px;
    }
    .knob-wrapper {
        width: 31%;
        max-width: 116px;
        aspect-ratio: 240 / 168; /* la base ora è quadrata (solo desktop 2 colonne):
          qui torna al rapporto originale, invariato rispetto a prima */
    }
    /* Riordino via "order" (nessuna modifica al DOM/JS, nessuna modifica
       al flex-wrap esistente): con 3 knob per riga il flex-wrap li
       spezzerebbe nell'ordine di creazione (Threshold, Reduction, Attack
       / Hold, Release) — qui si riordina solo la sequenza VISIVA per
       ottenere riga 1 = Threshold, Reduction, Hold; riga 2 = Attack,
       Release. Ordine di creazione in GateDisplay.js resta invariato. */
    #knobs-container > .knob-wrapper:nth-child(1) { order: 1; } /* Threshold */
    #knobs-container > .knob-wrapper:nth-child(2) { order: 2; } /* Reduction */
    #knobs-container > .knob-wrapper:nth-child(4) { order: 3; } /* Hold */
    #knobs-container > .knob-wrapper:nth-child(3) { order: 4; } /* Attack */
    #knobs-container > .knob-wrapper:nth-child(5) { order: 5; } /* Release */

    #view-controls-container > div:last-child {
        display: flex !important;
        flex-wrap: wrap;
        gap: 4px;
    }
    .view-btn {
        flex: 1 1 30%;
        min-width: 0;
        min-height: 38px;
        font-size: 8px;
        padding: 3px 2px;
    }
}

/* ============================================================
   TELEFONO IN LANDSCAPE — stessa architettura row del Compressore
   (vedi style_compDisplay.css per il ragionamento completo): canvas a
   sinistra (guadagna/perde SOLO larghezza), pannello controlli a
   destra con larghezza FISSA calcolata dalla sola altezza disponibile
   (svh), mai dalla larghezza residua. I knob restano quadrati
   (aspect-ratio 1/1 ereditato dalla griglia desktop), zero stretch.
   Un solo canvas (waveCanvas) anche qui, come nel Compressore: niente
   split affiancato. Unica differenza dal Compressore: la griglia VIEW
   OPT desktop e' a 6 colonne (7 pulsanti, non 6) pensata per un
   pannello largo — qui resta l'override a flex-wrap (gia' presente
   prima di questo redesign), altrimenti le colonne diventerebbero
   troppo strette per il pannello, ora molto piu' stretto del vecchio 1/3
   di riga. */
@media (orientation: landscape) and (max-height: 500px) {
    .gate-app {
        flex-direction: row !important;
    }

    .audio-controls-top {
        height: 30px;
        padding: 0 8px;
    }
    #audioSelect {
        font-size: 10px;
        padding: 2px 4px;
    }
    .waveform-container {
        padding: 0 10px 10px !important;
    }
    /* Ruler dei tempi visibile (era display:none): l'utente vuole comunque
       vedere i millisecondi qui, a costo di ridurre l'altezza del canvas
       sopra — stesso motivo/schema di CompDisplay.css, vedi commento lì. */
    #timelineCanvas {
        height: 20px !important;
        margin: 2px 0 !important;
    }

    /* Allargata (era 36svh/120-190px, 2 colonne) per ospitare 3 knob per
       riga — vedi raggruppamento sotto: qui, non su desktop, e' dove
       serve il raggruppamento per riga, dato lo spazio verticale ridotto
       del telefono in orizzontale. */
    .area-knobs {
        width: 44svh;
        min-width: 200px;
        max-width: 230px;
        height: 100%;
        padding-top: 0;
    }
    .right-labels {
        font-size: 8px;
        padding: 1px 8px;
    }

    /* 6 colonne fini (non 3): ogni knob ne occupa 2, cosi' la riga da 2
       (Attack, Release) puo' essere centrata con margini laterali
       simmetrici invece di restare allineata alle prime 2 colonne di 3 —
       come richiesto, per farla assomigliare alla versione portrait qui
       sopra (li' e' gia' centrata di default, essendo flex-wrap con
       justify-content:center). Ordine di creazione in GateDisplay.js
       resta threshold, reduction, attack, hold, release (invariato) —
       riga 1 = Threshold, Reduction, Hold (piena larghezza, 2 colonne
       ciascuno); riga 2 = Attack, Release (2 colonne ciascuno, centrati:
       1 colonna vuota a sinistra e 1 a destra). */
    #knobs-container {
        grid-template-columns: repeat(6, 1fr);
        gap: 6px 4px;
        padding: 8px 8px 0;
    }
    /* .gate-app in testa a ogni selettore: alza la specificita' a parita'
       con la regola base "#knobs-container > .knob-wrapper:last-
       child:nth-child(odd)" (2 pseudo-classi), che altrimenti vincerebbe
       comunque su nth-child(5) qui sotto — stesso motivo del Compressore,
       vedi commento li' per il dettaglio. */
    .gate-app #knobs-container > .knob-wrapper:nth-child(1) { grid-row: 1; grid-column: 1 / 3; } /* Threshold */
    .gate-app #knobs-container > .knob-wrapper:nth-child(2) { grid-row: 1; grid-column: 3 / 5; } /* Reduction */
    .gate-app #knobs-container > .knob-wrapper:nth-child(4) { grid-row: 1; grid-column: 5 / 7; } /* Hold */
    .gate-app #knobs-container > .knob-wrapper:nth-child(3) { grid-row: 2; grid-column: 2 / 4; } /* Attack */
    .gate-app #knobs-container > .knob-wrapper:nth-child(5) { grid-row: 2; grid-column: 4 / 6; } /* Release */
    .knob-wrapper {
        max-width: 64px; /* piu' piccoli del desktop (90px): pannello piu' stretto */
    }

    #view-controls-container {
        padding: 4px 6px 6px;
        gap: 3px;
    }
    /* 7 pulsanti su griglia a 6 colonne (regola desktop): in un pannello
       stretto come questo le colonne sarebbero illeggibili, quindi resta
       il flex-wrap dedicato invece di ereditare la griglia. */
    #view-controls-container > div:last-child {
        display: flex !important;
        flex-wrap: wrap;
        gap: 3px;
    }
    .view-btn {
        flex: 1 1 45%;
        min-width: 0;
        min-height: 20px;
        font-size: 7px;
        padding: 2px 2px;
    }
}