/* Pannello di messafuoco Web Studio.
   Volutamente scarno: la tappa 1 deve dimostrare il percorso, non essere bella. */

:root {
    --fondo: #16161a;
    --carta: #f2eee3;
    --accento: #f7ca06;
    --bordo: #2c2c33;
    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--carta);
    font: 15px/1.5 system-ui, sans-serif;
}

a { color: var(--accento); }

.barra {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--bordo);
}

.barra h1 { font-size: 1rem; margin: 0; flex: 1; }
.esci { margin-left: auto; }

/* --- Accesso --- */
.accesso { max-width: 22rem; margin: 12vh auto; padding: 0 1rem; }
.accesso h1 { font-size: 1.25rem; }
.accesso label { display: block; margin: .75rem 0; }
.accesso input { width: 100%; padding: .5rem; }
.errore { color: #ff8f8f; }

/* --- Elenco pagine --- */
.elenco-pagine { list-style: none; padding: 1rem; margin: 0; }
.elenco-pagine li { padding: .5rem 0; border-bottom: 1px solid var(--bordo); }
.slug { opacity: .5; font-size: .85em; }
.vuoto { opacity: .6; }

/* --- Editor --- */
.editor {
    display: grid;
    grid-template-columns: 22rem 1fr;
    height: calc(100vh - 3.25rem);
}

.colonna-moduli {
    border-right: 1px solid var(--bordo);
    overflow-y: auto;
    padding: 1rem;
}

.colonna-moduli h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; opacity: .6; }

.elenco-blocchi { list-style: none; padding: 0; margin: 0 0 1rem; }
.voce-blocco .seleziona {
    width: 100%;
    text-align: left;
    padding: .5rem;
    background: transparent;
    color: inherit;
    border: 1px solid var(--bordo);
    cursor: pointer;
    margin-bottom: .25rem;
}
.voce-blocco.selezionata .seleziona { border-color: var(--accento); }
.voce-blocco.spento .seleziona { opacity: .45; text-decoration: line-through; }
.voce-blocco { display: grid; grid-template-columns: 1fr auto; gap: .25rem; }
.ordina-blocco { display: flex; gap: .15rem; }
.ordina-blocco button, .azioni-blocco button {
    background: transparent; color: inherit; border: 1px solid var(--bordo); cursor: pointer;
}
.azioni-blocco { display: flex; gap: .5rem; margin-top: 1rem; }
.azioni-blocco button:last-child { color: #ff8f8f; }
.metadati { border-bottom: 1px solid var(--bordo); padding-bottom: .75rem; margin-bottom: .75rem; }
.metadati form { display: grid; gap: .4rem; margin: .75rem 0; }
.metadati label { display: grid; gap: .2rem; font-size: .8rem; }
.metadati input, .metadati textarea, .metadati select {
    width: 100%; padding: .4rem; background: #101014; color: inherit; border: 1px solid var(--bordo);
}

.aggiungi { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: 1rem; }
.aggiungi button {
    background: transparent; color: var(--accento);
    border: 1px dashed var(--bordo); padding: .35rem .6rem; cursor: pointer;
}

.revisioni { margin: 1rem 0; border-top: 1px solid var(--bordo); padding-top: .75rem; }
.revisioni summary { cursor: pointer; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.revisioni ul { list-style: none; padding: .5rem 0 0; margin: 0; }
.revisioni li { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; font-size: .75rem; }
.revisioni li span { flex: 1; opacity: .7; }
.revisioni form { margin: 0; }
.revisioni button { background: transparent; color: var(--accento); border: 1px solid var(--bordo); cursor: pointer; }

.versioni { max-width: 58rem; margin: 0 auto; padding: 1rem; }
.versioni ul { list-style: none; padding: 0; }
.versioni li { padding: .65rem 0; border-bottom: 1px solid var(--bordo); }
.versioni li form { display: flex; gap: .5rem; margin-top: .5rem; }
.versioni input { padding: .45rem; background: #101014; color: inherit; border: 1px solid var(--bordo); }
.versioni button { padding: .45rem .75rem; cursor: pointer; }
.versioni label { display: grid; gap: .35rem; max-width: 28rem; margin: 1rem 0; }

.campo { display: block; margin: .75rem 0; }
.campo > span { display: block; font-size: .8rem; opacity: .7; margin-bottom: .2rem; }
.campo input[type=text], .campo textarea, .campo select {
    width: 100%; padding: .4rem; background: #101014; color: inherit;
    border: 1px solid var(--bordo); font: inherit;
}
.campo-link { display: grid; gap: .25rem; }
.stato { font-size: .8rem; opacity: .6; min-height: 1.2em; }

/* --- Ripetitore --- */
.campo-lista { border: 1px solid var(--bordo); padding: .5rem; margin: .75rem 0; }
.voce-lista {
    border: 1px solid var(--bordo);
    padding: .5rem;
    margin: 0 0 .5rem;
}
.voce-lista legend { font-size: .75rem; opacity: .6; text-transform: uppercase; letter-spacing: .06em; }
.aggiungi-voce, .rimuovi-voce {
    background: transparent; color: var(--accento);
    border: 1px dashed var(--bordo); padding: .3rem .6rem; cursor: pointer; font: inherit;
}
.rimuovi-voce { color: #ff8f8f; }
.aggiungi-voce[disabled], .rimuovi-voce[disabled] { opacity: .35; cursor: not-allowed; }

/* --- Anteprima --- */
.colonna-anteprima { display: flex; flex-direction: column; }
.controlli { padding: .5rem 1rem; border-bottom: 1px solid var(--bordo); display: flex; gap: .5rem; }
.controlli button {
    background: transparent; color: inherit; border: 1px solid var(--bordo);
    padding: .25rem .75rem; cursor: pointer;
}
iframe[data-anteprima] {
    flex: 1; width: 100%; border: 0; background: #fff;
    margin: 0 auto; display: block;
}

/* --- Libreria media --- */
.carica-media { display: flex; gap: .5rem; flex-wrap: wrap; padding: 1rem; border-bottom: 1px solid var(--bordo); }
.elenco-libreria { list-style: none; padding: 1rem; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; }
.voce-libreria { border: 1px solid var(--bordo); padding: .5rem; }
.voce-libreria img, .anteprima-media-vuota { width: 100%; height: 8rem; object-fit: cover; display: block; background: #101014; }
.anteprima-media-vuota { display: flex; align-items: center; justify-content: center; font-size: .8rem; opacity: .5; }
.voce-libreria form { display: flex; gap: .25rem; margin-top: .5rem; }
.voce-libreria input[type=text] { flex: 1; padding: .3rem; background: #101014; color: inherit; border: 1px solid var(--bordo); }

.campo-media { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.anteprima-media { width: 3rem; height: 3rem; object-fit: cover; }
.anteprima-media-vuota { width: 3rem; height: 3rem; }
.campo-media-id { width: 6rem; }
.apri-libreria { font-size: .8rem; }