/* 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 */
.compressor-app, 
.compressor-app * {
    font-family: 'Lato', sans-serif !important;
}

/* --- 1. Layout Generale ---
   100%/0: nessun inset extra oltre al padding del pannello, così i bordi
   sinistro/destro del tool si allineano esattamente con il testo (h1 e
   paragrafo) sopra e sotto, che non hanno margini propri. */
.compressor-app {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #111;
    overflow: hidden;     /* Fondamentale per mantenere gli angoli arrotondati */
    border-radius: 15px;  /* Ecco il raggio dei bordi */
    border: 1px solid #333; /* Opzionale: un bordo sottile per definirla meglio */
}


/* --- 2. Area Knob (Colonna Destra) ---
   Griglia a 2 colonne (era una singola colonna): 5 knob in 3 righe invece
   di 5 righe, molto meno spazio verticale richiesto — permette di
   ingrandire i knob (vedi sotto) restando comunque entro l'altezza
   disponibile. Una colonna singola era gia' stata tentata (vedi backup
   pre_knobs_2col_layout) e abbandonata per "disallineamenti": il problema
   era il 5° knob dispari senza compagno — qui e' risolto esplicitamente
   centrandolo a piena larghezza (vedi #knobs-container .knob-wrapper:last-child).
   overflow-y:auto resta come rete di sicurezza per risoluzioni molto piccole. */
.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;      /* centra i knob */
    overflow-y: auto;
    flex-shrink: 0;
    padding-top: 10px;
    background-color: #1d2424;  /* ad esempio un verde scuro */
}
/* Wrapper introdotto per poter affiancare CONTROLS+knobs a VIEW OPT in
   landscape (vedi media query sotto): di default (qui) si comporta come
   se CONTROLS+knobs-container fossero ancora figli diretti di
   .area-knobs, occupando tutto lo spazio verticale disponibile. */
.knobs-block {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
}
/* Griglia 2 colonne x 3 righe (5 knob, l'ultimo da solo sull'ultima riga
   e centrato via regola dedicata sotto). Se lo schermo e' piu' basso,
   #knobs-container scrolla comunque internamente (inline overflow-y:auto
   in CompDisplay.js) senza nascondere CONTROLS/VIEW OPT. */
#knobs-container {
    width: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-content: start; /* #knobs-container ha flex-grow:1 (inline) e prende
      tutta l'altezza libera della colonna: senza questo, lo spazio in eccesso
      veniva distribuito TRA le righe invece di restare in fondo, vanificando
      il gap sotto e lasciando i knob visivamente lontani */
    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, nessun compagno sulla riga) occupa entrambe le
   colonne e resta centrato invece di finire allineato a sinistra da solo:
   questo era il "disallineamento" del precedente tentativo a 2 colonne. */
#knobs-container > .knob-wrapper:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* Ogni knob è dentro un wrapper di dimensione fissa e identica per tutti.
   aspect-ratio quadrato (era 240:168, il rapporto nativo della libreria
   CompDisplayKnobs.js): il cerchio disegnato usa solo il 55% del lato PIÙ
   CORTO del box (ringRadiusScale, hardcoded nella libreria condivisa da
   Compressor/Gate/Limiter) — su un box largo 240:168 il lato corto è
   l'altezza, quindi restava un grande margine vuoto ai lati. Passando a
   quadrato la larghezza si restringe fino a combaciare con l'altezza
   (90px, la stessa di prima: zero impatto sul budget verticale), senza
   toccare il 55% della libreria che è condiviso e più rischioso da
   modificare (rischia di far toccare le etichette min/max ai bordi a
   qualunque risoluzione, essendo tutto scalato in proporzione). */
.knob-wrapper {
    width: 100%;
    max-width: 90px;
    aspect-ratio: 1 / 1;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Forza il canvas a riempire il contenitore */
.knob-wrapper canvas {
    width: 100% !important;  /* riempie il wrapper */
    height: 100% !important;
    display: block;
}


/* --- 3. Area Grafici / Canvas (Colonna Sinistra) ---
   min-height:0 sui canvas flex:1 evita che l'attributo width/height impostato
   via JS (resizeCanvases) resti "agganciato" come minimo forzato, cosa che
   altrimenti spinge l'intero tool oltre l'altezza disponibile. */
.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; /* disabilita pan/zoom nativi del browser: pan e pinch-zoom sono gestiti a mano in CompDisplay.js */
}

/* --- 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;

    /* AGGIUNTA FONT */
    font-family: 'Lato', sans-serif !important;
    font-size: 12px;
}

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

/* Griglia 2x2 invece di stack a 4 righe: dimezza l'altezza occupata dai
   pulsanti VIEW OPT. Il testo può andare su 2 righe per le label più lunghe. */
.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. I due pallini
   riusano gli stessi colori del canvas — grigio per l'input, ciano per
   l'output (vedi CompWaveformEngine.js, drawInputSilhouette/
   drawOutputSilhouette) — cosi' lo stato si legge senza dover leggere
   l'etichetta, ed e' sempre coerente con quello che si vede sulla waveform. */
.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 {
    /* niente nowrap: su schermi stretti (VIEW OPT a riga unica sotto i
       768px) "IN + OUT" deve poter andare a capo come le altre label,
       altrimenti verrebbe tagliata da overflow:hidden su .view-btn. */
    white-space: normal;
}

.right-labels {
    font-family: 'Lato', sans-serif;
    font-weight: 900;        /* Lato Black */
    font-size: 10px;         /* dimensione originale */
    letter-spacing: 1px;
    background: #e0e0e0;     /* colore di sfondo originale */
    color: #111;             /* colore testo */
    padding: 2px 12px;       /* padding originale */
    border-radius: 3px;      /* bordi arrotondati */

    display: flex;            /* <--- rende il box flex */
    align-items: center;      /* centra verticalmente il testo */
    justify-content: center;  /* centra orizzontalmente il testo */
    line-height: normal;      /* evita spazi strani tra righe */
}

.logo-container {
    height: 100%;        /* occupa tutta l’altezza disponibile della top bar */
    display: flex;
    align-items: center; /* centra verticalmente il logo */
    min-width: 0;        /* puo' restringersi sotto il "max-content" se lo
                            spazio scarseggia (vedi .comp-display-logo) */
    overflow: hidden;
}

.comp-display-logo {
    /* Il logo di questo tool ha un rapporto l/a molto piu' estremo (10.4:1)
       degli altri due (Overtones 4.6:1, CombFilter 3.5:1): a parita' di
       altezza verrebbe molto piu' largo. max-width qui e' una rete di
       sicurezza — si attiva solo se davvero manca spazio orizzontale
       (es. accanto al selettore audio su schermi stretti), altrimenti
       l'altezza resta il vincolo primario, uguale agli altri due tool. */
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
}

.audio-controls-top {
    height: 50px;           /* altezza fissa dell’area top */
    display: flex;
    align-items: center;    /* centra verticalmente contenuti */
    justify-content: space-between; /* logo a sinistra, select a destra */
    padding: 0 10px;        /* padding orizzontale */
    background-color: #111; /* opzionale */
}

/* =========================================================
   GUSCIO MOBILE (compressore)
   Sotto i 768px .compressor-app passa da riga (grafici + colonna
   manopole a destra) a colonna: grafici in alto ad altezza fissa,
   poi le 5 manopole in griglia (3+2, mai scroll orizzontale), poi
   VIEW OPT. .waveform-container e .area-knobs hanno flex/height
   impostati inline in CompDisplay.js: servono !important per
   sovrascriverli da qui.
   ========================================================= */
@media (max-width: 768px) {
    /* height:100% (non piu' auto) + overflow:hidden: .compressor-app deve
       riempire esattamente il budget dato da #effect-mount (calcolato in
       css/style_page.css), non "adattarsi al contenuto". Solo cosi'
       .waveform-container (flex:1, inline in CompDisplay.js) puo'
       davvero crescere fino a riempire lo spazio rimasto sotto
       .area-knobs — che invece resta alla sua dimensione naturale
       (height:auto piu' sotto), senza restringersi mai. */
    .compressor-app {
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    .audio-controls-top {
        height: 44px;
        padding: 0 8px;
    }
    /* Niente max-width qui: l'altezza (100% del contenitore, vedi regola
       base) e' l'unico vincolo, cosi' i 3 loghi dei tool restano tutti
       alla stessa altezza a parita' di breakpoint, differenziandosi solo
       in larghezza per la lunghezza del nome. */
    #audioSelect {
        width: 130px;
        margin: 0;
        font-size: 10px;
        padding: 4px;
    }

    /* Niente piu' flex:none/height:auto/overflow:visible qui: lasciamo
       che l'inline flex:1 (CompDisplay.js) faccia il suo lavoro dentro
       .compressor-app ora a altezza definita (100%). Stesso discorso per
       .waveform-container canvas, rimossa: senza un'altezza fissa a
       caso (era 90px), il canvas prende tutta l'altezza che avanza sotto
       .area-knobs, tramite la catena di flex:1 gia' presente inline
       (.canvas-row, #waveCanvasWrap) fino al canvas stesso. */
    .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, altrimenti taglierebbe la larghezza
          anche su un telefono/tablet fino a 768px. */
        height: auto !important;
        min-width: 0;
        padding-top: 0;
    }
    /* display:flex esplicito: la regola base e' ora display:grid (griglia
       desktop a 2 colonne), qui serve tornare a flex perche' flex-direction/
       flex-wrap sotto non hanno alcun effetto su un contenitore grid. */
    #knobs-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        overflow-y: visible;
        gap: 8px 10px;
        padding: 10px 10px 4px;
    }
    /* Torna a 3 per riga (3+2) come richiesto, ma più grandi del primo
       tentativo (92px) stringendo gap e padding per recuperare spazio. */
    .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), stesso schema del Gate: riga 1 = Threshold,
       Ratio, Makeup Gain; riga 2 = Attack, Release. Ordine di creazione in
       CompDisplay.js resta threshold, ratio, attack, release, makeup
       (invariato). */
    #knobs-container > .knob-wrapper:nth-child(1) { order: 1; } /* Threshold */
    #knobs-container > .knob-wrapper:nth-child(2) { order: 2; } /* Ratio */
    #knobs-container > .knob-wrapper:nth-child(5) { order: 3; } /* Makeup Gain */
    #knobs-container > .knob-wrapper:nth-child(3) { order: 4; } /* Attack */
    #knobs-container > .knob-wrapper:nth-child(4) { order: 5; } /* Release */

    /* VIEW OPT su un'unica riga invece della griglia 2x2 desktop.
       Il contenitore dei bottoni non ha classe propria in CompDisplay.js
       (solo stile inline "display:grid"), quindi lo selezioniamo come
       ultimo figlio di #view-controls-container e serve !important per
       vincere sullo stile inline. */
    #view-controls-container > div:last-child {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 4px;
    }
    .view-btn {
        flex: 1;
        min-width: 0;
        min-height: 38px;
        font-size: 8px;
        padding: 3px 2px;
    }
}

/* ============================================================
   TELEFONO IN LANDSCAPE (larghezza abbondante, altezza ridotta).
   Un precedente tentativo di layout a riga (canvas a sinistra, manopole
   a colonna a destra) era stato abbandonato per un impianto verticale
   (canvas sopra, controlli sotto) — vedi versione precedente di questo
   blocco. Nuovo tentativo, stavolta con un vincolo preciso che prima
   mancava: il pannello controlli ha una larghezza FISSA (calcolata dalla
   sola altezza disponibile via unita' svh, mai dalla larghezza del
   contenitore), quindi non si stira/restringe mai al variare dello
   spazio — e' .waveform-container (flex:1 inline) a guadagnare o perdere
   la larghezza residua, mai la sua altezza (resta sempre il 100%
   dell'app, ereditato dal default flex align-items:stretch di
   .compressor-app). I knob restano quadrati (aspect-ratio 1/1 ereditato
   dalla regola base desktop) quindi non si deformano mai. */
@media (orientation: landscape) and (max-height: 500px) {
    .compressor-app {
        flex-direction: row !important; /* torna riga: canvas a sinistra, pannello fisso a destra */
    }

    .audio-controls-top {
        height: 30px;
        padding: 0 8px;
    }
    #audioSelect {
        font-size: 10px;
        padding: 2px 4px;
    }
    /* Meno padding laterale del default desktop (20px): qui la larghezza
       e' comunque limitata, meglio darla tutta al canvas. */
    .waveform-container {
        padding: 0 10px 10px !important;
    }

    /* Un solo canvas (waveCanvas) in Compressor, a differenza di Gate/
       Limiter: niente split affiancato, resta verticale (audio-controls-top
       sopra, canvas-row sotto) esattamente come su desktop. */
    /* Il ruler dei tempi torna visibile (era display:none): l'utente vuole
       comunque vedere i millisecondi anche qui, a costo di ridurre
       l'altezza del canvas della forma d'onda sopra (flex:1 nella catena
       di #waveCanvasWrap assorbe la differenza automaticamente). Solo
       margine/altezza ridotti (era 30px + margin 5px 0 = 40px totali) per
       limitare quanto "costa" alla forma d'onda in uno spazio verticale
       gia' scarso — invariato in portrait/desktop. */
    #timelineCanvas {
        height: 20px !important;
        margin: 2px 0 !important;
    }

    /* Pannello controlli: NON piu' flex-direction:row/width:100% (il
       vecchio tentativo "a riga sotto"). Resta colonna come il default
       desktop (.area-knobs base), ma largo una frazione fissa
       dell'altezza dello schermo invece che una % della larghezza —
       cosi' la sua larghezza dipende solo da quanto e' alto il telefono,
       mai da quanto si allarga/restringe il canvas accanto. height:100%
       esplicito (il default desktop lo ottiene gia' via stretch, ma qui
       serve ribadirlo perche' stiamo sovrascrivendo min-width/max-width
       ereditati dalla regola desktop, pensati per pannelli molto piu'
       larghi). */
    /* Allargata (era 36svh/120-190px, 2 colonne) per ospitare 3 knob per
       riga — vedi raggruppamento sotto: qui, non su desktop, e' dove
       serve davvero 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 —
       stesso fix applicato al Gate, vedi commento li' per il dettaglio.
       Ordine di creazione in CompDisplay.js resta threshold, ratio,
       attack, release, makeup (invariato) — riga 1 = parametri "quanto"
       (Threshold, Ratio, Makeup Gain), riga 2 = parametri "quando"
       (Attack, Release), centrati. */
    #knobs-container {
        grid-template-columns: repeat(6, 1fr);
        gap: 6px 4px;
        padding: 8px 8px 0;
    }
    /* .compressor-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, essendo piu' specifica di un
       singolo :nth-child — a parita' di specificita' decide l'ordine nel
       file, e questa regola (dentro la media query, piu' in basso) vince. */
    .compressor-app #knobs-container > .knob-wrapper:nth-child(1) { grid-row: 1; grid-column: 1 / 3; } /* Threshold */
    .compressor-app #knobs-container > .knob-wrapper:nth-child(2) { grid-row: 1; grid-column: 3 / 5; } /* Ratio */
    .compressor-app #knobs-container > .knob-wrapper:nth-child(5) { grid-row: 1; grid-column: 5 / 7; } /* Makeup Gain */
    .compressor-app #knobs-container > .knob-wrapper:nth-child(3) { grid-row: 2; grid-column: 2 / 4; } /* Attack */
    .compressor-app #knobs-container > .knob-wrapper:nth-child(4) { 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;
    }
    .view-btn {
        min-height: 20px;
        font-size: 7px;
        padding: 2px 2px;
    }
}