/* ==========================================================================
   ADMIN — barra dell'amministratore, interruttori dei blocchi, Anteprima ospiti (js/admin.js) e pagine di admin.html (js/admin-pannello.js).
   Solo variabili di css/theme.css. Mobile-first. Gli ospiti non vedono nulla di tutto questo (tutto dipende da html.admin).
   ========================================================================== */

/* ---- Seconda barra, sotto quella del sito (stessa pillola vetro, più piccola) ---- */
.admin-nav {
  position: fixed; z-index: 11; left: 50%; transform: translateX(-50%); top: .75rem;
  max-width: calc(100% - 1.5rem); display: flex; gap: .2rem; padding: .25rem;
  overflow-x: auto; scrollbar-width: none;
  background: var(--c-salvia-scuro); border-radius: 999px; box-shadow: var(--ombra);
}
.admin-nav::-webkit-scrollbar { display: none; }
body:has(> .nav) .admin-nav { top: 3.9rem; }   /* sotto la barra del sito, senza spostarla */
.admin-nav a, .admin-nav button {
  padding: .3rem .75rem; border: 0; border-radius: 999px; background: none; color: var(--c-su-accento); cursor: pointer;
  font: 400 .68rem var(--f-testo); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.admin-nav a.is-attivo, .admin-nav a:hover, .admin-nav button:hover { background: var(--c-fascia-velo-forte); }
html.admin { scroll-padding-top: 7rem; }
html.admin-anteprima .admin-nav { display: none; }

/* ---- Anteprima ospiti: pulsante fisso in basso a destra (resta anche in anteprima, per uscirne) ---- */
.admin-anteprima-btn {
  position: fixed; z-index: 11; right: .75rem; bottom: .75rem; padding: .55rem 1rem; cursor: pointer;
  border: 1px solid var(--c-salvia-scuro); border-radius: 999px; background: var(--c-superficie); color: var(--c-salvia-scuro); box-shadow: var(--ombra);
  font: 400 .7rem var(--f-testo); letter-spacing: .12em; text-transform: uppercase;
}
.admin-anteprima-btn[aria-pressed="true"] { background: var(--c-salvia-scuro); color: var(--c-su-accento); }

/* ---- Interruttori sui blocchi della home ---- */
html.admin section[data-feature] { position: relative; }
.admin-chip {
  display: flex; flex-wrap: wrap; gap: .35rem .9rem; width: fit-content; max-width: calc(100% - 1.5rem); margin: 0 0 1rem; padding: .4rem .8rem;
  border-radius: var(--raggio-campo); background: var(--c-superficie); color: var(--c-testo); box-shadow: var(--ombra);
  font: 400 .78rem/1.3 var(--f-testo); text-align: left;
}
section > .admin-chip { position: absolute; z-index: 5; top: .75rem; right: .75rem; margin: 0; }
html.admin-anteprima .admin-chip { display: none; }
.admin-voce { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.admin-voce span { text-transform: none; letter-spacing: normal; font-size: .82rem; color: var(--c-testo); }
.admin-voce input { accent-color: var(--c-salvia-scuro); width: 1.1rem; height: 1.1rem; margin: 0; }
/* Blocchi spenti: l'admin li vede tratteggiati e un po' sbiaditi */
html.admin-tutto .admin-spento { outline: 2px dashed var(--c-accento); outline-offset: -6px; }
html.admin-tutto .admin-spento > :not(.admin-chip) { opacity: .55; }
html.admin-tutto .nav a.admin-spento { outline-offset: -2px; }

/* ---- Pagine del pannello (admin.html) ---- */
.pannello { width: min(100% - 2 * var(--margine), var(--larghezza)); margin: 0 auto; padding: 4.5rem 0 4rem; }
.pannello__titolo { font: var(--stile-titoli) var(--peso-titoli) var(--t-h2)/1.05 var(--f-titoli); margin: 1rem 0 .5rem; }
.pannello .intro { margin-bottom: 1.25rem; }
.pannello__blocco { margin: 0 0 2.25rem; }
.pannello__blocco h2 { font-size: 1.6rem; margin-bottom: .75rem; }
.pannello__azioni { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem 1rem; margin-bottom: 1rem; color: var(--c-testo-soft); }
.pannello label:not(.admin-voce) { display: grid; gap: .25rem; font-size: .85rem; color: var(--c-testo-soft); }
.pannello input, .pannello select {
  font: inherit; color: var(--c-testo); padding: .55rem .75rem; border: 1px solid var(--c-linea); border-radius: var(--raggio-campo); background: var(--c-superficie);
}
.pannello__form { display: grid; gap: .75rem; margin-bottom: 1.25rem; }
.pannello__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pannello__lista li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: .7rem .9rem; border: 1px solid var(--c-linea); border-radius: var(--raggio-campo); background: var(--c-superficie);
}
.pannello__link { word-break: break-all; padding: .7rem .9rem; border-radius: var(--raggio-campo); background: var(--c-sfondo-alt); }
.qr { width: min(100%, 16rem); margin-top: 1.25rem; padding: .5rem; background: var(--c-superficie); border-radius: var(--raggio-campo); }
.qr svg { display: block; width: 100%; height: auto; }

/* Tabelle: scorrono in orizzontale sul telefono, intestazione ferma */
.tabella { overflow: auto; max-height: 70vh; border: 1px solid var(--c-linea); border-radius: var(--raggio-campo); background: var(--c-superficie); }
.tabella table { border-collapse: collapse; width: 100%; font-size: .85rem; line-height: 1.4; }
.tabella th, .tabella td { padding: .55rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-linea); white-space: nowrap; }
.tabella td { max-width: 22rem; white-space: normal; min-width: 6rem; }
.tabella th { position: sticky; top: 0; background: var(--c-sfondo-alt); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: .7rem; }

/* Cruscotto: numeri, andamento, promemoria */
.numeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .6rem; }
.numero { display: grid; padding: .8rem .9rem; border: 1px solid var(--c-linea); border-radius: var(--raggio-campo); background: var(--c-superficie); }
.numero strong { font: 300 2.2rem/1 var(--f-titoli); font-variant-numeric: tabular-nums; }
.numero span { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-testo-soft); }
.andamento { margin: 0; }
.andamento svg { display: block; width: 100%; height: 9rem; fill: var(--c-salvia-scuro); border-bottom: 1px solid var(--c-linea); }
.andamento rect:hover { fill: var(--c-accento); }
.andamento figcaption { display: flex; justify-content: space-between; align-items: baseline; font-size: .75rem; color: var(--c-testo-soft); }
.andamento figcaption strong { font: 300 1.6rem var(--f-titoli); color: var(--c-testo); }
.promemoria { margin: 0 0 1rem; padding-left: 1.2rem; }
.promemoria .passato { color: var(--c-testo-soft); text-decoration: line-through; }

@media (min-width: 48rem) {
  .pannello { padding-top: 6rem; }
  .pannello__form { grid-template-columns: repeat(3, 1fr) auto; align-items: end; }
  .pannello__form .esito { grid-column: 1 / -1; }
}