/* Li.PAD Virtual Tour - pannello di amministrazione.
   Palette e font allineati a www.lipad.it: viola #6A49F2, titoli #32236F, testo #3E3F66, fondo lavanda, Poppins.
   Sistema dei raggi: pulsanti e badge a pillola, riquadri 16px, campi 10px. */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }

:root {
    /* Brand Li.PAD (tutti i colori dell'interfaccia derivano da qui) */
    --lp-viola: #6a49f2;
    --lp-viola-hover: #583bd3;
    --lp-viola-scuro: #32236f;
    --lp-viola-chiaro: #ede9fe;
    --lp-lavanda: #f6f4fe;
    --lp-testo: #3e3f66;
    --lp-testo-secondario: #64658f;  /* 4,9:1 su bianco */
    --lp-bordo: #e1dbf4;

    /* Stati: verde e rosso del logo, scuriti per la leggibilità del testo */
    --stato-ok-fondo: #eaf6e2;
    --stato-ok-testo: #2f6b16;
    --stato-errore-fondo: #fdecee;
    --stato-errore-testo: #b3192b;
    --stato-avviso-fondo: #fdf5e1;
    --stato-avviso-bordo: #f2c34a;

    --superficie: #ffffff;
    --raggio-riquadro: 16px;
    --raggio-campo: 10px;
    --ombra: 0 1px 2px rgba(50, 35, 111, .06), 0 8px 24px rgba(50, 35, 111, .06);
    --transizione: 160ms cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--lp-testo);
    background: var(--lp-lavanda);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--lp-viola); text-underline-offset: 2px; }
a:hover { color: var(--lp-viola-hover); }

h1, h2, h3 { color: var(--lp-viola-scuro); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.2rem; margin: 0 0 .75rem; }

:focus-visible { outline: 2px solid var(--lp-viola); outline-offset: 2px; }

/* Intestazione */
.intestazione {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 68px;
    padding: .5rem 2rem;
    background: var(--superficie);
    box-shadow: 0 1px 0 var(--lp-bordo), 0 4px 16px rgba(50, 35, 111, .05);
}
.intestazione__logo img { height: 42px; width: auto; display: block; }
.intestazione__titolo {
    font-weight: 600;
    font-size: .95rem;
    color: var(--lp-viola-scuro);
    padding-left: 1.25rem;
    border-left: 1px solid var(--lp-bordo);
}
.intestazione__menu {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .25rem;
}
.intestazione__menu a,
.intestazione__menu .pulsante-link {
    padding: .45rem .9rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 500;
    font-size: .92rem;
    color: var(--lp-testo);
    transition: background var(--transizione), color var(--transizione);
}
.intestazione__menu a:hover,
.intestazione__menu .pulsante-link:hover { background: var(--lp-viola-chiaro); color: var(--lp-viola-scuro); }
.intestazione__menu form { margin: 0 0 0 .5rem; }

.contenuto { max-width: 1280px; margin: 0 auto; padding: 2rem; }

/* Riquadri e form */
.riquadro {
    background: var(--superficie);
    border: 1px solid var(--lp-bordo);
    border-radius: var(--raggio-riquadro);
    padding: 2rem;
    box-shadow: var(--ombra);
    max-width: 760px;
}
.riquadro--stretto { max-width: 420px; margin: 3rem auto; }
.riquadro__logo { display: block; height: 52px; width: auto; margin: 0 auto 1.5rem; }
.riquadro--stretto h1 { text-align: center; font-size: 1.3rem; }

.modulo { display: flex; flex-direction: column; gap: 1.1rem; }
.modulo label { display: flex; flex-direction: column; gap: .4rem; font-weight: 500; font-size: .92rem; color: var(--lp-viola-scuro); }
.modulo input[type=text], .modulo input[type=password], .modulo input[type=number],
.modulo select, .modulo textarea {
    font: inherit;
    font-weight: 400;
    color: var(--lp-testo);
    padding: .6rem .8rem;
    border: 1px solid var(--lp-bordo);
    border-radius: var(--raggio-campo);
    background: #fff;
    transition: border-color var(--transizione), box-shadow var(--transizione);
}
.modulo input:focus, .modulo select:focus, .modulo textarea:focus {
    outline: none;
    border-color: var(--lp-viola);
    box-shadow: 0 0 0 3px rgba(106, 73, 242, .18);
}
.modulo input[type=file] {
    font: inherit;
    font-weight: 400;
    font-size: .88rem;
    padding: .7rem;
    border: 1px dashed var(--lp-bordo);
    border-radius: var(--raggio-campo);
    background: var(--lp-lavanda);
}
.modulo input[type=file]::file-selector-button {
    font: inherit;
    font-weight: 500;
    margin-right: .75rem;
    padding: .35rem .9rem;
    border: 0;
    border-radius: 999px;
    background: var(--lp-viola-chiaro);
    color: var(--lp-viola-scuro);
    cursor: pointer;
}
.modulo__riga { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; }
.modulo__azioni { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }

.avanzate { border: 1px solid var(--lp-bordo); border-radius: var(--raggio-campo); padding: .8rem 1rem; background: #fcfbff; }
.avanzate summary { cursor: pointer; font-weight: 500; color: var(--lp-viola-scuro); }
.avanzate[open] summary { margin-bottom: .9rem; }

.avanzamento { display: flex; align-items: center; gap: .75rem; font-size: .9rem; }
.avanzamento progress { flex: 1; height: 10px; accent-color: var(--lp-viola); }

/* Pulsanti */
.pulsante {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font: inherit;
    font-weight: 500;
    font-size: .92rem;
    padding: .55rem 1.25rem;
    border: 1px solid var(--lp-bordo);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--lp-viola-scuro);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transizione), border-color var(--transizione), color var(--transizione), transform var(--transizione);
}
.pulsante:hover { border-color: var(--lp-viola); color: var(--lp-viola); }
.pulsante:active { transform: translateY(1px); }
.pulsante:disabled { opacity: .5; cursor: default; transform: none; }
.pulsante--primario { background: var(--lp-viola); border-color: var(--lp-viola); color: #fff; }
.pulsante--primario:hover { background: var(--lp-viola-hover); border-color: var(--lp-viola-hover); color: #fff; }
.pulsante--pericolo { color: var(--stato-errore-testo); }
.pulsante--pericolo:hover { border-color: var(--stato-errore-testo); color: var(--stato-errore-testo); background: var(--stato-errore-fondo); }
.pulsante--piccolo { padding: .3rem .8rem; font-size: .82rem; }
.pulsante-link {
    font: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

/* Messaggi */
.messaggio { padding: .8rem 1rem; border-radius: var(--raggio-campo); border-left: 4px solid; margin: 0 0 1rem; font-size: .92rem; }
.messaggio p { margin: .2rem 0; }
.messaggio--successo { background: var(--stato-ok-fondo); border-color: #7cc354; color: var(--stato-ok-testo); }
.messaggio--errore { background: var(--stato-errore-fondo); border-color: #ea4253; color: var(--stato-errore-testo); }
.messaggio--avviso { background: var(--stato-avviso-fondo); border-color: var(--stato-avviso-bordo); color: #6b4f0a; }

.testo-secondario { color: var(--lp-testo-secondario); font-size: .85rem; font-weight: 400; }
.testo-errore { color: var(--stato-errore-testo); font-size: .82rem; margin-top: .3rem; max-width: 260px; }

.vuoto {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--lp-testo-secondario);
    background: var(--superficie);
    border: 1px dashed var(--lp-bordo);
    border-radius: var(--raggio-riquadro);
}
.vuoto p { margin: 0 auto 1.25rem; max-width: 46ch; }
.barra-titolo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.barra-titolo h1 { margin: 0; }
.barra-titolo .testo-secondario { margin: .15rem 0 0; }

.tabella-contenitore {
    overflow-x: auto;
    background: var(--superficie);
    border: 1px solid var(--lp-bordo);
    border-radius: var(--raggio-riquadro);
    box-shadow: var(--ombra);
}
.tabella { width: 100%; border-collapse: collapse; }
.tabella th, .tabella td { padding: .85rem 1rem; text-align: left; vertical-align: middle; border-bottom: 1px solid #efecfa; }
.tabella th {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--lp-testo-secondario);
    background: #fcfbff;
}
.tabella tbody tr { transition: background var(--transizione); }
.tabella tbody tr:hover { background: #faf9ff; }
.tabella tbody tr:last-child td { border-bottom: 0; }
.tabella td strong { color: var(--lp-viola-scuro); font-weight: 600; }
.tabella .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.azioni { display: flex; flex-wrap: wrap; gap: .4rem; max-width: 380px; }
.azioni form { margin: 0; }

.stato {
    display: inline-block;
    padding: .2rem .7rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}
.stato::first-letter { text-transform: uppercase; }
.stato--caricata { background: #efedf7; color: var(--lp-testo-secondario); }
.stato--in_elaborazione { background: var(--lp-viola-chiaro); color: var(--lp-viola); }
.stato--pronta { background: var(--stato-ok-fondo); color: var(--stato-ok-testo); }
.stato--errore { background: var(--stato-errore-fondo); color: var(--stato-errore-testo); }

[hidden] { display: none !important; }

@media (max-width: 640px) {
    .intestazione { flex-wrap: wrap; padding: .5rem 1rem; }
    .intestazione__titolo { display: none; }
    .intestazione__menu { margin-left: 0; width: 100%; overflow-x: auto; }
    .contenuto { padding: 1rem; }
    .riquadro { padding: 1.25rem; }
    .barra-titolo { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* Scelta della sorgente nel modulo di caricamento */
.scelta-sorgente {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    border: 0;
}
.scelta-sorgente legend { padding: 0; margin-bottom: .4rem; font-weight: 500; font-size: .92rem; color: var(--lp-viola-scuro); }
.modulo .scelta-sorgente__opzione {
    flex-direction: row;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem 1rem;
    border: 1px solid var(--lp-bordo);
    border-radius: var(--raggio-campo);
    background: #fff;
    cursor: pointer;
    transition: border-color var(--transizione), background var(--transizione);
}
.scelta-sorgente__opzione > span { display: flex; flex-direction: column; gap: .15rem; }
.scelta-sorgente__opzione strong { color: var(--lp-viola-scuro); font-weight: 600; }
.scelta-sorgente__opzione input { margin-top: .3rem; accent-color: var(--lp-viola); }
.scelta-sorgente__opzione:has(input:checked) { border-color: var(--lp-viola); background: #faf8ff; box-shadow: 0 0 0 1px var(--lp-viola); }