/*
 * app.css — Strato sottile sopra Tailwind.
 *
 * Qui stanno solo le classi ripetute decine di volte (input, bottoni, celle,
 * badge): tenerle come utility inline renderebbe il markup illeggibile senza
 * dare nulla in cambio. Stesso principio di .bdg/.prg nelle altre app dell'Hub.
 * Palette identica all'Hub: slate + arancio #ea580c, solo tema chiaro.
 */

[x-cloak] { display: none !important; }

/*
 * Shell: marchio + testata in alto, MENU ORIZZONTALE sotto, contenuto sotto.
 * Stesso schema di Social Studio (che ha spostato il menu dalla colonna di
 * sinistra a una barra in alto, come gli altri tool dell'Hub).
 * grid-template-areas non si esprime con le utility Tailwind → vive qui.
 */
.shell {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 4rem auto 1fr;
  grid-template-areas: "brand top" "nav nav" "main main";
  height: 100vh;
}
.shell > .brandcell { grid-area: brand; }
.shell > .topbar    { grid-area: top; }
.shell > .navbar {
  grid-area: nav;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.45rem 0.75rem;
  overflow-x: auto;          /* su schermi stretti la barra scorre, non va a capo */
  overflow-y: hidden;
}
/* min-width:0 = la colonna 1fr non si gonfia al contenuto (le tabelle larghe
   scrollano dentro <main>, non allargano la pagina). Vale anche per le due
   celle di testata: sotto gli 860px stanno nell'unica colonna della griglia e
   con un titolo lungo allargavano la PAGINA di un paio di pixel (a 390px:
   scrollWidth 392 contro 390) — il titolo ha già `truncate`, gli mancava solo
   il permesso di stringersi. */
.shell > .main { grid-area: main; min-width: 0; }
.shell > .brandcell,
.shell > .topbar { min-width: 0; }

/* le voci nella barra orizzontale stanno sulla loro larghezza, non al 100% */
.navbar .nav-item { width: auto; white-space: nowrap; flex: 0 0 auto; }

@media (max-width: 860px) {
  html, body { height: auto; }
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "brand" "top" "nav" "main";
    height: auto;
  }
  .shell > .brandcell { height: 3.25rem; }
  .shell > .topbar    { height: 3.25rem; }
  .shell > .main      { overflow: visible; }
}

.inp {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.875rem;
  background: #fff;
  color: #1e293b;
}
.inp:focus {
  outline: none;
  border-color: #ea580c;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, .12);
}
.inp:disabled { background: #f8fafc; color: #64748b; }

/* Campo "nudo" dentro le tabelle: si comporta come una cella, non come un box */
.inp-flat {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  padding: 0.25rem 0.35rem;
  font-size: 0.875rem;
  background: transparent;
}
.inp-flat:hover:not(:disabled) { border-color: #e2e8f0; }
.inp-flat:focus { outline: none; border-color: #ea580c; background: #fff; }
.inp-flat:disabled { color: #475569; }

/* Varianti compatte per i comandi in testata (posizione, allineamento,
   larghezza…): lì il campo sta ACCANTO ai pulsanti, non è un campo di modulo.
   Vanno espresse così e non con w-28/w-14 di Tailwind: `.inp-flat` è definito
   in questo foglio, che è caricato DOPO il build Tailwind, quindi il suo
   width:100% vincerebbe comunque sulle utility. */
.inp-flat.compatto { width: auto; max-width: 100%; }
.inp-flat.num      { width: 3.4rem; text-align: right; }

.lbl {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #475569;
  margin-bottom: 0.25rem;
}

.btn {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #1e293b;
  border-radius: 0.5rem;
  padding: 0.5rem 0.9rem;
  font-weight: 500;
}
.btn:hover { background: #f8fafc; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: #ea580c;
  color: #fff;
  border: 1px solid #ea580c;
  border-radius: 0.5rem;
  padding: 0.5rem 0.9rem;
  font-weight: 500;
}
.btn-primary:hover { background: #c2410c; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-mini {
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 0.375rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  margin-left: 0.25rem;
}
.btn-mini:hover { background: #f8fafc; }

.card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.card-head {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 600;
  font-size: 0.875rem;
}
.card-title { font-weight: 600; font-size: 0.875rem; }

.th { padding: 0.5rem 0.75rem; text-align: left; font-weight: 600; }
.td { padding: 0.5rem 0.75rem; vertical-align: top; }

.nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #475569;
  text-align: left;
}
.nav-item:hover { background: #f1f5f9; }
.nav-item-on { background: #fff7ed; color: #c2410c; font-weight: 600; }

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-grigio { background: #f1f5f9; color: #475569; }
.badge-blu    { background: #eff6ff; color: #1d4ed8; }
.badge-ok     { background: #ecfdf5; color: #047857; }
.badge-ko     { background: #fef2f2; color: #b91c1c; }
.badge-off    { background: #f8fafc; color: #94a3b8; }

.opt {
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.7rem;
  text-align: left;
}
.opt:hover { background: #f8fafc; }
.opt-on { border-color: #ea580c; background: #fff7ed; }

/* Albero struttura documento (editor a canvas, tab "Struttura"): ogni riga
   è cliccabile e seleziona lo stesso nodo che selezioneresti cliccando in
   pagina — un secondo modo di raggiungerlo, utile quando è fuori vista o
   dentro una colonna stretta. */
.cnv-albero-riga {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.4rem; border-radius: 0.375rem; font-size: 0.75rem;
  color: #475569; cursor: pointer;
}
.cnv-albero-riga:hover { background: #f8fafc; }
.cnv-albero-riga.attiva { background: #fff7ed; color: #c2410c; font-weight: 600; }
.cnv-albero-icona { font-size: 0.7rem; color: #94a3b8; width: 1rem; text-align: center; flex-shrink: 0; }
.cnv-albero-riga.attiva .cnv-albero-icona { color: #ea580c; }

/* Dropzone di caricamento immagine (drag&drop o click): stessa palette di
   .opt/.inp, bordo tratteggiato per segnalare "qui si rilascia qualcosa". */
.dropzone-img {
  border: 1.5px dashed #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.6rem;
  text-align: center;
  cursor: pointer;
  background: #f8fafc;
}
.dropzone-img:hover { border-color: #fdba74; background: #fff7ed; }
.dropzone-img.sopra { border-color: #ea580c; background: #fff7ed; }
.dropzone-img .dropzone-anteprima {
  max-width: 100%; max-height: 7rem; border-radius: 0.375rem; object-fit: contain;
  display: block; margin: 0 auto;
}

.passo {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.passo-ok { background: #ecfdf5; color: #047857; }

.touch-none { touch-action: none; }

/*
 * Editor del contenuto: fasce a colonne.
 * Le LARGHEZZE non stanno qui né in classi Tailwind: si scrivono come stile
 * inline (grid-template-columns) perché il build è purgato e una classe
 * costruita a runtime non esisterebbe nel CSS.
 */
.fascia {
  border: 1px dashed #fdba74;
  background: #fffbf7;
  border-radius: 0.6rem;
  padding: 0.75rem;
}
.fascia-griglia { display: grid; }
.fascia-col {
  display: flex;
  flex-direction: column;
  min-width: 0;                 /* senza, una colonna con testo lungo sfonda la griglia */
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 0.5rem;
  padding: 0.5rem;
}
.wdg {
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  padding: 0.4rem;
  margin-bottom: 0.4rem;
  background: #fff;
}

/* Comandi DENTRO una colonna di fascia (larghezza colonna, allineamento, e la
   barra del widget). A sei colonne la colonna è larga poco più di 100px mentre
   questa riga, tutta su una linea, ne chiede oltre 200: usciva dal riquadro e
   si sovrapponeva alla colonna accanto.
   Due difese in ordine: prima gli elementi VANNO A CAPO, poi — se la colonna è
   ancora più stretta — si STRINGONO. `min-width: 0` è la parte che conta: un
   elemento flex di suo non scende sotto la larghezza del proprio contenuto, e
   una <select> tiene la misura dell'opzione più lunga.
   Non sono utility Tailwind perché il build è purgato e queste regole
   riguardano un contesto (la colonna stretta), non una singola casella. */
.col-cmd,
.wdg-cmd { min-width: 0; }
.col-cmd > *,
.wdg-cmd > * { min-width: 0; max-width: 100%; }
.col-cmd select { flex: 0 1 auto; }
.col-cmd .inp-flat.num { width: 2.9rem; }

/* Il nome del widget cede il passo ai pulsanti: si accorcia con i puntini
   (il titolo per esteso resta nel tooltip). I pulsanti non si stringono mai —
   restano cliccabili — al massimo vanno sulla riga sotto. */
.wdg-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wdg-azioni { flex: none; }
.anteprima-frame {
  width: 100%;
  height: 60vh;
  min-height: 22rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #fff;
  display: block;
}

/* Su schermo stretto le colonne di una fascia si impilano: sei colonne da
   60px non sarebbero modificabili con un dito. */
@media (max-width: 700px) {
  .fascia-griglia { grid-template-columns: 1fr !important; }
}

@media (max-width: 700px) {
  .th, .td { padding: 0.4rem 0.5rem; }
}

/* ── Editor documento a PASSI ──────────────────────────────────────────────
   Prima era un muro di schede tutte uguali, senza un ordine: non diceva né
   cosa fare né in che sequenza. Ora ogni gruppo è un passo numerato, e la
   barra in alto tiene sempre in vista stato, totale e i comandi.
   Classi scritte a mano (non utility Tailwind) perché il build è PURGATO:
   una classe nuova non finirebbe nel CSS senza rigenerarlo. */
.barra-doc { position: sticky; top: 6px; z-index: 20; }
.barra-totale {
  display: inline-flex; align-items: baseline; gap: 6px; margin-left: 4px;
  padding: 3px 10px; border-radius: 999px; background: #fff7ed;
  border: 1px solid #fed7aa;
}
.barra-totale i { font-style: normal; font-size: 11px; color: #9a3412;
                  text-transform: uppercase; letter-spacing: .04em; }
.barra-totale b { font-size: 14px; font-weight: 700; color: #9a3412; }

.doc-passi-mappa {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid #f1f5f9;
}
.doc-passi-mappa > span {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
  border-radius: 999px; background: #f8fafc; border: 1px solid #e2e8f0;
  font-size: 12.5px; color: #64748b;
}
.doc-passi-mappa > span b {
  width: 17px; height: 17px; border-radius: 999px; background: #cbd5e1;
  color: #fff; font-size: 10.5px; display: flex; align-items: center;
  justify-content: center; font-weight: 700;
}
.doc-passi-mappa > span.fatto { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.doc-passi-mappa > span.fatto b { background: #16a34a; }

.doc-passo-testa { display: flex; align-items: center; gap: 11px; margin: 26px 0 10px; }
.doc-passo-num {
  width: 28px; height: 28px; border-radius: 999px; background: #ea580c; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex: none;
  box-shadow: 0 1px 4px rgba(234, 88, 12, .3);
}
.doc-passo-tit { font-size: 15.5px; font-weight: 600; color: #0f172a; line-height: 1.2; }
.doc-passo-sub { font-size: 12.5px; color: #64748b; margin-top: 2px; }