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

/* --- 1. Layout Generale --- */
.limiter-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) --- */
.area-knobs {
    width: 11%;
    min-width: 170px;
    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: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 0;
    box-sizing: border-box;
}

.knob-wrapper {
    width: 100%;
    max-width: 120px;
    aspect-ratio: 240 / 168;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* #engine-controls-container (il toggle Lookahead) ora vive dentro
   #knobs-container invece che come riga separata sotto: recupera
   l'altezza che prima occupava una riga intera, lasciandone di più al
   canvas. order:1 lo tiene sempre per ultimo (a destra in riga su
   mobile/landscape, in fondo alla colonna su desktop) indipendentemente
   dall'ordine reale nel DOM — necessario perché i knob veri e propri
   vengono aggiunti dopo via JS (knobsContainer.appendChild), quindi nel
   markup iniziale questo div viene prima. */
#engine-controls-container {
    order: 1; /* niente margin-top: il "gap" di #knobs-container spazia già
      uniformemente tutti i figli, knob compresi */
}

/* Wrapper introdotto per poter affiancare CONTROLS+knobs+Lookahead a
   VIEW OPT in landscape (vedi media query sotto): di default si comporta
   come se quei blocchi 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-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;
}

/* Toggle Lookahead in stile LED: volutamente diverso dai .view-btn (che
   sono overlay grafici) perché questo cambia davvero il calcolo del
   motore — un pallino che si accende invece di un bottone rettangolare
   comunica meglio "stai cambiando un comportamento del motore". */
.led-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 6px;
    transition: background 0.2s;
}
.led-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
}

.led-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 1px solid #444;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.7);
    flex-shrink: 0;
    transition: all 0.2s;
}

.led-toggle.active .led-dot {
    background: #00ffff;
    border-color: #00ffff;
    box-shadow: 0 0 7px 2px rgba(0, 255, 255, 0.75), inset 0 0 2px rgba(255, 255, 255, 0.6);
}

.led-label {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.05em;
    color: #6f7a7a;
    text-transform: uppercase;
    transition: color 0.2s;
}

.led-toggle.active .led-label {
    color: #0ff;
}

.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 .limiter-display-logo) */
    overflow: hidden;
}

/* Logo immagine (era un titolo testuale "LIMITER"): stesso schema di
   Compressor/Gate, vedi commento in style_compDisplay.css per il
   ragionamento completo. Rapporto l/a di questo logo (3.12:1) vicino a
   quello del Comb Filter (3.5:1): l'altezza resta il vincolo primario
   senza bisogno di restringere ulteriormente la larghezza. */
.limiter-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 (limiter) — stesso schema degli altri tool:
   sotto i 768px .limiter-app passa da riga a colonna, grafici
   in alto ad altezza fissa, poi le manopole (solo 2, quindi una
   riga sola in griglia) e VIEW OPT su riga unica.
   ========================================================= */
@media (max-width: 768px) {
    /* height:100% (non piu' auto) + overflow:hidden: stesso ragionamento
       di CompDisplay — .limiter-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). */
    .limiter-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 .limiter-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;
        height: auto !important;
        min-width: 0;
        padding-top: 0;
    }
    #knobs-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center; /* il toggle Lookahead (order:1) non ha l'aspect-ratio
          dei knob: senza questo si stirerebbe stretch sull'altezza dell'intera riga */
        overflow-y: visible;
        gap: 8px 10px;
        padding: 10px 10px 4px;
    }
    /* Stessa dimensione di CompDisplay/GateDisplay (era 40%/140px, piu'
       grande degli altri due tool senza motivo — i knob devono avere lo
       stesso peso visivo ovunque). */
    .knob-wrapper {
        width: 31%;
        max-width: 116px;
    }

    /* Non piu' una riga a parte sotto i knob (era padding:4px 10px 8px
       su tutta la larghezza): ora e' un terzo elemento nella stessa riga
       (order:1, vedi regola base), quindi si restringe al contenuto. */
    #engine-controls-container {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 0 !important;
        margin-top: 0 !important;
    }

    /* Lo spostamento verso il basso di VIEW OPT è solo un tocco estetico
       desktop: su mobile lo spazio è già scarso, quindi qui si annulla. */
    #view-controls-container {
        margin-top: 0 !important;
    }

    /* VIEW OPT: 5 bottoni, vanno a capo (3+2) invece di stringersi su una riga sola */
    #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 di Compressore/Gate
   (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. Un solo canvas anche qui, come
   nel Compressore: niente split affiancato, basta nascondere il
   ruler. A differenza di Compressore/Gate il pannello resta a colonna
   singola (mai stato convertito a griglia 2 colonne: solo 2 knob +
   Lookahead, non serve) — qui si stringe solo la larghezza fissa e la
   dimensione dei knob, ereditando il layout a colonna della regola
   desktop. */
@media (orientation: landscape) and (max-height: 500px) {
    .limiter-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;
    }

    .area-knobs {
        width: 30svh;
        min-width: 100px;
        max-width: 150px;
        height: 100%;
        padding-top: 0;
    }
    .right-labels {
        font-size: 8px;
        padding: 1px 8px;
    }

    /* Colonna singola ereditata dalla regola desktop (nessun override
       di display/flex-direction): solo gap/padding piu' stretti, il
       pannello e' molto piu' stretto del desktop. */
    #knobs-container {
        gap: 8px;
        padding: 6px 8px 0;
    }
    .knob-wrapper {
        max-width: 78px; /* piu' piccolo del desktop (120px): pannello piu' stretto */
    }

    .led-toggle {
        padding: 2px 6px;
        gap: 5px;
    }
    .led-dot {
        width: 9px;
        height: 9px;
    }
    .led-label {
        font-size: 8px;
    }

    #view-controls-container {
        padding: 4px 6px 6px;
        gap: 3px;
    }
    /* 5 pulsanti su griglia a 6 colonne con span (regola desktop): in
       questo pannello stretto 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;
    }
}