/* ============================================================
   CMC Commerciale — tema da MOCKUP Configuratore Listini
   (stile CMC_Matricole: slate #1E293B, verde #2A8E3D, blu #3B82F6)
   ============================================================ */
:root {
  --slate: #1E293B; --slate2: #172033; --slate-hover: #374151; --slate-line: #31405A;
  --accent: #3B82F6; --accent-press: #2563EB; --accent-soft: #E8F0FC;
  --green: #2A8E3D; --green-h: #24802f; --orange: #E8890C;
  --bg: #F5F6FA; --surface: #FFFFFF; --card-border: #E0E6ED; --divider: #E5E7EB;
  --grid-head: #E9ECEF; --row-alt: #F7F8FA; --row-hover: #EEF3FF; --row-sel: #D9E4FF;
  --focus: #0078D7;
  --text: #1E293B; --text2: #475569; --text3: #8A97A8;
  --ok: #1F7A44; --ok-bg: #E7F5EC; --warn: #B9770B; --warn-bg: #FBF1DD;
  --danger: #C4342B; --danger-bg: #FBE7E5;
  --el: #2563EB; --el-bg: #E6EEFC; --ju: #0E7C86; --ju-bg: #DCF1F2; --tr: #7A4CC2; --tr-bg: #EEE6F9;
  --mono: 'Cascadia Code', 'Consolas', ui-monospace, monospace;
  --sans: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

/* solo le pagine con _Layout (classe .shell-body) bloccano lo scroll di pagina:
   scorrono solo .content (e la sidebar) al loro interno. Le pagine con Layout = null
   (Login, Error, AccessDenied) restano scrollabili normalmente, non hanno l'app-shell.
   Senza questo, .app-shell cresceva oltre 100vh e lo scroll lo faceva il body intero —
   così né lo sticky né la cornice fissa (topbar/sidebar) funzionavano. */
body.shell-body { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  font-size: 14px;
}

/* ---------- shell app: topbar + sidebar ---------- */
.app-shell { display: flex; flex-direction: column; height: 100vh; }

/* topbar scura come l'app desktop CMC: il logo (PNG trasparente) ci sta sopra direttamente */
.topbar {
  display: flex; align-items: stretch;
  background: var(--slate);
  /* filo rosso CMC: nella schermata di accesso il rosso del marchio è ovunque (logo, esagoni),
     dentro l'app non compariva mai. Qui è decorativo, non uno stato: non entra in conflitto con
     il rosso funzionale di .btn.danger */
  border-bottom: 2px solid #C8102E;
  height: 74px;
}

/* lockup del portale: stessa tipografia della login (vedi .login-card .kicker/h1) */
.topbar .wordmark {
  display: flex; flex-direction: column; justify-content: center;
  text-decoration: none; line-height: 1.15; padding: 4px 2px;
}
.topbar .wordmark .kicker {
  font-family: 'Bahnschrift', 'Segoe UI Semibold', var(--sans);
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .38em; padding-left: .38em; color: #7c8aa0;
}
.topbar .wordmark .titolo {
  font-family: 'Bahnschrift', 'Segoe UI Semibold', var(--sans);
  font-size: 15px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: #e2e8f0; white-space: nowrap;
}
.topbar .wordmark:hover .titolo { color: #fff; }
@media (max-width: 720px) {
  .topbar .wordmark { display: none; } /* su schermo stretto vince il nome utente */
}
.topbar .brand {
  display: flex; align-items: center;
  padding: 0 18px;
}
/* il logo del cliente (CMC) deve prevalere su quello Global nel footer del menu */
.topbar .brand img { height: 58px; display: block; }
.topbar .topbar-main {
  flex: 1; display: flex; align-items: center; gap: 14px;
  padding: 0 16px;
}
.topbar .spacer { flex: 1; }

.userchip { display: flex; align-items: center; gap: 8px; color: #cbd5e1; font-size: 13px; font-weight: 600; text-decoration: none; border-radius: 999px; padding: 4px 10px 4px 4px; transition: background-color .15s; }
.userchip:hover { background: rgba(255, 255, 255, .08); color: #cbd5e1; }
.userchip .av {
  width: 30px; height: 30px; border-radius: 50%;
  background: #334155; display: grid; place-items: center;
  color: #e2e8f0; font-size: 12px; font-weight: 700;
}
.userchip .role { color: #7c8aa0; }

.tbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 15px;
  border-radius: 8px; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: #fff;
  text-decoration: none;
}
.tbtn.green { background: var(--green); } .tbtn.green:hover { background: var(--green-h); }
.tbtn.ghost { background: transparent; color: #cbd5e1; font-weight: 600; } .tbtn.ghost:hover { background: #28344a; }
.tbtn.help { background: var(--orange); } .tbtn.help:hover { filter: brightness(.95); }

.body-wrap { display: flex; flex: 1; min-height: 0; }

/* sidebar a icone: collassata di default (60px), espansa 232px */
.side {
  width: 60px; flex: 0 0 60px;
  display: flex; flex-direction: column;
  background: var(--slate); color: #cbd5e1;
  padding: 10px 8px 16px;
  overflow-x: hidden; overflow-y: auto;
  transition: width .18s ease, flex-basis .18s ease;
}
.side.expanded { width: 232px; flex: 0 0 232px; }

.side a, .side button.sidelink {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 11px; border-radius: 7px; border: 0; background: transparent;
  color: #cbd5e1; font-size: 13.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none; position: relative; text-align: left;
  white-space: nowrap;
}
.side a svg, .side button.sidelink svg { width: 20px; height: 20px; flex: 0 0 20px; }
.side .lbl { display: none; }
.side.expanded .lbl { display: inline; }

.side a:hover, .side button.sidelink:hover { background: var(--slate-hover); color: #fff; }
.side a.on { background: #0f1826; color: #fff; }
.side a.on::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 2px; background: var(--accent);
}
.side a.on svg { color: var(--accent); }
.side a.danger, .side button.sidelink.danger { color: #f2a3a0; }

.side .burger { margin-bottom: 10px; color: #fff; }

/* intestazioni di gruppo: testo quando espansa, riga divisoria quando a icone */
/* titoli di gruppo del menu (LISTINI / ANAGRAFICHE / SISTEMA): il trattino rosso CMC riprende il
   filo della topbar e il marchio della schermata di accesso. Il rosso sta nel segno, non nel testo:
   #C8102E su slate avrebbe un contrasto troppo basso per essere letto bene */
.side .grp {
  font-size: 10.5px; letter-spacing: .09em; font-weight: 800; color: #7c8aa0;
  padding: 16px 11px 7px; white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
}
.side .grp::before {
  content: ""; flex: 0 0 14px; height: 2px; border-radius: 2px; background: #C8102E;
}
.side:not(.expanded) .grp {
  font-size: 0; padding: 0; height: 0;
  margin: 11px 10px; border-top: 1px solid var(--slate-line);
}
/* menu ridotto a icone: il titolo sparisce e resta il separatore, che diventa esso stesso il segno rosso */
.side:not(.expanded) .grp { border-top-color: rgba(200, 16, 46, .55); }
.side:not(.expanded) .grp::before { display: none; }

/* logo Global in fondo al menu (sostituisce il footer): margin-top:auto lo spinge
   in basso nella nav a colonna. A icone (60px) è illeggibile: si nasconde. */
.side-brand { margin-top: auto; padding: 16px 14px 6px; text-align: center; flex: 0 0 auto; }
.side-brand img { max-width: 100px; height: auto; display: inline-block; opacity: .85; }
.side:not(.expanded) .side-brand { display: none; }

.content { flex: 1; min-width: 0; background: var(--bg); display: flex; flex-direction: column; overflow: auto; }

/* ---------- page header ---------- */
.phead { padding: 20px 26px 0; background: var(--bg); }

/* resta visibile scorrendo l'albero: titolo + tag linea + pill Tipo/Versione/Lingua
   sono il contesto di lettura, utile non doverli perdere su alberi lunghi (Modelli/Struttura) */
.phead.sticky {
  position: sticky; top: 0; z-index: 5;
  padding-bottom: 14px; box-shadow: 0 2px 6px rgba(15, 23, 42, .06);
}
.phrow { display: flex; align-items: center; gap: 12px; }
/* quando la testata porta anche i filtri pill (Modelli/Struttura), va a capo su schermi stretti */
.phrow.wrap { flex-wrap: wrap; row-gap: 10px; }
.h1 { font-size: 22px; font-weight: 700; color: var(--text); margin: 0; letter-spacing: -.01em; }
.sub { font-size: 12.5px; color: var(--text2); margin-top: 3px; }
/* sottotitolo con il chip Linea inline: niente testo semplice "TRADIZIONALE/ELETTRICA/JUMBO"
   a fianco della chip, sempre colorata come da convenzione (vedi _TagLinea) */
.sub.sub-tag { display: flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }

/* ---------- buttons (sempre con icona) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px;
  border-radius: 9px; border: 1px solid transparent;
  font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }
.btn.sm svg { width: 14px; height: 14px; flex: 0 0 14px; }

.btn.pri { background: var(--green); color: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.10); }
.btn.pri:hover { background: var(--green-h); }
.btn.blue { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.10); }
.btn.blue:hover { background: var(--accent-press); }
.btn.out { background: #fff; color: var(--text); border-color: #d5dce6; }
.btn.out:hover { border-color: var(--accent); color: var(--accent); }
.btn.ghost { background: transparent; color: var(--text2); }
.btn.ghost:hover { background: #e9edf3; color: var(--text); }
/* azioni distruttive: sempre rosse */
.btn.danger { background: #fff; color: var(--danger); border-color: #efc7c3; }
.btn.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* bottone di sola icona, es. la matita di modifica accanto a un titolo */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px;
  border: 1px solid #d5dce6; background: #fff; color: var(--text2); cursor: pointer;
}
.btn-icon:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn-icon svg { width: 15px; height: 15px; }

/* ---------- filtri ---------- */
.filters { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 16px 0 4px; }
.filter { display: flex; flex-direction: column; gap: 6px; }
.filter-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--text2);
}
.filter-label svg { width: 14px; height: 14px; color: var(--accent); }
.filter select, .filter input[type="text"], .filter input[type="search"] {
  height: 40px; min-width: 210px; box-sizing: border-box;
  border: 1px solid #d5dce6; border-radius: 9px; background: #fff;
  padding: 0 12px; font-family: inherit; font-size: 13.5px; color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
.filter select {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.filter select:hover, .filter input:hover { border-color: #b7c2d1; }
.filter select:focus, .filter input:focus {
  outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.16);
}
.filter input::placeholder { color: var(--text3); }

/* filtri a pill (pochi valori) */
.pillbar { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin: 14px 0 2px; }
/* variante compatta: tutti i gruppi centrati sulla stessa riga, pill più piccole — per header
   dove i filtri altrimenti andrebbero a capo su due righe (Struttura, Listini Linee) */
.pillbar-compact { justify-content: center; gap: 18px; margin: 10px 0 2px; }
.pillbar-compact .pill-title { font-size: 10px; }
.pillbar-compact .pill-btn { height: 26px; padding: 0 11px; font-size: 11.5px; }
/* variante in linea: i filtri stanno DENTRO la riga del titolo, dopo i bottoni del modello,
   invece di prendersi una riga tutta loro (editor Struttura) */
.pillbar-inline { margin: 0 0 0 20px; justify-content: flex-start; flex: 0 1 auto; }
.pill-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pill-title {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text3); margin-right: 2px;
}
.pill-title svg { width: 13px; height: 13px; color: var(--accent); }
.pill-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 15px; border-radius: 999px;
  border: 1px solid #dbe1ea; background: #fff; color: var(--text2);
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: .12s;
}
.pill-btn:hover { border-color: var(--accent); color: var(--accent); }
.pill-btn.on { background: var(--slate); border-color: var(--slate); color: #fff; }
.pill-btn .n {
  font-size: 11px; font-weight: 700; color: var(--text3);
  background: #eef1f5; border-radius: 999px; padding: 0 6px;
}
.pill-btn.on .n { background: rgba(255,255,255,.18); color: #fff; }

/* checkbox travestita da pill (gruppi Famiglie/Lingue nei form): stessa palette del
   pill-btn, ma è un vero checkbox — colorata quando selezionata, larghezza fissa
   per un allineamento a griglia ordinato invece del wrap irregolare del check-line */
.pill-check-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-check {
  display: inline-flex; align-items: center; gap: 6px;
  width: 200px; height: 34px; padding: 0 13px; border-radius: 999px;
  border: 1px solid #dbe1ea; background: #fff; color: var(--text2);
  font-size: 12.5px; font-weight: 700; cursor: pointer; transition: .12s;
}
.pill-check:hover { border-color: var(--accent); }
/* anche i radio: nel wizard la copertina è una scelta singola, ma la pill è la stessa */
.pill-check input[type="checkbox"], .pill-check input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.pill-check .pc-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-check .pc-count {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text3);
  background: #eef1f5; border-radius: 999px; padding: 0 6px; flex: 0 0 auto;
}
.pill-check:has(input:checked) { background: var(--slate); border-color: var(--slate); color: #fff; }
.pill-check:has(input:checked) .pc-count { background: rgba(255,255,255,.18); color: #fff; }
.pill-check:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }

/* i modelli collegabili a un'immagine sono centinaia: il gruppo di spunte sta dentro una
   cornice che scorre, così il resto del form non finisce fuori schermo */
.scrollbox {
  max-height: 210px; overflow-y: auto; padding: 10px;
  border: 1px solid var(--card-border); border-radius: 10px; background: #fbfcfe;
}

/* ---------- badges / tag / pill ---------- */
.tag { display: inline-flex; align-items: center; gap: 5px; border-radius: 5px; padding: 2px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-decoration: none; }
a.tag:hover { filter: brightness(0.93); cursor: pointer; }
.tag .d { width: 7px; height: 7px; border-radius: 50%; }
.tag.el { background: var(--el-bg); color: var(--el); } .tag.el .d { background: var(--el); }
.tag.ju { background: var(--ju-bg); color: var(--ju); } .tag.ju .d { background: var(--ju); }
.tag.tr { background: var(--tr-bg); color: var(--tr); } .tag.tr .d { background: var(--tr); }

/* tipo di blocco nella sequenza del compositore (mai riusare .tag.el/.ju/.tr: quelli sono le linee) */
.tag.k-cov { background: var(--accent-soft); color: var(--accent-press); }
.tag.k-dati { background: var(--ok-bg); color: var(--ok); }
.tag.k-sep { background: var(--warn-bg); color: var(--warn); }
.tag.k-testo { background: var(--tr-bg); color: var(--tr); }
.tag.k-fig { background: #eef1f5; color: var(--text2); }
.tag.k-idx { background: var(--ju-bg); color: var(--ju); }

.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 5px; padding: 2px 8px; font-size: 11.5px; font-weight: 700; }
.badge.draft { background: #eef1f5; color: #64748b; }
.badge.val { background: var(--ok-bg); color: var(--ok); }
.badge.pub { background: #e6eefc; color: #1d4ed8; }
.badge.arch { background: #e9edf2; color: #7b8798; }

.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; }
.pill.err { background: var(--danger-bg); color: var(--danger); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
/* percentuale di una variante di listino prezzi: e' un dato, non uno stato — rosso,
   giallo e verde direbbero un allarme che qui non c'e' */
.pill.perc { background: #eef1f6; color: var(--slate); border: 1px solid #dbe1ea; }

/* ---------- banner ---------- */
.banner { display: flex; align-items: flex-start; gap: 9px; border-radius: 8px; padding: 9px 11px; font-size: 12.5px; margin: 12px 0; line-height: 1.45; }
.banner svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; }
.banner.warn { background: var(--warn-bg); color: #8a5a06; }
.banner.err { background: var(--danger-bg); color: #9d2b23; }
.banner.info { background: #e9f0fb; color: #2b5599; }
.banner.ok { background: var(--ok-bg); color: #176437; }

/* ---------- card ---------- */
.card { border: 1px solid var(--card-border); border-radius: 8px; background: #fff; padding: 12px; margin: 12px 0; }
.card .ct { font-size: 12px; font-weight: 700; color: #64748b; letter-spacing: .03em; margin-bottom: 9px; text-transform: uppercase; }

/* ---------- data grid (card staccata dai bordi pagina) ---------- */
.gridwrap {
  margin: 16px 26px 0; min-width: 0; overflow-x: auto;
  background: #fff; border: 1px solid var(--card-border); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
table.dg { width: 100%; border-collapse: collapse; font-size: 13px; }
table.dg thead th {
  background: #f7f9fc; color: var(--text2);
  text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .05em;
  padding: 12px 14px; border-bottom: 1px solid var(--card-border); white-space: nowrap;
}
table.dg td { padding: 11px 14px; border-bottom: 1px solid #f1f4f8; vertical-align: middle; color: #333; }
table.dg tbody tr:last-child td { border-bottom: 0; }
table.dg tbody tr:hover { background: var(--row-hover); }
.nm { font-weight: 700; color: #1e293b; }
.nm2 { font-size: 12px; color: #64748b; font-weight: 500; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.row-actions { display: flex; gap: 7px; justify-content: flex-end; }

/* riga di qualcosa che non e' piu' attivo (listini prezzi disattivati e le loro varianti):
   resta leggibile, ma smorzata, cosi' si distingue a colpo d'occhio da quello operativo */
table.dg tbody tr.off td { background: var(--grid-head); color: var(--text2); }
table.dg tbody tr.off td .nm, table.dg tbody tr.off .nm, table.dg tbody tr.off .nm2 { color: var(--text3); }
/* l'hover scurisce, non schiarisce: con un grigio gia' marcato, --row-hover (piu' chiaro
   del fondo) avrebbe fatto sembrare la riga "accesa" proprio mentre ci passi sopra */
table.dg tbody tr.off:hover td { background: #DFE3E9; }

/* riga-intestazione di un raggruppamento dentro una griglia (i modelli per linea nella
   propagazione): non è un'altra tabella, è un respiro dentro la stessa */
table.dg tbody tr.gruppo td { background: var(--row-alt); padding-top: 10px; padding-bottom: 10px; }
table.dg tbody tr.gruppo:hover td { background: var(--row-alt); }
table.dg tbody tr.gruppo .nm2 { margin-left: 8px; }

/* ---------- albero struttura di un modello (Modelli/Struttura) ---------- */
table.dg.stru td { padding: 9px 14px; }
table.dg.stru .q { color: var(--text3); font-size: 12.5px; width: 40px; }
table.dg.stru .r { text-align: right; }
/* prezzo: verde + € sempre, per non confonderlo a colpo d'occhio con una misura (mm, m³/h) */
table.dg.stru .eur { font-family: var(--mono); font-weight: 700; color: var(--ok); }
.eur { font-family: var(--mono); font-weight: 700; color: var(--ok); }
table.dg.stru .miss { font-size: 12px; color: var(--danger); font-style: italic; }
table.dg.stru tr.n-sez.l1 td { background: var(--grid-head); font-weight: 800; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--text2); }
table.dg.stru tr.n-sez.l2 td { background: #f3f5f9; font-size: 12px; font-weight: 700; color: var(--text2); }
table.dg.stru tr.n-desc td { color: var(--text3); font-size: 12.5px; }
table.dg.stru tr.n-base td { background: var(--accent-soft); font-weight: 600; }
table.dg.stru tr.n-err td { background: var(--danger-bg); }
table.dg.stru tr.n-img td { padding: 12px 14px; }
table.dg.stru .figura { display: flex; align-items: center; gap: 12px; }
table.dg.stru .figura img { max-width: 130px; max-height: 90px; border: 1px solid var(--card-border); border-radius: 6px; background: #fff; object-fit: contain; }
/* riga appena aggiunta: scroll+evidenzia temporaneo (site.js), deve vincere su n-sez/n-desc/ecc. */
/* Riga appena aggiunta/spostata, o sezione da cui si è appena eliminato. Stesso segnale
   della sequenza nel compositore (.seqitem.hit): anello arancione più sfondo caldo. Prima
   era un verde pallido senza bordo, e su una tabella già colorata per tipo di nodo non lo
   notava nessuno — sembrava che la funzione non ci fosse. */
table.dg.stru tr.hit td {
  background: var(--warn-bg) !important;
  box-shadow: inset 0 3px 0 var(--orange), inset 0 -3px 0 var(--orange);
  transition: background-color .6s ease;
}
table.dg.stru tr.hit td:first-child { box-shadow: inset 3px 0 0 var(--orange), inset 0 3px 0 var(--orange), inset 0 -3px 0 var(--orange); }
table.dg.stru tr.hit td:last-child { box-shadow: inset -3px 0 0 var(--orange), inset 0 3px 0 var(--orange), inset 0 -3px 0 var(--orange); }

/* ---------- form ---------- */
/* etichetta del campo vero (non la nota sotto): più scura e con un accento a sinistra,
   così spezza visivamente il form e si distingue subito dalle note field-hint (più chiare) */
.field-label {
  display: block; font-size: 12px; font-weight: 800; color: var(--text); letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 7px; padding-left: 8px;
  border-left: 3px solid var(--accent);
}
.field-input {
  width: 100%; height: 40px; border: 1px solid #cbd5e1; border-radius: 8px;
  padding: 0 12px; font-family: inherit; font-size: 14px; color: var(--text); background: #fff;
}
.field-input:focus { outline: 2px solid var(--focus); border-color: var(--focus); }
.validation-error { color: var(--danger); font-size: 12.5px; margin-top: 4px; display: block; }

/* Nota esplicativa sotto un campo, sempre con la stessa scaletta:
   "Serve a" (a cosa serve) → "Si vede" (dove compare) → "Nota" (contesto/effetto).
   Le etichette in colonna allineata rendono le note confrontabili fra un campo e l'altro.
   Un filo separatore + toni più chiari la staccano dal campo vero: senza, "SERVE A" ecc.
   (grassetto, maiuscolo) competeva visivamente con l'etichetta del campo sopra l'input. */
/* Partono NASCOSTE. Con una spiegazione sotto ogni campo il form è lungo il triplo e chi lo
   apre la prima volta si spaventa; ma servono, quindi non si tolgono: si mostrano tutte
   insieme col bottone "Spiegazioni" che site.js aggiunge in testata alle pagine che ne
   hanno. La scelta resta memorizzata, perché chi le vuole le vuole sempre. */
.field-hint {
  display: none; margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--divider);
  font-size: 12px; line-height: 1.45; color: var(--text3);
}
body.spiegazioni .field-hint { display: block; }

/* la riga col bottone "Mostra indicazioni", in alto a destra dentro il riquadro del form:
   la aggiunge site.js solo dove ci sono note da mostrare */
.hint-bar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.field-hint em { font-style: normal; color: var(--text2); font-weight: 600; }

/* versione a scaletta: etichette allineate in colonna, note confrontabili fra campi */
.field-hint.scaletta { grid-template-columns: max-content minmax(0, 1fr); gap: 4px 10px; }
body.spiegazioni .field-hint.scaletta { display: grid; }
.field-hint.scaletta > b {
  color: var(--text3); font-weight: 600; white-space: nowrap;
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase; padding-top: 1px;
}

/* select nei form CRUD: stessa resa dei filtri */
select.field-input {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* tre campi Lunghezza/Profondità/Altezza raggruppati sotto un'unica etichetta e un'unica
   nota: prima erano 3 colonne separate + una 4a colonna di sola nota, e la nota (più alta
   dei singoli input) lasciava un vuoto sotto ciascun campo numerico */
.dim-group { display: flex; align-items: center; gap: 8px; }
.dim-group .field-input { text-align: center; }
.dim-group .dim-x { color: var(--text3); font-weight: 600; flex: 0 0 auto; }

/* pagine form CRUD */
.form-page { padding: 4px 26px 26px; max-width: 880px; }
/* form con più colonne (immagine + campi, terne di lingue): 880px li manderebbe a capo */
.form-page.wide { max-width: 1240px; }
.form-page.wide .form-col { min-width: 190px; }
.form-card { padding: 22px; border-radius: 12px; box-shadow: 0 1px 3px rgba(15, 23, 42, .05); }
.form-row { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.form-col { flex: 1; min-width: 220px; }
.form-actions { display: flex; gap: 10px; padding-top: 14px; border-top: 1px solid var(--divider); }
.check-group { display: flex; gap: 22px; flex-wrap: wrap; padding: 8px 0; }
.check-line {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer;
}
.check-line input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

/* anteprime asset (immagini e PDF) */
.asset-thumb {
  width: 60px; height: 60px; object-fit: cover;
  border: 1px solid var(--card-border); border-radius: 8px; display: block;
  background: #fff;
}
.asset-pdf {
  width: 60px; height: 60px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--danger-bg); color: var(--danger);
  font-size: 12px; font-weight: 800; text-decoration: none;
  border: 1px solid #efc7c3;
}
.asset-pdf:hover { background: var(--danger); color: #fff; }

/* anteprima nel form: immagine e PDF (reso dal visualizzatore del browser) */
.asset-preview-box { min-height: 60px; }
.asset-preview {
  display: block; width: 100%; max-height: 180px; object-fit: contain;
  border: 1px solid var(--card-border); border-radius: 10px; background: #fff; padding: 6px;
}
.asset-preview-pdf {
  display: block; width: 100%; height: 224px;
  border: 1px solid var(--card-border); border-radius: 10px; background: #fff;
}

/* griglia prezzi editabile */
.prezzo-form { display: flex; align-items: center; gap: 7px; }
/* la domanda "propago anche alle varianti?" sta sulla riga, non in una modale: sui prezzi
   si lavora a raffica e un popup a ogni salvataggio sarebbe inservibile */
.propaga-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text2); white-space: nowrap; cursor: pointer; }
.propaga-chk input { margin: 0; cursor: pointer; }
.prezzo-wrap { position: relative; display: inline-block; }
.prezzo-input {
  width: 120px; height: 32px; text-align: right; padding-right: 26px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.prezzo-unit {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text3); font-size: 12.5px; pointer-events: none;
}

/* ---------- login page ---------- */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--slate);
}
/* sfondo full-screen (png riflesso: cabina a sinistra): la card va nell'area chiara a destra.
   Il velo bianco sopra l'immagine ne riduce l'opacità e fa risaltare il form. */
.login-page.bg {
  position: relative;
  background-color: #eef0f3;
  background-image: linear-gradient(rgba(255, 255, 255, .32), rgba(255, 255, 255, .32)),
                    url('../img/login_bg.png');
  background-repeat: no-repeat;
  background-position: center left;
  background-size: cover;
  justify-content: flex-end;
  padding-right: clamp(24px, 9vw, 150px);
}
@media (max-width: 900px) {
  .login-page.bg { justify-content: center; padding-right: 0; }
}

/* logo Global Business centrato in basso: chip colorato (il logo ha testo bianco) */
.login-gb {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: #1e293b2e; border-radius: 8px;
  padding: 10px 18px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .15);
}
.login-gb img { height: 52px; display: block; }
.login-card {
  width: 450px; max-width: calc(100vw - 32px);
  border-radius: 10px;
  padding: 30px 32px;
}
.login-card .logo { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; }
.login-card .logo img { height: 80px; }
.login-card .kicker {
  font-family: 'Bahnschrift', 'Segoe UI Semibold', var(--sans);
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .38em;
  color: var(--text2);
  text-align: center; margin-bottom: 2px;
  /* compensa otticamente il letter-spacing finale */
  padding-left: .38em;
}
.login-card h1 {
  font-family: 'Bahnschrift', 'Segoe UI Semibold', var(--sans);
  font-size: 27px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap;
  color: var(--slate);
  margin: 0 0 4px; text-align: center;
}
@media (max-width: 520px) {
  .login-card h1 { font-size: 21px; }
}
.login-card .sub { text-align: center; margin-bottom: 20px; }
.login-card .btn { width: 100%; justify-content: center; margin-top: 16px; }

/* ---------- modale di conferma ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(15, 23, 42, .5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: modalFadeIn .15s ease;
}
/* la conferma può aprirsi SOPRA la modale di contenuto (es. "Modifica struttura" dentro "Vedi
   struttura"): senza questo vince l'ordine nel DOM (contentBackdrop viene dopo in _Layout.cshtml)
   e la conferma resta invisibile dietro, sembra che il click non faccia nulla */
#confirmBackdrop { z-index: 2050; }
.modal-backdrop[hidden] { display: none; }
.modal-box {
  width: 100%; max-width: 400px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
  padding: 28px 26px 24px;
  text-align: center;
  animation: modalPopIn .16s ease;
}
.modal-icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  background: var(--danger-bg); color: var(--danger);
}
.modal-icon svg { width: 26px; height: 26px; }
.modal-title { font-size: 17px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.modal-text { font-size: 13.5px; color: var(--text2); line-height: 1.5; margin: 0 0 22px; }
.modal-actions { display: flex; gap: 10px; justify-content: center; }
.modal-actions .btn { flex: 1; justify-content: center; }

@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPopIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- modale di contenuto (carica un pezzo di pagina via fetch) ---------- */
.modal-box.wide {
  max-width: 920px; width: 92vw; max-height: 86vh;
  padding: 0; text-align: left; display: flex; flex-direction: column;
}
.modal-box-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; border-bottom: 1px solid var(--card-border); flex: 0 0 auto;
}
.modal-box-head .modal-title { margin: 0; flex: 1; }
.modal-box-body { padding: 0; overflow-y: auto; flex: 1 1 auto; }
.modal-box-body .phead.sticky { position: static; }
.modal-box-body .gridwrap { margin-bottom: 16px; box-shadow: none; }

/* ---------- tour guidato (coach-mark): spotlight con box-shadow enorme, niente overlay scuro
   separato — la "buca" attorno a .tour-spot fa già da sfondo attenuato per tutto il resto ---------- */
.tour-overlay { position: fixed; inset: 0; z-index: 2100; }
.tour-spot {
  position: fixed; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, .6);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
.tour-card {
  position: fixed; width: 312px; background: #fff; border-radius: 12px;
  padding: 16px 18px; box-shadow: 0 16px 40px rgba(15, 23, 42, .35); z-index: 2101;
}
.tour-ttl { font-size: 14.5px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.tour-txt { font-size: 13px; color: var(--text2); line-height: 1.55; margin-bottom: 14px; }
.tour-nav { display: flex; align-items: center; gap: 8px; }
.tour-count { font-size: 12px; font-weight: 700; color: var(--text3); }

/* ---------- barra di caricamento ---------- */
.loadbar {
  position: fixed; top: 0; left: 0; z-index: 9999;
  height: 4px; width: 0;
  background: linear-gradient(90deg, var(--accent), #7dd3fc);
  box-shadow: 0 0 12px rgba(59, 130, 246, .85);
  opacity: 0; pointer-events: none;
  transition: width .2s ease, opacity .2s ease;
}
.loadbar.on { opacity: 1; }

/* ---------- dashboard ---------- */
.dash { padding: 0 26px 26px; }

.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 16px; margin: 18px 0;
}
.stat {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--card-border); border-radius: 12px;
  padding: 16px 18px; box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
  text-decoration: none; color: inherit;
}
a.stat:hover { border-color: var(--accent); box-shadow: 0 3px 10px rgba(59, 130, 246, .12); }
.stat .ico {
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 44px;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.stat .ico svg { width: 21px; height: 21px; }
.stat .v { font-size: 25px; font-weight: 800; line-height: 1.1; color: var(--text); }
.stat .v small { font-size: 13px; font-weight: 600; color: var(--text3); }
.stat .l { font-size: 12.5px; color: var(--text2); font-weight: 600; margin-top: 3px; }
.stat.ok .ico { background: var(--ok-bg); color: var(--ok); }
.stat.warn .ico { background: var(--warn-bg); color: var(--warn); }

/* le due colonne hanno la stessa altezza (align-items di default = stretch): dentro ognuna il
   pannello marcato .grow assorbe lo spazio in più, così l'ULTIMO pannello di ogni colonna finisce
   sempre alla stessa quota. Senza questo il log delle attività, crescendo, spingeva "Azioni rapide"
   sotto la base di "Linee e articoli". */
.dash-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
.dash-col { display: flex; flex-direction: column; min-width: 0; }
.dash-col > .panel:last-child { margin-bottom: 0; }
.panel.grow { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
/* min-height:0 è indispensabile: senza, un figlio flex non scende mai sotto il suo contenuto
   e lo scroll interno non parte mai */
.panel.grow .panel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@media (max-width: 1150px) {
  .dash-grid { grid-template-columns: 1fr; }
  /* in colonna singola non c'è niente da allineare: i pannelli tornano alla loro altezza naturale */
  .panel.grow { flex: 0 0 auto; }
  .panel.grow .panel-scroll { overflow-y: visible; }
}

.panel {
  background: #fff; border: 1px solid var(--card-border); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05); overflow: hidden; margin-bottom: 16px;
}
.panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; border-bottom: 1px solid var(--card-border);
  font-size: 14px; font-weight: 700; color: var(--text);
}
.panel-head svg { width: 16px; height: 16px; color: var(--accent); }
.panel-head .spacer { flex: 1; }
.panel table.dg td:first-child, .panel table.dg th:first-child { padding-left: 18px; }
.panel table.dg td:last-child, .panel table.dg th:last-child { padding-right: 18px; }
.panel-empty { padding: 26px 18px; text-align: center; color: var(--text3); font-size: 13px; }
.panel-filters {
  display: flex; gap: 7px; flex-wrap: wrap;
  padding: 11px 18px; border-bottom: 1px solid var(--card-border); background: #fafbfd;
}
.panel-filters .pill-btn { height: 28px; padding: 0 12px; font-size: 12px; }

.bar { height: 6px; border-radius: 999px; background: #eef1f5; overflow: hidden; min-width: 110px; }
.bar > i { display: block; height: 100%; background: var(--green); border-radius: 999px; }

.log-line { display: flex; gap: 10px; align-items: baseline; padding: 9px 18px; border-bottom: 1px solid #f1f4f8; font-size: 12.5px; }
.log-line:last-child { border-bottom: 0; }
.log-line .t { font-family: var(--mono); font-size: 11.5px; color: var(--text3); flex: 0 0 96px; }
.log-line .who { color: var(--text2); font-weight: 600; }

/* ---------- picker a due pannelli (associazioni) ---------- */
.picker {
  display: grid; grid-template-columns: 1fr 170px 1fr;
  gap: 16px; align-items: start; margin: 18px 26px 26px;
}
@media (max-width: 1150px) {
  .picker { grid-template-columns: 1fr; }
  .picker-mid { flex-direction: row !important; padding-top: 0 !important; }
}
.picker-pane {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--card-border); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05); overflow: hidden;
}
.picker-head {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px; border-bottom: 1px solid var(--card-border);
  font-size: 13.5px; font-weight: 700; color: var(--text);
}
.picker-head svg { width: 16px; height: 16px; color: var(--accent); }
.picker-head .spacer { flex: 1; }
.picker-search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid var(--card-border); background: #fafbfd;
}
.picker-search input {
  flex: 1; min-width: 0; height: 36px;
  border: 1px solid #d5dce6; border-radius: 9px; background: #fff;
  padding: 0 12px; font-family: inherit; font-size: 13px; color: var(--text);
}
.picker-search input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.16); }
.picker-search input::placeholder { color: var(--text3); }

.picker-list { max-height: 460px; overflow-y: auto; }
.picker-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 16px; border-bottom: 1px solid #f1f4f8;
  font-size: 13px; cursor: pointer;
}
.picker-item:last-child { border-bottom: 0; }
.picker-item:hover { background: var(--row-hover); }
.picker-item input[type="checkbox"] {
  width: 16px; height: 16px; margin-top: 2px; flex: 0 0 16px;
  accent-color: var(--accent); cursor: pointer;
}
.picker-item .picker-desc { display: block; color: var(--text2); font-size: 12.5px; margin-top: 2px; line-height: 1.4; }

.picker-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-top: 1px solid var(--card-border);
  font-size: 12.5px; color: var(--text2); background: #fafbfd;
}
.picker-foot .spacer { flex: 1; }

.picker-mid {
  display: flex; flex-direction: column; gap: 12px;
  align-items: stretch; justify-content: center;
  padding-top: 150px;
}
.picker-mid .btn { justify-content: center; }

/* ---------- creazione guidata (wizard listino) ---------- */
/* I passi stanno su UNA riga sola: andando a capo il sesto finiva sotto e la mappa del
   percorso smetteva di leggersi come un percorso. Se lo spazio non basta davvero (finestra
   stretta) la barra scorre in orizzontale invece di spezzarsi. */
.wz-steps {
  display: flex; gap: 6px; flex-wrap: nowrap; margin: 0 26px 14px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.wz-steps::-webkit-scrollbar { display: none; }
.wz-num {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--card-border); color: var(--text3);
  font-size: 12.5px; font-weight: 700; cursor: default;
  flex: 0 0 auto; white-space: nowrap;
}
.wz-num span {
  display: flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: #eef1f5; color: var(--text2); font-size: 11.5px;
  flex: 0 0 auto;
}
/* fatto = si può tornarci cliccando; on = il passo aperto */
.wz-num.fatto { color: var(--text2); cursor: pointer; }
.wz-num.fatto span { background: var(--ok, #16a34a); color: #fff; }
.wz-num.on { background: var(--slate); border-color: var(--slate); color: #fff; }
.wz-num.on span { background: rgba(255,255,255,.2); color: #fff; }

.wz-titolo { font-size: 17px; font-weight: 800; color: var(--text); margin: 2px 0 6px; }
/* il testo di un wizard è la parte che fa il lavoro: si legge, non si scorre via */
.wz-testo { font-size: 13px; color: var(--text2); line-height: 1.6; margin: 0 0 16px; max-width: 70ch; }

.wz-recap { display: flex; flex-direction: column; gap: 1px; background: var(--card-border); border-radius: 10px; overflow: hidden; }
.wz-recap > div { display: flex; gap: 14px; background: #fff; padding: 11px 14px; font-size: 13px; }
.wz-recap b { flex: 0 0 130px; color: var(--text2); font-weight: 700; }
.wz-recap span { color: var(--text); }

/* campo lasciato vuoto: si segnala sul posto invece di far fare il giro al server */
.field-err { border-color: var(--danger, #dc2626) !important; }

/* ---------- mappa "come si arriva al PDF" (_MappaPdf.cshtml) ---------- */
/* il riquadro che contiene l'aiuto: senza, il disegno restava appoggiato sullo sfondo della
   pagina e sembrava che il contenuto sotto trasparisse invece di essere un pannello a sé */
.help-box {
  background: #fff; border: 1px solid var(--card-border); border-radius: 12px;
  padding: 4px 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.help-box > summary { padding: 9px 2px; }
.help-box[open] > summary { border-bottom: 1px solid var(--card-border); margin-bottom: 4px; }

/* il disegno è un aiuto, non il contenuto della pagina: a tutta larghezza le caselle
   diventavano enormi e il resto finiva spinto sotto la piega */
.mappa-pdf { margin: 0 0 18px; max-width: 1000px; }
.mappa-pdf svg { width: 100%; height: auto; display: block; }
.mappa-pdf figcaption {
  font-size: 12.5px; color: var(--text2); line-height: 1.6; margin-top: 10px;
}

.mappa-pdf .mp-box { fill: #fff; stroke: var(--card-border); stroke-width: 1.2; }
/* la casella del pezzo che si sta creando in questo momento */
.mappa-pdf .mp-on { fill: #eef4ff; stroke: var(--accent); stroke-width: 2; }
.mappa-pdf .mp-small { fill: #f7f9fc; }
.mappa-pdf .mp-nota { fill: #fbfcfe; stroke-dasharray: 4 3; }
/* le due zone (dentro un modello / dentro un listino): un contenitore tratteggiato per
   ognuna, così si vede a colpo d'occhio che sono due gruppi di ingredienti separati */
.mappa-pdf .mp-zone { fill: #fafbfd; stroke: #c7cedb; stroke-width: 1.4; stroke-dasharray: 5 4; }
.mappa-pdf .mp-zt {
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  fill: var(--text3); font-family: inherit;
}

.mappa-pdf .mp-t {
  font-size: 14px; font-weight: 800; fill: var(--text); text-anchor: middle;
  font-family: inherit;
}
.mappa-pdf .mp-ts { font-size: 12px; font-weight: 700; fill: var(--text2); }
.mappa-pdf .mp-s { font-size: 11.5px; fill: var(--text2); text-anchor: middle; font-family: inherit; }
.mappa-pdf .mp-left { text-anchor: start; }
.mappa-pdf .mp-b { font-weight: 800; fill: var(--text); }

.mappa-pdf .mp-arrow {
  fill: none; stroke: var(--text3); stroke-width: 1.6; marker-end: url(#mpFreccia);
}
/* il marker eredita currentColor: così la punta è dello stesso grigio della linea */
.mappa-pdf svg { color: var(--text3); }
.mappa-pdf .mp-thin { stroke-width: 1.2; stroke-dasharray: 4 3; }

/* ogni casella (tranne Indice e i tre box "output") è un link vero verso l'anagrafica:
   il cursore e l'accento al passaggio del mouse lo dicono, altrimenti sembra decorazione */
.mappa-pdf .mp-link { cursor: pointer; }
.mappa-pdf .mp-link:hover .mp-box { stroke: var(--accent); }
.mappa-pdf .mp-link:hover .mp-small { fill: var(--accent-soft); }
.mappa-pdf .mp-link:focus-visible .mp-box { stroke: var(--accent); stroke-width: 2; }
.mappa-pdf .mp-link:hover .mp-t.mp-ts { fill: var(--accent-press); }

/* ---------- empty state ---------- */
.empty-state {
  border: 1px dashed #cbd5e1; border-radius: 12px; background: #fff;
  padding: 52px 20px; text-align: center; color: var(--text3); margin: 18px 26px;
}
.empty-state .big { font-size: 15px; font-weight: 700; color: var(--text2); margin-bottom: 5px; }

/* ---------- pagination ---------- */
.pager {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 26px 26px; font-size: 13px; color: var(--text2); font-weight: 600;
}

/* ---------- workspace del configuratore (Listini Linee) ---------- */
.wtabs-ctx {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 26px; background: #fff; border-bottom: 1px solid var(--card-border);
}
.wsplit { flex: 1; display: flex; min-height: 0; }
/* 360 e non 300: i nomi lunghi ("CANALE DI PRESA E SCARICO ARIA…") venivano tagliati quasi
   subito. Restano comunque su una riga con i puntini, ma il title mostra il nome intero. */
.wleft {
  width: 360px; flex: 0 0 360px; border-right: 1px solid var(--card-border);
  background: #fff; overflow: auto; padding: 12px;
}
@media (max-width: 1500px) { .wleft { width: 300px; flex-basis: 300px; } }
.wmid { flex: 1; min-width: 0; overflow: auto; background: var(--bg); padding: 18px 22px; }
/* 400 e non 340: con quattro schede in cima l'ultima ("Immagine") restava tagliata, e le
   figure della libreria si vedono meglio. La colonna centrale è flex:1, quindi si stringe da sé. */
.wright {
  width: 400px; flex: 0 0 400px; border-left: 1px solid var(--card-border);
  background: #fff; overflow: auto; padding: 14px;
}
@media (max-width: 1500px) { .wright { width: 340px; flex-basis: 340px; } }
/* schede del pannello destro (editor Struttura): scelgono COSA si aggiunge, non aggiungono
   niente da sole — per questo non hanno il "+" e stanno in cima al pannello che comandano.
   Restano ferme mentre l'elenco sotto scorre. */
.modebar {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 4px; margin: -14px -14px 12px; padding: 14px 14px 10px;
  background: #fff; border-bottom: 1px solid var(--card-border);
}
.modetab {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 34px; padding: 0 4px; border-radius: 8px; text-decoration: none;
  font-size: 11.5px; font-weight: 700; color: var(--text2); background: #f4f6f9;
  border: 1px solid transparent; transition: .12s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.modetab svg { width: 13px; height: 13px; flex: 0 0 13px; }
.modetab:hover { border-color: var(--accent); color: var(--accent); }
.modetab.on { background: var(--slate); color: #fff; }
.modetab.on:hover { color: #fff; border-color: transparent; }

/* la ricerca sta subito sotto le schede, che sono sticky: senza esserlo anche lei ci scorreva
   sotto e la barra se ne mangiava un pezzo. 58px = altezza della modebar (14 + 34 + 10). */
.wright .srch { position: sticky; top: 58px; z-index: 4; background: #fff; }

.panelttl {
  font-size: 12px; font-weight: 800; color: var(--text2); letter-spacing: .04em;
  text-transform: uppercase; margin: 4px 0 10px; display: flex; align-items: center; gap: 7px;
}
.panelttl svg { width: 14px; height: 14px; color: var(--accent); }
/* stesso titolo, ma come <summary> di un pannello intero collassabile (Modelli/Asset/Testo libero) */
summary.panelttl { cursor: pointer; list-style: none; margin: 0; padding: 10px 10px; border-radius: 8px; background: #f4f6f9; }
summary.panelttl:hover { background: #eef1f6; }
summary.panelttl::-webkit-details-marker { display: none; }
summary.panelttl::after { content: "▾"; margin-left: auto; color: var(--text3); font-size: 10px; }
details:not([open]) > summary.panelttl::after { content: "▸"; }
summary.panelttl .cnt { margin-left: auto; font-size: 11px; color: var(--text3); font-weight: 700; }
summary.panelttl .cnt + ::after { margin-left: 6px; }
/* pannello della libreria: uno aperto alla volta (fisarmonica), gli altri restano titoli soli */
.acc-pan { margin-bottom: 8px; }
.acc-pan > .srch { margin-top: 10px; }

/* risultato di ricerca reso come bottone (es. "Testo libero"): tutta la card è cliccabile,
   niente "+" separato — reset dei default <button> per farla sembrare identica a .resitem */
.resitem-btn {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  background: #fff; border: 1px solid var(--card-border); border-radius: 8px;
  padding: 9px 11px; cursor: pointer; margin-bottom: 6px;
}
.resitem-btn:hover { border-color: var(--accent); background: var(--row-hover); }

/* albero famiglia -> modello */
.tree { font-size: 13px; line-height: 1.5; }
.tnode {
  display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 6px;
  cursor: pointer; color: var(--text2); text-decoration: none;
}
.tnode:hover { background: #eef2f8; }
.tnode.sel { background: var(--accent-soft); color: var(--accent-press); font-weight: 700; }
.tnode.hit { background: var(--warn-bg); color: var(--warn); font-weight: 700; }
.tnode.sec { font-weight: 700; color: var(--text); padding-left: 4px; margin-top: 4px; }
.tnode .cnt { margin-left: auto; font-size: 11px; color: var(--text3); font-weight: 600; }
.tnode .dot-problema { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); flex: 0 0 7px; margin-left: auto; }
.tnode-thumb {
  width: 22px; height: 22px; border-radius: 5px; flex: 0 0 22px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--card-border);
}
.tnode-thumb img { width: 100%; height: 100%; object-fit: contain; }
.tnode-thumb svg { width: 12px; height: 12px; }
/* copertina del modello aperto, versione grande della stessa miniatura (header pagina e modale) */
.hcover {
  width: 42px; height: 42px; border-radius: 8px; flex: 0 0 42px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--accent-soft); border: 1px solid var(--card-border);
}
.hcover img { width: 100%; height: 100%; object-fit: contain; }

/* campo appena riempito dall'assistente (es. codice composto dal prefisso scelto): si evidenzia
   il bordo perché il valore è comparso senza che l'utente lo scrivesse, e va notato */
.field-input.appena-valorizzato {
  border-color: var(--ok); background: var(--ok-bg);
  box-shadow: 0 0 0 3px rgba(31, 122, 68, .12);
}

/* schermata Genera PDF: scelte a sinistra, documenti già generati a destra. Da soli il form
   lasciava mezza pagina vuota e l'elenco finiva fuori schermo */
.genera-split { display: flex; align-items: flex-start; gap: 22px; padding: 0 26px 26px; }
.genera-form { flex: 0 0 560px; max-width: 560px; }
.genera-form .form-card { margin: 0; }
.genera-doc { flex: 1; min-width: 0; }
.genera-doc .gridwrap { margin: 0; }
@media (max-width: 1250px) {
  .genera-split { flex-direction: column; }
  .genera-form { flex: 1 1 auto; max-width: none; width: 100%; }
  .genera-doc { width: 100%; }
}

/* colore del modello nel PDF: il quadrato del picker accanto alla spunta "standard" */
.color-field { display: flex; align-items: center; gap: 10px; }
.color-field input[type="color"] {
  width: 58px; height: 40px; padding: 3px; cursor: pointer;
  border: 1px solid #cbd5e1; border-radius: 9px; background: #fff;
}
.color-field .check-line { margin: 0; }

/* separatore "oppure" fra due strade alternative dentro lo stesso riquadro */
.oppure { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; color: var(--text3); }
.oppure::before, .oppure::after { content: ""; flex: 1; height: 1px; background: var(--divider); }
.oppure span { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* form a due colonne: immagine del modello a sinistra come campo vero, campi a destra */
.form-split { display: flex; gap: 22px; align-items: flex-start; }
.form-media { flex: 0 0 210px; }
.form-main { flex: 1 1 auto; min-width: 0; }
.media-box {
  width: 210px; height: 210px; margin-bottom: 8px;
  border: 1px solid var(--card-border); border-radius: 10px; background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.media-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 1000px) {
  .form-split { flex-direction: column; }
  .form-media { flex: 1 1 auto; }
}
.tnode-fam {
  padding: 6px 8px; cursor: pointer; font-size: 12px; font-weight: 800; color: var(--text2);
  letter-spacing: .03em; text-transform: uppercase; list-style: none; display: flex; align-items: center; gap: 6px;
}
.tnode-fam::-webkit-details-marker { display: none; }
.tnode-fam::before { content: "▸"; color: var(--text3); font-size: 10px; }
details[open] > .tnode-fam::before { content: "▾"; }
.tnode .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wmid .gridwrap { margin-left: 0; margin-right: 0; }

/* ricerca articoli */
.srch {
  border: 1px solid #cbd5e1; border-radius: 8px; padding: 0 10px; height: 38px;
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.srch svg { width: 16px; height: 16px; color: var(--text3); flex: 0 0 16px; }
.srch input { border: 0; outline: 0; font-family: inherit; font-size: 13.5px; flex: 1; font-weight: 600; background: transparent; }
/* libreria immagini del pannello destro: schede staccate invece di righe attaccate, così si
   capisce dove finisce una figura e comincia l'altra. Ordine fisso: immagine, nome, comandi. */
.reslib { display: flex; flex-direction: column; gap: 10px; }
.libitem {
  border: 1px solid var(--card-border); border-radius: 10px; background: #fff; padding: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.libfig {
  display: block; border: 1px solid var(--card-border); border-radius: 8px;
  background: #fff; padding: 6px; margin-bottom: 8px;
}
.libfig:hover { border-color: var(--accent); }
/* contain e non cover: le figure sono disegni tecnici, tagliarne i bordi le rende irriconoscibili */
.libfig img { display: block; width: 100%; height: 120px; object-fit: contain; }
.libnome {
  display: flex; align-items: flex-start; gap: 6px; justify-content: space-between;
  font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.35; margin-bottom: 8px;
}
.libnome .badge { flex: 0 0 auto; }
.libazioni { display: flex; gap: 6px; align-items: center; }

.res { border: 1px solid var(--card-border); border-radius: 8px; overflow: hidden; }
.resitem { padding: 10px 12px; border-bottom: 1px solid #eef1f4; }
.resitem:last-child { border-bottom: 0; }
.resitem .top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.resitem .desc { font-size: 12px; color: var(--text2); margin: 4px 0 7px; line-height: 1.4; }
.resitem .vbadges { display: flex; gap: 6px; flex-wrap: wrap; }
.vb { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; border-radius: 5px; padding: 2px 7px; }
.vb.ok { background: var(--ok-bg); color: var(--ok); }
.vb.warn { background: var(--warn-bg); color: var(--warn); }
.vb svg { width: 11px; height: 11px; }

/* editor centrale: righe del modello selezionato, con azioni inline */
.stru-row-actions { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.stru-row-actions button, .stru-row-actions a {
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--card-border); background: #fff; border-radius: 5px; cursor: pointer; color: var(--text3);
  padding: 0; text-decoration: none;
}
.stru-row-actions button:hover, .stru-row-actions a:hover { border-color: var(--accent); color: var(--accent); }
.stru-row-actions button.danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.stru-row-actions svg { width: 12px; height: 12px; }

/* "Propaga" compare su una riga sola, quella appena aggiunta: può permettersi un testo e un
   colore pieno invece di essere il terzo bottoncino grigio uguale agli altri. È un invito
   che dura il tempo di una modifica, deve vedersi. */
.stru-row-actions a.stru-propaga {
  width: auto; padding: 0 9px; gap: 5px; font-size: 11.5px; font-weight: 700;
  background: var(--green); border-color: var(--green); color: #fff;
}
.stru-row-actions a.stru-propaga:hover { background: var(--green-h); border-color: var(--green-h); color: #fff; }

/* campo "vai alla posizione N": alternativa al trascinare su sequenze/alberi lunghi */
.pos-input {
  width: 42px; height: 24px; border: 1px solid var(--card-border); border-radius: 5px;
  font-family: var(--mono); font-size: 12px; text-align: center; padding: 0 3px;
  background: #fff; color: var(--text2); flex: 0 0 42px;
}
.pos-input:focus { outline: 2px solid var(--focus); border-color: var(--accent); }
/* Firefox/Chrome: le frecce dello spinner numerico rubano spazio prezioso in una colonna stretta */
.pos-input::-webkit-outer-spin-button, .pos-input::-webkit-inner-spin-button { margin: 0; }

/* colonna sinistra dell'albero editabile: handle di trascinamento + numero di riga progressivo,
   per rendere visibile che è un albero ordinato (non solo indentato) */
table.dg.stru .seqcol { width: 46px; white-space: nowrap; color: var(--text3); }
table.dg.stru .drag-handle { cursor: grab; display: inline-flex; vertical-align: middle; }
table.dg.stru .drag-handle svg { width: 13px; height: 13px; }
table.dg.stru .seqnum { font-size: 11px; font-weight: 700; margin-left: 4px; }
table.dg.stru tr.dragging { opacity: .4; }

.add-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0; padding: 12px; background: #fff; border: 1px solid var(--card-border); border-radius: 10px;
}
.add-bar form { display: flex; align-items: center; gap: 7px; }
.add-bar select, .add-bar input[type=text] {
  height: 32px; border: 1px solid #cbd5e1; border-radius: 7px; padding: 0 10px; font-family: inherit; font-size: 12.5px;
}

/* ---------- compositore (ListiniAdHoc/Workspace) — dal mockup screen "Composizione PDF" ---------- */
.wtabs { display: flex; align-items: center; gap: 2px; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--card-border); height: 46px; flex-wrap: wrap; }
.wtab { height: 46px; display: flex; align-items: center; gap: 7px; padding: 0 15px; font-size: 14px; font-weight: 600; color: var(--text2); cursor: default; border-bottom: 2px solid transparent; text-decoration: none; }
.wtab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
.wtab .b { background: var(--warn-bg); color: var(--warn); border-radius: 999px; font-size: 11px; padding: 0 7px; font-weight: 700; }
.ctxbar { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.statbar { padding: 8px 20px; background: #fff; border-bottom: 1px solid var(--card-border); font-size: 12.5px; color: var(--text2); }

/* libreria a sinistra: gruppi collassabili per famiglia (asset e modelli), niente JS */
.acc { margin-bottom: 6px; }
.acch {
  display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 6px; cursor: pointer;
  font-weight: 700; font-size: 12.5px; color: var(--text2); background: #f4f6f9; list-style: none;
}
.acch::-webkit-details-marker { display: none; }
.acch::before { content: "▸"; color: var(--text3); font-size: 10px; }
details[open] > .acch::before { content: "▾"; }
.acch .cnt { margin-left: auto; font-size: 11px; color: var(--text3); font-weight: 600; }
/* un <svg> senza misura prende quella predefinita del browser (300x150) e l'intestazione
   diventa un cartellone: qui le icone valgono quanto quelle dei bottoni */
.acch > svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--accent); }
/* icona di famiglia (albero Struttura e fisarmoniche del Workspace): a 20px la foto non si
   leggeva, era una macchiolina grigia. Su fondo bianco con bordo si stacca dall'header grigio. */
.acch-ico {
  width: 30px; height: 30px; border-radius: 6px; object-fit: cover; flex: 0 0 30px;
  background: #fff; border: 1px solid var(--card-border); box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.asset {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 7px; margin: 5px 0 5px 4px;
  border: 1px solid var(--card-border); background: #fff;
}
.asset:hover { border-color: var(--accent); }
.asset .anm { font-size: 12px; font-weight: 600; color: var(--text2); line-height: 1.3; }
.asset .amt { font-size: 11px; color: var(--text3); }
.asset .btn-icon { margin-left: auto; flex: 0 0 auto; }

/* sequenza centrale: una riga per elemento, con barra colorata per tipo */
.timeline { background: var(--bg); }
.lanebar {
  display: flex; align-items: center; gap: 10px;
  position: sticky; top: -18px; z-index: 5;
  margin: -18px -22px 12px; padding: 12px 22px 10px;
  background: var(--bg); border-bottom: 1px solid var(--card-border);
}
.seqitem {
  display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--card-border);
  border-radius: 8px; padding: 9px 12px; margin: 7px 0; cursor: grab;
}
.seqitem.dragging { opacity: .4; }
.seqitem.hit { box-shadow: 0 0 0 2px var(--warn); background: var(--warn-bg); }
.seqitem .kind { width: 6px; align-self: stretch; border-radius: 3px; flex: 0 0 6px; background: var(--text3); }
.seqitem.cov .kind { background: var(--accent); }
.seqitem.dati .kind { background: var(--green); }
.seqitem.sep .kind { background: var(--orange); }
.seqitem.testo .kind { background: var(--tr); }
.seqitem.idx .kind { background: var(--ju); }
/* .tt (thumb) è condivisa da libreria (.asset) e sequenza (.seqitem): stessa forma ovunque */
.tt { width: 30px; height: 40px; border-radius: 3px; border: 1px solid var(--card-border); flex: 0 0 30px; overflow: hidden; background: linear-gradient(150deg, #eef2f8, #dde6f2); }
.tt img { width: 100%; height: 100%; object-fit: cover; }
.tt.cov { background: linear-gradient(150deg, #dbe7fb, #b9d0f5); }
.tt.sep { background: linear-gradient(150deg, #fbedd4, #f3d79c); }
.tt.dati { background: repeating-linear-gradient(#fff, #fff 3px, #eef1f5 3px, #eef1f5 6px); }
/* foto del modello: contain e non cover — è una cabina fotografata di tre quarti, ritagliarla
   in un 30x40 ne mostrerebbe solo un pezzo di parete */
.tt.foto { background: #fff; }
.tt.foto img { object-fit: contain; }
.tt.cube { background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.tt.cube svg { width: 15px; height: 15px; }
/* icona centrata dentro .tt quando non c'è ancora un'anteprima immagine reale (pagine PDF senza
   thumbnail): il colore di sfondo di .tt (cov/sep/dati) resta, l'icona si sovrappone per far
   capire che è comunque un oggetto grafico, non un vuoto */
/* è sempre e solo il segnaposto di una PAGINA PDF: stesso rosso del riquadro "PDF" in
   Anagrafica Asset (.asset-pdf), così il formato si riconosce senza aprire nulla */
/* il glifo riempie la miniatura (30x40) lasciando solo 2px di aria: a 17px si perdeva in mezzo
   al riquadro e il "PDF" era illeggibile. Il viewBox è quadrato, quindi resta centrato da solo */
.tt-icon { width: 100%; height: 100%; padding: 2px; display: flex; align-items: center; justify-content: center; color: var(--danger); opacity: .9; }
.tt-icon svg { width: 100%; height: 100%; }

.warn-ico { display: inline-flex; color: var(--warn); vertical-align: middle; margin-left: 6px; }
.warn-ico svg { width: 15px; height: 15px; }

/* il listino è il risultato finale del portale, non una riga anagrafica come le altre: la
   riga prende peso con l'icona che lo rappresenta anche nel menu (#i-tag), leggermente più
   grande del testo così l'occhio la nota subito scorrendo l'elenco */
.doc-ico { display: inline-flex; color: var(--accent); vertical-align: middle; margin-right: 8px; }
.doc-ico svg { width: 19px; height: 19px; }
.seqitem .st { font-weight: 700; font-size: 13.5px; color: var(--text); }
.seqitem .ss { font-size: 11.5px; color: var(--text3); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.seqmeta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* blocco corrente dell'anteprima: il collegamento fra le due colonne dev'essere visibile,
   altrimenti cliccando nell'anteprima non si capisce dove si è finiti nella sequenza */
.seqitem.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* ---------- anteprima del contenuto (colonna destra del compositore) ----------
   Ricalcata dallo screen "Anteprima e generazione" del mockup: foglio bianco, testata
   del modello, tabella N./DESCRIZIONE/EURO, righe in errore evidenziate. */
/* 480px e non 430: lingua e listino devono stare sulla STESSA riga (con le pill compatte),
   altrimenti l'intestazione dell'anteprima va a capo e mangia altezza al foglio */
.wright.wprev {
  width: 480px; flex: 0 0 480px; padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
/* display:flex vincerebbe sull'attributo hidden: senza questa riga il pannello non si
   nasconderebbe mai (stesso inganno del display:block su .field-hint) */
.wright.wprev[hidden] { display: none; }
@media (max-width: 1600px) { .wright.wprev { width: 360px; flex-basis: 360px; } }
.prevhead { padding: 12px 14px; border-bottom: 1px solid var(--card-border); background: #fff; }
/* lingua e listino su un'unica riga di pill compatte, separate da una barretta invece che
   da due etichette: nel pannello lo spazio è poco e i valori si leggono da soli */
.prevpills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.prevpills .pill-btn { height: 26px; padding: 0 12px; font-size: 11.5px; cursor: pointer; }
.prevsep { flex: 0 0 1px; width: 1px; height: 18px; background: var(--divider); margin: 0 4px; }
/* le altre .cnt del progetto sono agganciate al loro contenitore (summary/tnode/acch):
   qui il titolo è un div, serve la sua regola o il contatore eredita il maiuscolo del titolo */
.prevhead .panelttl .cnt {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text3);
  text-transform: none; letter-spacing: 0;
}
.prevbody { flex: 1; overflow: auto; padding: 14px; background: var(--bg); }
.anteprima-altri { width: 100%; justify-content: center; margin-bottom: 14px; }

.a4 {
  background: #fff; border: 1px solid #dfe3e8; border-left-width: 4px; border-radius: 5px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .09);
  padding: 14px 16px; margin-bottom: 16px; font-size: 11.5px;
}
.a4.k-dati { border-left-color: var(--green); }
.a4.k-cov { border-left-color: var(--accent); }
.a4.k-sep { border-left-color: var(--orange); }
.a4.k-testo { border-left-color: var(--tr); }
.a4.k-fig { border-left-color: var(--text3); }
.a4.k-idx { border-left-color: var(--ju); }
.a4-head {
  display: flex; align-items: flex-start; gap: 8px;
  border-bottom: 2px solid var(--slate); padding-bottom: 7px; margin-bottom: 9px;
}
/* la testata è un bottone: porta al blocco corrispondente nella sequenza */
.a4-goto {
  flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 9px;
  background: transparent; border: 0; padding: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
}
.a4-goto:hover .a4-ttl { color: var(--accent); text-decoration: underline; }
.a4-n {
  font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--text3);
  background: #eef1f5; border-radius: 5px; padding: 2px 6px; flex: 0 0 auto; margin-top: 1px;
}
.a4-tit { min-width: 0; }
.a4-ttl { display: block; font-size: 13.5px; font-weight: 800; color: var(--text); line-height: 1.25; }
.a4-sub { display: block; font-size: 10.5px; color: var(--text2); margin-top: 2px; }
.a4 table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.a4 th {
  background: var(--grid-head); text-align: left; border: 1px solid #dfe3e8;
  font-size: 9px; letter-spacing: .04em; font-weight: 800; padding: 4px 6px;
}
.a4 td { padding: 3px 6px; border: 1px solid #eceef2; vertical-align: top; line-height: 1.4; }
.a4 .q { text-align: center; color: var(--text2); width: 26px; }
/* quando la colonna N° porta il codice articolo (come nel listino stampato) serve più spazio
   e l'allineamento a sinistra, se no i codici tipo BAS744060 vanno a capo */
.a4 .q.cod { width: 72px; text-align: left; font-size: 9px; color: var(--text); }
.a4 .r { text-align: right; font-family: var(--mono); white-space: nowrap; }
.a4 .cod { font-family: var(--mono); font-weight: 700; }
.a4 .miss { color: var(--danger); font-weight: 800; }
.a4 tr.err td { background: var(--danger-bg); color: #9d2b23; }
.a4 tr.grp td {
  background: #eef2f8; font-weight: 800; text-transform: uppercase;
  font-size: 9px; letter-spacing: .03em; cursor: pointer;
}
.a4 tr.grp:hover td { background: var(--row-hover); color: var(--accent-press); }
/* Indice: stessa impaginazione del PDF — niente griglia, nome + puntini di guida + numero.
   I puntini sono un bordo tratteggiato su un elemento elastico, così la riga si allunga
   da sola come fa il tab leader di MigraDoc. */
.a4 .idx { padding: 6px 2px 2px; }
.a4 .idx-bar { width: 44px; height: 4px; background: #0024BD; margin-bottom: 9px; }
.a4 .idx-ttl { font-size: 21px; font-weight: 700; color: var(--text); line-height: 1.1; }
.a4 .idx-sub { font-size: 10.5px; color: var(--text3); margin: 2px 0 14px; }
.a4 .idx-riga {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 11.5px; padding: 3px 4px; border-radius: 5px; cursor: pointer;
}
.a4 .idx-riga:hover { background: var(--row-hover); }
.a4 .idx-riga:hover .idx-nome { color: var(--accent-press); }
.a4 .idx-nome { color: var(--text); }
.a4 .idx-punti { flex: 1 1 auto; border-bottom: 1.5px dotted var(--text3); opacity: .55; transform: translateY(-3px); }
.a4 .idx-pag { font-weight: 700; color: var(--text3); font-size: 10.5px; white-space: nowrap; }
/* Le figure nell'anteprima sono in PROPORZIONE con la pagina stampata, non a dimensione
   fissa: --cm è quanto vale un centimetro di foglio in questa colonna, così si vede subito
   quanto è grande una figura rispetto al testo. L'altezza massima è la stessa che usa il
   motore PDF (7 cm di default, scelta al momento della generazione).
   È un'approssimazione voluta: il testo dell'anteprima è più grande del vero per essere
   leggibile a schermo, quindi le figure sembrano un filo più piccole che nel PDF. */
.a4 { --cm: 26px; --altezza-figura: 7; }
.a4 figure { margin: 4px 0; display: block; }
.a4 figure img {
  max-width: 100%;
  max-height: calc(var(--altezza-figura) * var(--cm));
  border: 1px solid var(--card-border); border-radius: 3px;
  display: block; margin: 0 auto;   /* centrate, come nel PDF */
}
.a4 figcaption { font-size: 10px; color: var(--text2); line-height: 1.4; margin-top: 3px; text-align: center; }
/* il nome della figura è un aiuto per chi compone, NON esce nel PDF: si distingue a colpo
   d'occhio dal resto dell'anteprima, che invece è quello che verrà stampato */
.a4 figcaption.solo-video { font-style: italic; color: var(--text3); font-size: 9px; }
.a4-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  color: var(--text3); font-size: 9px; margin-top: 9px;
  border-top: 1px solid #eceef2; padding-top: 5px;
}
/* logo CMC nel piè di pagina, come sulle pagine dati del listino stampato */
.a4-logo { height: 14px; width: auto; vertical-align: middle; margin-right: 6px; }
.a4-testo { font-size: 12px; line-height: 1.6; color: var(--text); white-space: pre-wrap; }
.a4-media {
  display: flex; align-items: center; justify-content: center;
  background: #f7f9fc; border: 1px dashed var(--card-border); border-radius: 6px; padding: 10px;
}
.a4-media img { max-width: 100%; }
.a4-pdfbox { text-align: center; }
/* stesso segnale del riquadro "PDF" degli Asset, in grande: qui c'è spazio e il formato
   della pagina è l'informazione principale finché non la si apre */
.a4-pdfico {
  display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px;
  border: 1px solid #efc7c3; border-radius: 9px;
  background: var(--danger-bg); color: var(--danger);
}
.a4-pdfico svg { width: 26px; height: 26px; }
.a4-pdfact { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
/* Il riquadro prende la PROPORZIONE di un A4 (1:√2) invece di un'altezza fissa: così la
   pagina ci entra esatta e il visualizzatore del browser non ha più niente da scorrere.
   Con i 420px di prima il foglio era sempre un po' più alto del riquadro e dentro
   all'anteprima restava una seconda barra di scorrimento, dentro quella della colonna. */
.a4-frame { width: 100%; height: auto; aspect-ratio: 1 / 1.414; border: 0; background: #fff; }

/* pannelli "Aggiungi modello/pagina": gruppi collassabili con <details>, niente JS */
.res-group { border: 1px solid var(--card-border); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.res-group summary {
  padding: 9px 12px; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text2);
  background: #f7f9fc; list-style: none; display: flex; align-items: center; gap: 6px;
}
.res-group summary::-webkit-details-marker { display: none; }
.res-group summary::before { content: "▸"; color: var(--text3); font-size: 10px; }
.res-group[open] summary::before { content: "▾"; }
.res-group .res { border: 0; border-radius: 0; border-top: 1px solid var(--card-border); }
.res-group .resitem { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; }