/* ==================================================================
   FG Costruzioni SRL — backend
   ================================================================== */

:root {
    --blu:        #1d1de6;
    --blu-scuro:  #10106e;
    --inchiostro: #14161c;
    --grigio:     #59616f;
    --grigio-chiaro: #8d95a3;
    --linea:      #e2e6ed;
    --sfondo:     #f4f6fa;
    --ok:         #1f8a53;
    --errore:     #c0392b;
    --raggio:     4px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--inchiostro);
    background: var(--sfondo);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--blu); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: 0 0 .2em; letter-spacing: -.02em; }
h2 { font-size: 1.1rem; margin: 0 0 .8em; }
h3 { font-size: .95rem; margin: 0 0 .5em; }

/* ------------------------------------------------------------- login */

.accesso {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 24px;
    background: linear-gradient(140deg, var(--blu-scuro), #1a1a9e 60%, var(--blu));
}
.accesso__riquadro {
    width: 100%;
    max-width: 400px;
    padding: 40px 36px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(10, 10, 60, .28);
}
.accesso__logo { width: 200px; height: auto; margin: 0 auto 24px; }
.accesso h1 { font-size: 1.15rem; text-align: center; margin-bottom: 1.6em; color: var(--grigio); font-weight: 600; }

/* ------------------------------------------------------------ scheletro */

.guscio { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }

.barra-laterale {
    display: flex;
    flex-direction: column;
    padding: 22px 16px;
    background: var(--inchiostro);
    color: rgba(255,255,255,.72);
}
.barra-laterale__logo { width: 160px; height: auto; margin-bottom: 28px; }
.barra-laterale nav { flex: 1; }
.barra-laterale ul { margin: 0; padding: 0; list-style: none; }
.barra-laterale a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: .62em .85em;
    margin-bottom: 2px;
    border-radius: var(--raggio);
    color: rgba(255,255,255,.75);
    font-size: .93rem;
    transition: background 160ms, color 160ms;
}
.barra-laterale a:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.barra-laterale a.attivo { background: var(--blu); color: #fff; font-weight: 600; }
.barra-laterale hr { margin: 18px 0; border: 0; border-top: 1px solid rgba(255,255,255,.12); }
.barra-laterale__titolo {
    margin: 18px 0 8px .85em;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.38);
}
.pallino {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--blu);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
    line-height: 20px;
}
.barra-laterale a.attivo .pallino { background: rgba(255,255,255,.28); }

.area { padding: 28px 32px 64px; min-width: 0; }
.area__testata {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.area__testata p { margin: 0; color: var(--grigio); font-size: .93rem; }

@media (max-width: 860px) {
    .guscio { grid-template-columns: 1fr; }
    .barra-laterale { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; }
    .barra-laterale__logo { width: 130px; margin: 0 12px 0 0; }
    .barra-laterale__titolo { display: none; }
    .barra-laterale hr { display: none; }
    .barra-laterale nav { flex: 1 1 100%; }
    .barra-laterale ul { display: flex; flex-wrap: wrap; gap: 4px; }
    .barra-laterale a { padding: .45em .7em; font-size: .86rem; }
    .area { padding: 20px 18px 48px; }
}

/* ------------------------------------------------------------- riquadri */

.riquadro {
    padding: 22px 24px;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
}
.riquadro__titolo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -22px -24px 20px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--linea);
    background: #fbfcfe;
    border-radius: var(--raggio) var(--raggio) 0 0;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--grigio);
}

.tessere {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.tessera {
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
}
.tessera:hover { text-decoration: none; border-color: var(--blu); }
.tessera strong { display: block; font-size: 2rem; line-height: 1.1; color: var(--blu); letter-spacing: -.03em; }
.tessera span { display: block; margin-top: 4px; font-size: .87rem; color: var(--grigio); }

/* --------------------------------------------------------------- moduli */

.campo { display: grid; gap: 5px; margin-bottom: 16px; }
.campo label { font-size: .82rem; font-weight: 600; }
.campo small { color: var(--grigio-chiaro); font-size: .8rem; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=file], textarea, select {
    width: 100%;
    padding: .58em .75em;
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
    font: inherit;
    font-size: .93rem;
    background: #fff;
    color: inherit;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
textarea.grande { min-height: 300px; }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--blu);
    box-shadow: 0 0 0 3px rgba(29,29,230,.12);
}
.riga-campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.interruttore { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.interruttore input { width: 17px; height: 17px; accent-color: var(--blu); }

.bottone {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .6em 1.15em;
    border: 1px solid transparent;
    border-radius: var(--raggio);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 160ms, color 160ms, border-color 160ms;
}
.bottone:hover { text-decoration: none; }
.bottone--pieno    { background: var(--blu); color: #fff; }
.bottone--pieno:hover { background: var(--blu-scuro); }
.bottone--contorno { background: #fff; border-color: var(--linea); color: var(--inchiostro); }
.bottone--contorno:hover { border-color: var(--inchiostro); }
.bottone--pericolo { background: #fff; border-color: var(--linea); color: var(--errore); }
.bottone--pericolo:hover { background: var(--errore); color: #fff; border-color: var(--errore); }
.bottone--piccolo  { padding: .35em .7em; font-size: .8rem; }
.azioni { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.barra-salva {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 20px -32px -64px;
    padding: 14px 32px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--linea);
}
@media (max-width: 860px) { .barra-salva { margin-inline: -18px; padding-inline: 18px; } }

/* --------------------------------------------------------------- avvisi */

.avviso {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-left: 3px solid var(--blu);
    border-radius: var(--raggio);
    background: #fff;
    font-size: .92rem;
}
.avviso--ok     { border-color: var(--ok); }
.avviso--errore { border-color: var(--errore); color: #8e2b20; }

/* -------------------------------------------------------------- tabelle */

.tabella { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabella th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--linea);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--grigio-chiaro);
    text-align: left;
}
.tabella td { padding: 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella tr.non-letto td { background: #f6f7ff; }
.tabella .mini { width: 76px; }
.tabella .mini img { width: 76px; height: 54px; object-fit: cover; border-radius: 3px; }

.etichetta {
    display: inline-block;
    padding: .18em .6em;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.etichetta--ok    { background: #e4f4ec; color: #14663c; }
.etichetta--bozza { background: #f0f1f5; color: var(--grigio); }

/* ---------------------------------------------------------- foto (grid) */

.griglia-admin {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.scheda {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
    overflow: hidden;
}
.scheda.trascinata { opacity: .4; }
.scheda.sopra { border-color: var(--blu); box-shadow: 0 0 0 3px rgba(29,29,230,.15); }
/* flex: none + overflow evitano che le foto verticali sfondino l'altezza della scheda */
.scheda__img { position: relative; flex: none; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sfondo); }
.scheda__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scheda__maniglia {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: .2em .55em;
    border-radius: 3px;
    background: rgba(20,22,28,.72);
    color: #fff;
    font-size: .74rem;
    cursor: grab;
    user-select: none;
}
.scheda__corpo { padding: 14px; display: grid; gap: 10px; }
.scheda__corpo .campo { margin: 0; }
.scheda__piede {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--linea);
    background: #fbfcfe;
}

.selettore-foto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    max-height: 320px;
    padding: 10px;
    overflow-y: auto;
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
    background: #fbfcfe;
}
.selettore-foto label { position: relative; cursor: pointer; }
.selettore-foto input { position: absolute; opacity: 0; }
.selettore-foto img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: 3px;
    transition: border-color 140ms;
}
.selettore-foto input:checked + img { border-color: var(--blu); }
.selettore-foto input:focus-visible + img { outline: 2px solid var(--blu); outline-offset: 2px; }

/* ------------------------------------------------------------- bilingue */

.bandiera {
    display: inline-block;
    margin-left: 6px;
    padding: .1em .45em;
    border-radius: 3px;
    background: var(--linea);
    color: var(--grigio);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    vertical-align: 1px;
}
.bandiera--en { background: #e6e9ff; color: #2d2da8; }

/* Il campo inglese sta appoggiato a quello italiano, non separato */
.campo--en {
    margin-top: -8px;
    margin-bottom: 22px;
    padding-left: 14px;
    border-left: 2px solid #e6e9ff;
}

/* ---------------------------------------------------------- scelta tema */

.scelta-tema {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}
.scelta-tema__voce {
    position: relative;
    padding: 18px 20px 16px;
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
    background: #fff;
    transition: border-color 160ms, box-shadow 160ms;
}
.scelta-tema__voce:hover { border-color: var(--grigio-chiaro); }
/* Segue la selezione corrente del modulo, non quella salvata: se non fosse
   supportato :has(), resta comunque visibile il pallino del radio. */
.scelta-tema__voce:has(input:checked) { border-color: var(--blu); box-shadow: 0 0 0 3px rgba(29,29,230,.12); }
.scelta-tema label { display: block; cursor: pointer; }
.scelta-tema input { position: absolute; top: 20px; right: 18px; accent-color: var(--blu); }
.scelta-tema__nome { display: block; font-weight: 700; margin-bottom: 4px; padding-right: 28px; }
.scelta-tema__testo { display: block; font-size: .85rem; color: var(--grigio); margin-bottom: 10px; }
.scelta-tema__anteprima { display: inline-block; font-size: .82rem; font-weight: 600; }

.vuoto {
    padding: 44px 20px;
    border: 1px dashed var(--linea);
    border-radius: var(--raggio);
    text-align: center;
    color: var(--grigio);
    background: #fff;
}

.filtri-admin { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.filtri-admin a {
    padding: .35em .85em;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: #fff;
    color: var(--grigio);
    font-size: .85rem;
}
.filtri-admin a:hover { border-color: var(--inchiostro); color: var(--inchiostro); text-decoration: none; }
.filtri-admin a.attivo { background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; }

.messaggio-corpo {
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--raggio);
    background: var(--sfondo);
    font: inherit;
    font-size: .9rem;
    white-space: pre-wrap;
    word-break: break-word;
}

:focus-visible { outline: 3px solid #5a5aff; outline-offset: 2px; }