/* ============================================================================
   EDITOR DELLE FOTO — l'aspetto (22/09/2026).

   Sta in un foglio suo, e non dentro `mood-ui.css`, per una ragione pratica: quel
   foglio oggi si porta dietro il suo corpo DUE volte (lo dice
   `check_css_struttura.py`), quindi ogni regola aggiunta lì dentro nasce già
   duplicata. Qui invece si legge in un posto solo, e si carica solo dove serve.

   NIENTE MISURE IN PIXEL FISSI per il palco: la foto si adatta al posto che trova
   (`flex: 1` + `object-fit` sul canvas), perché il modale deve funzionare su un
   telefono da 390 px e su uno schermo da 1280 senza due implementazioni.
   I colori sono le variabili del tema (`--mood-*`), così chiaro e scuro vengono
   da soli: non c'è una seconda tavolozza da tenere allineata a mano.
   ========================================================================== */

.foto-editor {
    position: fixed;
    inset: 0;
    z-index: 10100;              /* sopra il compositore (9999): l'editor si apre DENTRO il suo flusso */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    height: 100vh;
}
.foto-editor.hidden { display: none; }

/* Mentre l'editor è aperto la pagina sotto non scorre: senza questo, sul telefono, si finisce per
   trascinare il feed mentre si trascina il rettangolo di taglio. */
body.foto-editor-aperto { overflow: hidden; }

.foto-editor__velo {
    position: absolute;
    inset: 0;
    background: rgba(4, 4, 10, 0.72);
}

.foto-editor__riquadro {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(980px, 100%);
    max-height: min(94vh, 900px);
    background: #15152A;
    border: 1px solid #454589;
    border-radius: 16px;
    overflow: hidden;
    color: #F0F0FF;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* ---------- la testata ---------- */
.foto-editor__testa {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mood-border, #2A2A4A);
}
.foto-editor__testa strong { font-size: 0.95rem; font-weight: 700; }
.foto-editor__uscita {
    margin-left: auto;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--mood-text-muted, #8b8b9e);
}
.foto-editor__chiudi {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.4rem; line-height: 1;
    cursor: pointer;
}
.foto-editor__chiudi:hover { background: rgba(158, 158, 158, 0.16); }

/* ---------- il palco: la foto e il rettangolo di taglio ---------- */
.foto-editor__palco {
    position: relative;
    flex: 1 1 auto;
    /* IL PALCO DEVE ESSERE GRANDE (22/09/2026). Con la sola `min-height: 240px` l'anteprima usciva
       alta 220 px su un desktop da 900: si taglia una foto guardandola, e in 220 px non si vede
       niente. Qui prende più di metà schermo (fino a 520), e il resto del modale si adatta. */
    min-height: min(52vh, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    /* Il palco è scuro in tutti e due i temi: su un fondo scuro si vede dove finisce la foto, che è
       quello che serve mentre si taglia (su un fondo chiaro una foto chiara sembra senza bordi). */
    background: #0c0c16;
    overflow: hidden;
    touch-action: none;          /* il trascinamento del taglio non deve scorrere la pagina */
}
.foto-editor__tela {
    display: block;
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.foto-editor__taglio {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 9999px rgba(4, 4, 10, 0.55);   /* scurisce tutto tranne l'inquadratura */
    cursor: move;
    touch-action: none;
}
.foto-editor__taglio.in-presa { border-color: var(--mood-primary, #6C5CE7); }

/* Le otto maniglie. Sono `i` vuote: il tocco è più comodo con un bersaglio grande, quindi sono
   14px pieni con il bordo della foto sopra. */
.foto-editor__taglio .fm {
    position: absolute;
    width: 14px; height: 14px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.foto-editor__taglio .fm[data-m="nw"] { left: -7px;  top: -7px;    cursor: nwse-resize; }
.foto-editor__taglio .fm[data-m="n"]  { left: 50%;   top: -7px;    margin-left: -7px; cursor: ns-resize; }
.foto-editor__taglio .fm[data-m="ne"] { right: -7px; top: -7px;    cursor: nesw-resize; }
.foto-editor__taglio .fm[data-m="w"]  { left: -7px;  top: 50%;     margin-top: -7px; cursor: ew-resize; }
.foto-editor__taglio .fm[data-m="e"]  { right: -7px; top: 50%;     margin-top: -7px; cursor: ew-resize; }
.foto-editor__taglio .fm[data-m="sw"] { left: -7px;  bottom: -7px; cursor: nesw-resize; }
.foto-editor__taglio .fm[data-m="s"]  { left: 50%;   bottom: -7px; margin-left: -7px; cursor: ns-resize; }
.foto-editor__taglio .fm[data-m="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }

/* ---------- gli strumenti ---------- */
.foto-editor__strumenti {
    flex: 0 0 auto;
    padding: 10px 14px 1rem;
    border-top: 1px solid var(--mood-border, #2A2A4A);
    height: 100vh;
    overflow-y: auto;
    max-height: 49vh;
}

.foto-editor__linguette {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.foto-editor__linguette button {
    flex: 1 1 0;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: rgba(158, 158, 158, 0.12);
    color: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.foto-editor__linguette button:hover { background: rgba(158, 158, 158, 0.2); }
.foto-editor__linguette button.accesa {
    background: var(--mood-primary, #6C5CE7);
    color: #fff;
}
.foto-editor__pannello{
    height: 59vh;
}
.foto-editor__riga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.foto-editor__nota {
    font-size: 0.76rem;
    line-height: 1.35;
    color: #b0b0c3;
}

/* Le pillole (rapporti del taglio, «azzera»): piccole, arrotondate, una accesa */
.foto-editor__pillola {
    padding: 6px 12px;
    border: 1px solid #454560;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.foto-editor__pillola:hover { border-color: var(--mood-primary, #6C5CE7); }
.foto-editor__pillola.accesa {
    background: var(--mood-primary, #6C5CE7);
    border-color: var(--mood-primary, #6C5CE7);
    color: #fff;
}

/* I comandi grossi (ruota, specchia): icona + parola, così si capiscono senza leggenda */
.foto-editor__comando {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid #454560;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.foto-editor__comando:hover { border-color: var(--mood-primary, #6C5CE7); }
.foto-editor__comando svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* Le manopole: nome a sinistra, cursore in mezzo, valore a destra (in cifre, perché il numero dice
   più di una tacchetta) */
.foto-editor__manopola {
    display: grid;
    grid-template-columns: 104px 1fr 44px;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.foto-editor__nome { font-size: 0.8rem; }
.foto-editor__manopola input[type="range"] {
    width: 100%;
    accent-color: var(--mood-primary, #6C5CE7);
}
.foto-editor__valore {
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--mood-text-muted, #8b8b9e);
}

/* I filtri: una griglia di miniature VERE (disegnate dalla stessa funzione che disegna il file) */
.foto-editor__filtri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}
.foto-editor__filtro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 6px 4px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-size: 0.7rem;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}
.foto-editor__filtro:hover { background: rgba(158, 158, 158, 0.12); }
.foto-editor__filtro canvas {
    width: 72px; height: 72px;
    border-radius: 8px;
    background: #0c0c16;
}
.foto-editor__filtro.accesa {
    border-color: var(--mood-primary, #6C5CE7);
    background: rgba(108, 92, 231, 0.16);
}

/* La scelta della dimensione */
.foto-editor__campo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
}
.foto-editor__campo select {
    padding: 6px 10px;
    border: 1px solid #2A2B4A;
    border-radius: 8px;
    background: #2A2B4A;
    color: inherit;
    font-size: 0.82rem;
}

/* ---------- i piedi ---------- */
.foto-editor__piedi {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 14px;
    border-top: 1px solid #454589;
    border-bottom: 1px solid #454589;
    bottom: 0px;
    border-radius: 1px 1px 16px 16px;
    position: fixed;
    background: #15152a;
    width: min(978px, 100%);
    margin-bottom: 28px;
}
.foto-editor__btn {
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
.foto-editor__btn--testo {
    background: transparent;
    border-color: #454560;
    color: inherit;
}
.foto-editor__btn--testo:hover { border-color: var(--mood-primary, #6C5CE7); }
.foto-editor__btn--forte {
    margin-left: auto;
    background: var(--mood-primary, #6C5CE7);
    color: #fff;
}
.foto-editor__btn--forte:hover { filter: brightness(1.08); }
.foto-editor__btn[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- il telefono ---------- */
@media (max-width: 640px) {
    .foto-editor { padding: 0; }
    .foto-editor__riquadro {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        border: 0;
        border-radius: 0;
    }
    /* Sul telefono il palco prende lo spazio che avanza e la foto sta dentro: con l'editor a piena
       pagina il taglio si fa col pollice, che è la ragione per cui questa cosa esiste. */
    .foto-editor__palco { min-height: min(40vh, 360px); }
    .foto-editor__manopola { grid-template-columns: 88px 1fr 40px; }
    .foto-editor__strumenti {max-height: 50vh;overflow: auto;}
    .foto-editor__filtri {
        display: flex;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }
    .foto-editor__filtro { flex: 0 0 auto; }
    .foto-editor__piedi {flex-wrap: wrap;width: min(980px, 100%);margin-bottom: -1px;}
    .foto-editor__btn { flex: 1 1 auto; }
    .foto-editor__btn--forte { margin-left: 0; }
}

@media (pointer: coarse) {
    .foto-editor__taglio .fm { width: 22px; height: 22px; border-radius: 50%; }
    .foto-editor__taglio .fm[data-m="nw"] { left: -11px; top: -11px; }
    .foto-editor__taglio .fm[data-m="n"]  { top: -11px; margin-left: -11px; }
    .foto-editor__taglio .fm[data-m="ne"] { right: -11px; top: -11px; }
    .foto-editor__taglio .fm[data-m="w"]  { left: -11px; margin-top: -11px; }
    .foto-editor__taglio .fm[data-m="e"]  { right: -11px; margin-top: -11px; }
    .foto-editor__taglio .fm[data-m="sw"] { left: -11px; bottom: -11px; }
    .foto-editor__taglio .fm[data-m="s"]  { bottom: -11px; margin-left: -11px; }
    .foto-editor__taglio .fm[data-m="se"] { right: -11px; bottom: -11px; }
}