/* =====================================================================
   TERRAFERMA — Area riservata
   Interfaccia essenziale, negli stessi colori del sito pubblico.
   ===================================================================== */

@font-face {
  font-family: 'Open Sauce Sans';
  src: url('../fonts/open-sauce-sans-400.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sauce Sans';
  src: url('../fonts/open-sauce-sans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sauce Sans';
  src: url('../fonts/open-sauce-sans-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo TF';
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 400 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}

:root {
  --blu: #152772;
  --azzurro: #006ecd;
  --rosso: #e43e00;
  --verde: #009454;
  --giallo: #fdbc0a;
  --magenta: #f11695;
  --carta: #f4f6fb;
  --bianco: #fff;
  --bordo: #dfe4f0;
  --grigio: #5b628a;
  --ombra: 0 1px 2px rgba(21,39,114,.05), 0 8px 24px rgba(21,39,114,.07);
  --font: 'Open Sauce Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Archivo TF', 'Archivo', system-ui, sans-serif;
}

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

body.tf-admin {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--blu);
  background: var(--carta);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--azzurro); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .6rem; }
h1 {
  font-family: var(--display); font-weight: 800; font-stretch: 118%;
  text-transform: uppercase; font-size: 1.6rem; letter-spacing: .01em;
}
h2 { font-size: 1.15rem; }

:focus-visible { outline: 3px solid var(--giallo); outline-offset: 2px; border-radius: 4px; }

.wrap { width: min(100% - 2rem, 1060px); margin-inline: auto; }
.wrap--stretto { width: min(100% - 2rem, 760px); margin-inline: auto; }

/* ---------------------------------------------------------------- */
/*  Testata                                                          */
/* ---------------------------------------------------------------- */

.admin-testata {
  background: var(--blu); color: #fff;
  padding: .7rem 0;
  position: sticky; top: 0; z-index: 20;
}
.admin-testata__riga { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.admin-marchio { display: flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; font-weight: 700; }
.admin-marchio img { width: 40px; height: 40px; background: #fff; border-radius: 50%; }
.admin-nav { display: flex; gap: .3rem; flex-wrap: wrap; margin-inline-start: auto; align-items: center; }
.admin-nav a {
  color: rgba(255,255,255,.85); text-decoration: none; font-weight: 600; font-size: .92rem;
  padding: .42rem .85rem; border-radius: 999px;
}
.admin-nav a:hover { background: rgba(255,255,255,.14); color: #fff; }
.admin-nav a[aria-current="page"] { background: var(--giallo); color: var(--blu); }
.admin-utente { font-size: .85rem; color: rgba(255,255,255,.7); }

main.admin-main { padding: 2rem 0 4rem; }

.admin-intestazione {
  display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.admin-intestazione p { margin: .2rem 0 0; color: var(--grigio); font-size: .95rem; }
.admin-intestazione .a-destra { margin-inline-start: auto; }

/* ---------------------------------------------------------------- */
/*  Avvisi                                                           */
/* ---------------------------------------------------------------- */

.avviso {
  border-radius: 14px; padding: .9rem 1.1rem; margin-bottom: 1rem;
  border-inline-start: 5px solid var(--azzurro); background: #fff; box-shadow: var(--ombra);
  font-size: .95rem;
}
.avviso p { margin: 0 0 .5rem; }
.avviso p:last-child { margin-bottom: 0; }
.avviso--ok { border-color: var(--verde); }
.avviso--errore { border-color: var(--rosso); }
.avviso--attenzione { border-color: var(--giallo); }

/* ---------------------------------------------------------------- */
/*  Pulsanti                                                         */
/* ---------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font); font-weight: 700; font-size: .92rem; line-height: 1.2;
  padding: .65rem 1.15rem; border-radius: 999px; border: 2px solid transparent;
  background: var(--bianco); color: var(--blu); cursor: pointer; text-decoration: none;
  box-shadow: var(--ombra); transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primario { background: var(--blu); color: #fff; }
.btn--primario:hover { background: #0e1c56; color: #fff; }
.btn--giallo { background: var(--giallo); color: var(--blu); }
.btn--pericolo { background: #fff; color: var(--rosso); border-color: currentColor; box-shadow: none; }
.btn--pericolo:hover { background: var(--rosso); color: #fff; }
.btn--neutro { border-color: var(--bordo); box-shadow: none; }
.btn--piccolo { padding: .38rem .8rem; font-size: .84rem; }
.btn--largo { width: 100%; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* ---------------------------------------------------------------- */
/*  Riquadri e moduli                                                */
/* ---------------------------------------------------------------- */

.card {
  background: var(--bianco); border: 1px solid var(--bordo);
  border-radius: 18px; padding: 1.4rem; box-shadow: var(--ombra);
  margin-bottom: 1.25rem;
}
.card > h2 {
  font-family: var(--display); font-weight: 800; font-stretch: 112%;
  text-transform: uppercase; font-size: 1rem; letter-spacing: .04em;
  color: var(--grigio); margin: 0 0 1.1rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--bordo);
}

label { display: block; font-weight: 600; font-size: .9rem; margin: 1.1rem 0 .35rem; }
label:first-of-type { margin-top: 0; }
.hint { font-weight: 400; color: var(--grigio); font-size: .85rem; }

input[type=text], input[type=password], input[type=url], input[type=number],
input[type=email], select, textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--blu);
  background: #fff; border: 2px solid var(--bordo); border-radius: 12px;
  padding: .6rem .8rem;
}
textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
textarea.alto { min-height: 17rem; }
input:focus, select:focus, textarea:focus { border-color: var(--azzurro); outline: none; }
input[type=file] { font-size: .9rem; }

.check { display: flex; align-items: flex-start; gap: .6rem; font-weight: 500; margin: 1rem 0; }
.check input { margin-top: .35rem; }

.griglia-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.griglia-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.25rem; }
@media (max-width: 680px) { .griglia-2, .griglia-3 { grid-template-columns: 1fr; } }

.azioni-modulo {
  display: flex; gap: .7rem; flex-wrap: wrap; align-items: center;
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--bordo);
}
.azioni-modulo .a-destra { margin-inline-start: auto; }

/* Scelta del colore */
.colori { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
/* `.colore` è un <label>: va azzerato il margine della regola generica,
   altrimenti le pillole risultano sfalsate fra loro. */
.colore { position: relative; margin: 0; }
.colore input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.colore span {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .9rem .45rem .5rem; border-radius: 999px;
  border: 2px solid var(--bordo); font-size: .88rem; font-weight: 600; cursor: pointer;
}
.colore i {
  width: 22px; height: 22px; border-radius: 58% 42% 47% 53% / 46% 53% 47% 54%;
  background: var(--c); display: block;
}
.colore input:checked + span { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); }
.colore input:focus-visible + span { outline: 3px solid var(--giallo); outline-offset: 2px; }

/* File già caricati */
.file-attuale {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  background: var(--carta); border-radius: 12px; padding: .55rem .85rem;
  font-size: .88rem; margin-top: .5rem;
}
.file-attuale a { font-weight: 600; }
.anteprima { width: 110px; border-radius: 12px; border: 1px solid var(--bordo); }

/* ---------------------------------------------------------------- */
/*  Elenco progetti                                                  */
/* ---------------------------------------------------------------- */

.elenco { display: grid; gap: .9rem; }

.riga {
  display: grid; grid-template-columns: 78px minmax(0,1fr) auto;
  gap: 1rem; align-items: center;
  background: #fff; border: 1px solid var(--bordo); border-left: 6px solid var(--c, var(--azzurro));
  border-radius: 16px; padding: .85rem 1.1rem; box-shadow: var(--ombra);
}
.riga__foto {
  width: 78px; height: 62px; object-fit: cover;
  border-radius: 45% 55% 55% 45% / 60% 40% 62% 38%;
  background: var(--c, var(--azzurro));
}
.riga__testo { min-width: 0; }
.riga__titolo { font-weight: 700; font-size: 1.05rem; margin: 0; }
.riga__meta { font-size: .85rem; color: var(--grigio); margin: .1rem 0 0; }
.riga__azioni { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.riga--nascosta { opacity: .62; }

@media (max-width: 620px) {
  .riga { grid-template-columns: 56px minmax(0,1fr); }
  .riga__foto { width: 56px; height: 48px; }
  .riga__azioni { grid-column: 1 / -1; justify-content: flex-start; }
}

.pill {
  display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: .15rem .6rem; border-radius: 999px;
  background: var(--carta); color: var(--grigio); margin-inline-end: .35rem;
}
.pill--aperte { background: #d8f0e3; color: #04653a; }
.pill--in_arrivo { background: #fff0c8; color: #8a6200; }
.pill--chiuse { background: #e6e8f2; color: #4b5280; }
.pill--bozza { background: #ffe2d8; color: #a72d00; }

/* ---------------------------------------------------------------- */
/*  Pagine di accesso / installazione                                */
/* ---------------------------------------------------------------- */

body.tf-admin--auth {
  display: grid; place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(60% 60% at 18% 12%, rgba(0,110,205,.24), transparent 70%),
    radial-gradient(52% 52% at 86% 84%, rgba(241,22,149,.2), transparent 70%),
    var(--blu);
  padding: 2rem 1rem;
}
.auth-card {
  width: min(100%, 430px);
  background: #fff; border-radius: 24px; padding: 2.2rem;
  box-shadow: 0 30px 70px rgba(0,0,0,.3);
  text-align: start;
}
.auth-logo { width: 84px; height: 84px; margin: 0 auto 1.1rem; }
.auth-card h1 { text-align: center; margin-bottom: 1.2rem; }
.auth-intro { color: var(--grigio); font-size: .93rem; margin: 0 0 1.3rem; }
.auth-card .btn--largo { margin-top: 1.6rem; }
.auth-coda { text-align: center; margin: 1.5rem 0 0; font-size: .85rem; color: var(--grigio); }
.auth-coda a { color: var(--grigio); }

/* ---------------------------------------------------------------- */
/*  Guida alla formattazione                                         */
/* ---------------------------------------------------------------- */

details.guida { margin-top: .6rem; font-size: .88rem; }
details.guida summary { cursor: pointer; font-weight: 600; color: var(--azzurro); }
details.guida ul { margin: .6rem 0 0; padding-inline-start: 1.2rem; color: var(--grigio); }
details.guida code {
  background: var(--carta); padding: .05rem .35rem; border-radius: 5px;
  font-size: .9em; color: var(--blu);
}

/* ==================================================================== */
/*  Telefono e tablet                                                   */
/*                                                                      */
/*  Il pannello si usa anche dal telefono, in segreteria o da casa:      */
/*  deve restare comodo, non solo "non rotto".                          */
/* ==================================================================== */

/* Indirizzi e nomi di file lunghi vanno a capo invece di sfondare. */
code, .riga__titolo, .riga__meta, .file-attuale, .admin-intestazione p {
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .wrap, .wrap--stretto { width: min(100% - 1.5rem, 1060px); }

  /* La testata non resta appiccicata in alto: su uno schermo basso
     rubava un quinto dello spazio di lettura. */
  .admin-testata { position: static; padding: .55rem 0; }
  .admin-testata__riga { gap: .4rem .6rem; }

  .admin-marchio { font-size: .95rem; gap: .55rem; }
  .admin-marchio img { width: 34px; height: 34px; }

  .admin-nav {
    width: 100%; margin-inline-start: 0;
    gap: .2rem; row-gap: .25rem;
  }
  .admin-nav a {
    font-size: .85rem; padding: .4rem .7rem;
    min-height: 34px; display: inline-flex; align-items: center;
  }

  main.admin-main { padding: 1.25rem 0 3rem; }

  .card { padding: 1.15rem; border-radius: 16px; }
  .card > h2 { font-size: .92rem; }
  h1 { font-size: 1.35rem; }
}

@media (max-width: 560px) {
  /* Pulsanti: pieni e alti abbastanza da centrarli col pollice. */
  .btn { min-height: 44px; padding: .7rem 1.1rem; }
  .btn--piccolo { min-height: 38px; padding: .45rem .8rem; }

  .admin-intestazione { gap: .75rem; }
  .admin-intestazione .a-destra { margin-inline-start: 0; width: 100%; }
  .admin-intestazione .a-destra .btn { width: 100%; }

  .azioni-modulo { flex-direction: column; align-items: stretch; }
  .azioni-modulo .btn { width: 100%; }
  .azioni-modulo .a-destra { margin-inline-start: 0; }

  /* Elenco progetti: foto e testo in alto, comandi sotto a tutta riga. */
  .riga { padding: .8rem .9rem; gap: .75rem; }
  .riga__azioni { gap: .35rem; }
  .riga__azioni .btn { flex: 1 1 auto; }

  /* Scelta del colore: due colonne regolari invece di pillole sparse. */
  .colori { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .colore span { padding: .55rem .7rem .55rem .5rem; width: 100%; min-height: 44px; }

  .file-attuale { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .anteprima { width: 100%; max-width: 220px; }

  .auth-card { padding: 1.6rem 1.25rem; border-radius: 20px; }
  .auth-logo { width: 68px; height: 68px; }
}

/* -------------------------------------------------------------------- */
/*  Editor visuale su schermi stretti                                    */
/* -------------------------------------------------------------------- */

.tox.tox-tinymce {
  max-width: 100% !important;
  border-radius: 12px !important;
  border-color: var(--bordo) !important;
}

@media (max-width: 560px) {
  /* Pulsanti della barra più grandi e distanziati: si toccano col dito. */
  .tox .tox-tbtn { height: 36px !important; margin: 1px !important; }
  .tox .tox-toolbar__group { padding: 0 2px !important; }
  .tox .tox-statusbar { font-size: .75rem !important; }
  /* Il conteggio parole non serve su uno schermo piccolo. */
  .tox .tox-statusbar__wordcount { display: none !important; }
}

/* Barra strumenti da trascinare: sfumatura a destra finché c'è dell'altro.
   I due sfondi con `background-attachment` diverso sono il trucco classico:
   quello "local" scorre col contenuto e copre l'ombra quando si è in fondo. */
.tox .tox-toolbar--scrolling {
  background-image:
    linear-gradient(to left, var(--bianco), rgba(255, 255, 255, 0)),
    linear-gradient(to left, rgba(21, 39, 114, .18), rgba(21, 39, 114, 0));
  background-position: right center, right center;
  background-repeat: no-repeat;
  background-size: 24px 100%, 14px 100%;
  background-attachment: local, scroll;
}

/* Scelta di chi cura il progetto */
.referenti { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.referente { position: relative; margin: 0; }
.referente input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.referente span {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .5rem 1.1rem;
  border: 2px solid var(--bordo); border-radius: 999px;
  font-size: .9rem; font-weight: 600; cursor: pointer;
}
.referente input:checked + span {
  border-color: var(--blu); background: var(--blu); color: #fff;
}
.referente input:focus-visible + span { outline: 3px solid var(--giallo); outline-offset: 2px; }

@media (max-width: 560px) {
  .referenti { display: grid; grid-template-columns: 1fr; gap: .45rem; }
}