/* generato da sorgenti/build.py: non modificare a mano. Fonti: css/widget-bozze.css, css/widget-calcolatore.css, css/widget-estensione.css, css/widget-fasce.css, css/widget-importa.css, css/widget-messaggi.css, css/widget-monitoraggio.css, css/widget-ordini.css, css/widget-panoramica.css */

/* ---- css/widget-bozze.css ---- */
/* =====================================================================
   Widget «bozze» · pagina Bozze di Qublo (Pages/Drafts.razor,
   Components/Drafts/DraftTableRow.razor, DraftPublicationProgressPanel.razor,
   Components/Catalog/BulkSelectionBar.razor su origin/main).
   Solo ciò che app-ui.css non ha. Movimento: transform e opacity;
   colori con ease 180 ms.
   ===================================================================== */

.widget-bozze .qa-pagina { position: relative; }

/* ---------- barra strumenti ---------- */
.widget-bozze .wb-strumenti .qa-cerca { gap: .55em; }
.widget-bozze .wb-strumenti .qa-cerca .qa-ico { width: 1.1em; height: 1.1em; flex: none; }
/* telefono: cronologia, Filtri (solo icona) e «Crea nuove bozze» su una riga, ricerca sotto */
@container qa (width < 36rem) {
  .widget-bozze .wb-strumenti .qa-cerca { order: 3; flex-basis: 100%; }
  .widget-bozze .wb-filtri { width: 2.65em; padding: 0; justify-content: center; }
  .widget-bozze .wb-filtri > span { display: none; }
}

/* ---------- tabella ---------- */

.widget-bozze .wb-tabella td { transition: background-color var(--qa-dur-fast) ease; }

/* lampo quando la riga diventa «Pubblicato»: opacità di uno strato sotto il contenuto */
.widget-bozze .wb-riga > td { position: relative; isolation: isolate; }
.widget-bozze .wb-riga > td::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--q-lime-soft); opacity: 0; pointer-events: none;
  transition: opacity 500ms ease-out;
}
.widget-bozze .wb-riga.is-lampo > td::after { opacity: 1; transition: none; }

/* bozza con l'avviso VeRO lasciata fuori dal controllo: evidenziatore rosso */
.widget-bozze .wb-riga.is-esclusa > td { background: var(--q-red-soft); }
.widget-bozze .wb-riga.is-esclusa > td:first-child,
.widget-bozze .wb-riga.is-esclusa + .wb-vero > td { box-shadow: inset 3px 0 0 var(--q-bad); }
.widget-bozze .wb-c-spunta { padding-right: .2em; }
.widget-bozze .wb-c-prodotto { width: 100%; }
.widget-bozze .wb-c-prodotto strong { max-width: 28em; }
.widget-bozze .wb-ordina { color: var(--q-muted); font-weight: 700; }
.widget-bozze .wb-tabella .qa-profitto > .qa-pill { margin-top: .25em; justify-self: start; color: var(--q-warn); font-size: var(--qa-t-xs); }

/* bollini della riga secondo lo stato: bozza · in pubblicazione · pubblicato */
.widget-bozze .wb-p-pub,
.widget-bozze .wb-p-corso { display: none; }
.widget-bozze [data-stato="pubblicato"] .wb-p-pub,
.widget-bozze [data-stato="corso"] .wb-p-corso { display: inline-flex; }

/* codici ACQ / VEN con l'avatar dell'account eBay */
.widget-bozze .wb-id { display: grid; gap: .4em; }
.widget-bozze .wb-id .qa-codice > span { font-variant-numeric: tabular-nums; color: var(--q-ink); font-weight: 600; }
/* VEDI_SIMILI → ID eBay senza allargare la colonna */
.widget-bozze .wb-ebay { display: inline-block; min-width: 12ch; }
.widget-bozze .wb-avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 1.85em; height: 1.85em; border-radius: 50%;
  background: var(--q-brand); color: var(--q-on-brand);
  border: 1px solid var(--q-line);
  font-style: normal; font-weight: 900; letter-spacing: -.02em;
}

/* avviso VeRO sotto la riga (q-draft-vero-warning: rosso soft, 12 px) */
.widget-bozze .wb-tabella tr.wb-vero > td { padding: 0; border-top: 0; }
.widget-bozze .wb-vero-avviso {
  display: flex; align-items: flex-start; gap: .55em;
  padding: .6em 1.1em .65em;
  background: var(--q-red-soft); color: var(--q-bad);
  font-size: var(--qa-t-xs); font-weight: 600; line-height: 1.5;
}
.widget-bozze .wb-vero-avviso .qa-ico { width: 1.15em; height: 1.15em; flex: none; margin-top: .1em; stroke-width: 2.1; }
.widget-bozze .wb-vero-avviso > span { min-width: 0; }
@container qa (width >= 36rem) { .widget-bozze .wb-vero-avviso { padding-left: 3.1em; } }

.widget-bozze .wb-frecce { display: inline-flex; gap: .4em; }
.widget-bozze .wb-frecce .qa-btn { min-height: 2.3em; width: 2.3em; }

/* ---------- pannello di pubblicazione + barra di massa ----------
   Nell'app galleggiano in fondo allo schermo; qui stanno sotto la tabella,
   in uno spazio sempre riservato: niente righe coperte, niente salti. */
.widget-bozze .wb-sopra {
  position: relative; z-index: 4;
  display: flex; flex-direction: column; align-items: flex-end; gap: .6em;
  margin-top: -.25em;
  padding: 0 1em 1em;
  pointer-events: none;
}
@container qa (width >= 48rem) { .widget-bozze .wb-sopra { padding: 0 1.4em 1.3em; } }

/* pannello compresso (DraftPublicationProgressPanel) */
.widget-bozze .wb-pannello {
  position: relative; right: auto; bottom: auto;
  width: min(32em, 100%);
  display: flex; align-items: center; gap: .75em;
  padding: .8em .9em;
  border-color: var(--q-line);
}
.widget-bozze .wb-esito { display: grid; place-items: center; transition: background-color var(--qa-dur-fast) ease, color var(--qa-dur-fast) ease; }
.widget-bozze .wb-esito > * { grid-area: 1 / 1; }
.widget-bozze .wb-pannello[data-esito="ok"] .wb-esito { background: var(--q-lime-soft); color: var(--q-ok); }
.widget-bozze .wb-pannello[data-esito="ok"] .wb-gira { display: none; }
.widget-bozze .wb-fatto {
  opacity: 0; transform: scale(.6);
  transition: opacity var(--qa-dur-base) var(--qa-ease-out), transform var(--qa-dur-base) var(--qa-ease-out);
}
.widget-bozze .wb-pannello[data-esito="ok"] .wb-fatto { opacity: 1; transform: none; }
.widget-bozze .wb-pannello-testo { flex: 1; display: grid; gap: .25em; min-width: 0; }
.widget-bozze .wb-p-titolo { font-weight: 800; line-height: 1.3; }
.widget-bozze .wb-p-elaborati { color: var(--q-muted); font-size: var(--qa-t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container qa (width < 36rem) {
  /* telefono: la riga «49 di 49 prodotti elaborati» si legge intera; la pillola ripeterebbe lo stesso dato */
  .widget-bozze .wb-p-elaborati { white-space: normal; }
  .widget-bozze .wb-p-conto { display: none; }
}
.widget-bozze .wb-p-barra { margin-top: .3em; height: .45em; }
.widget-bozze .wb-p-conto { flex: none; }
.widget-bozze .wb-chevron { width: 1.1em; height: 1.1em; flex: none; color: var(--q-muted); }

/* barra di massa (BulkSelectionBar, variante compatta delle bozze): scura in entrambi i temi */
.widget-bozze .wb-massa {
  position: relative; left: auto; bottom: auto;
  align-self: center;
  max-width: 100%;
  transform: none;
  flex-wrap: wrap; justify-content: center;
  gap: .5em .9em;
  padding: .55em .8em;
  font-size: var(--qa-t-m); font-weight: 800;
  white-space: normal;
}
.widget-bozze .wb-massa.qa-prima { opacity: 0; transform: translateY(1.2em); }
.widget-bozze .wb-m-somma,
.widget-bozze .wb-m-azioni { display: flex; align-items: center; gap: .45em; min-width: 0; color: var(--qbar-text); }
.widget-bozze .wb-m-azioni { flex-wrap: wrap; justify-content: center; gap: .3em; }
.widget-bozze .wb-m-conto {
  display: grid; place-items: center; min-width: 2.5em; height: 1.95em; padding: 0 .45em;
  border-radius: 999px; background: var(--qbar-badge); color: var(--qbar-text);
  font-weight: 800;
}
.widget-bozze .wb-m-somma > strong { font-weight: 800; white-space: nowrap; }
.widget-bozze .wb-m-tutto { padding: .45em .6em; border-radius: 8px; white-space: nowrap; }
.widget-bozze .wb-sep { flex: none; width: 1px; height: 1.6em; background: var(--qbar-border); }
.widget-bozze .wb-m-btn {
  display: inline-flex; align-items: center; gap: .4em;
  min-height: 2.3em; padding: 0 .7em; border-radius: 8px;
  white-space: nowrap;
  transition: background-color var(--qa-dur-fast) ease, transform var(--qa-dur-press) var(--qa-ease-out);
}
.widget-bozze .wb-m-btn .qa-ico { width: 1.15em; height: 1.15em; flex: none; }
.widget-bozze .wb-m-btn.is-premuto { background: color-mix(in srgb, var(--qbar-badge) 30%, var(--qbar-bg)); transform: scale(.97); }
.widget-bozze .wb-m-x { flex: none; display: inline-grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 8px; color: var(--qbar-muted); }
.widget-bozze .wb-m-x .qa-ico { width: 1.05em; height: 1.05em; stroke-width: 2.2; }

/* da 64rem: una sola pillola, come nell'app sopra i 900 px */
@container qa (width >= 64rem) {
  .widget-bozze .wb-massa { flex-wrap: nowrap; white-space: nowrap; gap: .45em; padding-inline: .6em; font-size: var(--qa-t-s); }
  .widget-bozze .wb-m-somma { gap: .4em; }
  .widget-bozze .wb-m-tutto { padding-inline: .35em; }
  .widget-bozze .wb-m-azioni { flex-wrap: nowrap; gap: .1em; }
  .widget-bozze .wb-m-btn { padding: 0 .38em; gap: .35em; }
  /* la pillola sta in 64rem anche in italiano: icona solo su «Pubblica Bozze» */
  .widget-bozze .wb-m-btn:not(.wb-m-pubblica) > .qa-ico { display: none; }
}
/* sotto: la barra va a capo e si arrotonda (border-radius 22px dell'app) */
@container qa (width < 64rem) {
  .widget-bozze .wb-massa { border-radius: 22px; padding-inline: 2.9em; }
  .widget-bozze .wb-m-azioni > .wb-sep { display: none; }
  .widget-bozze .wb-m-x { position: absolute; top: .4em; right: .45em; }
}
/* 48-64rem: riepilogo sopra, le quattro azioni su una riga */
@container qa (48rem <= width < 64rem) {
  .widget-bozze .wb-m-somma { flex-basis: 100%; justify-content: center; }
  .widget-bozze .wb-m-somma > .wb-sep:last-child { display: none; }
  .widget-bozze .wb-m-azioni { flex-wrap: nowrap; }
}
/* sotto 48rem: azioni in griglia 2 × 2, nessuna resta da sola */
@container qa (width < 48rem) {
  .widget-bozze .wb-m-somma { flex-basis: 100%; justify-content: center; }
  .widget-bozze .wb-m-somma > .wb-sep:last-child { display: none; }
  .widget-bozze .wb-m-azioni { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: .3em 1.2em; }
  .widget-bozze .wb-m-btn { justify-content: center; min-width: 0; }
}
@container qa (width < 36rem) {
  .widget-bozze .wb-m-azioni { grid-template-columns: 1fr 1fr; gap: .3em; width: 100%; }
}

/* telefono: niente sovrapposizioni, pannello e barra in fila sotto la tabella */
@container qa (width < 36rem) {
  .widget-bozze .wb-sopra { align-items: stretch; }
  .widget-bozze .wb-pannello { width: 100%; }
  .widget-bozze .wb-massa { align-self: stretch; padding: .65em .6em; }
  .widget-bozze .wb-m-somma { padding-inline: 2.4em; }
  .widget-bozze .wb-m-somma > .wb-sep { display: none; }
  .widget-bozze .wb-m-btn { padding: 0 .45em; gap: .35em; white-space: normal; text-align: center; line-height: 1.2; }
  .widget-bozze .wb-m-pubblica { background: color-mix(in srgb, var(--qbar-badge) 34%, transparent); }
  .widget-bozze .wb-m-pubblica.is-premuto { background: color-mix(in srgb, var(--qbar-badge) 55%, var(--qbar-bg)); }
}

/* i bollini non cambiano l'altezza della riga quando arriva «In pubblicazione»:
   sempre lo spazio di due righe di bollini */
.widget-bozze .wb-c-prodotto .qa-pillole { min-height: 3.9em; align-content: flex-start; }

/* da 64rem compaiono «Caricato il» e «ID prodotto»: celle più strette perché la tabella stia nella pagina */
@container qa (width >= 64rem) {
  .widget-bozze .wb-tabella th,
  .widget-bozze .wb-tabella td { padding-inline: .5em; }
  .widget-bozze .wb-tabella th.qa-da-l { white-space: normal; }
  .widget-bozze .wb-tabella .qa-azioni { gap: .25em; }
  .widget-bozze .wb-tabella .qa-profitto > .qa-pill { max-width: 8em; white-space: normal; line-height: 1.25; }
}

/* il titolo del pannello cambia («in corso» → «completata») senza cambiare l'altezza */
@container qa (width >= 48rem) {
  .widget-bozze .wb-p-titolo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@container qa (width < 48rem) {
  .widget-bozze .wb-p-titolo { min-height: 2.6em; }
}

/* ---- css/widget-calcolatore.css ---- */
/* =====================================================================
   Qublo · widget «calcolatore» — scheda «Prezzo» della bozza, interattiva
   Fonte dell'aspetto: PrezzoTab.razor(.css) e PricingBandsSummary.razor.css
   su origin/main. Solo ciò che app-ui.css non ha; tutto sotto .widget-calcolatore.
   Movimento: transform e opacity; colori con ease 180 ms.
   ===================================================================== */

.widget-calcolatore {
  --wc-traccia: color-mix(in srgb, var(--q-muted) 70%, var(--q-surface));
  --wc-passata: color-mix(in srgb, var(--q-brand) 70%, var(--q-surface));
  --wc-attiva: var(--q-ok);
  --wc-costo: color-mix(in srgb, var(--q-muted) 46%, var(--q-surface));
  --wc-fuoco: var(--q-brand-text);
}
/* chiaro: brand-text = brand, l'anello di focus prende un altro colore */
.qa[data-tema="chiaro"].widget-calcolatore,
[data-tema="chiaro"] .qa.widget-calcolatore:not([data-tema]) { --wc-fuoco: var(--q-info); }

/* ---------- testata della bozza: miniatura + titolo del prodotto ---------- */
.widget-calcolatore .wc-testata { gap: .7em; }
.widget-calcolatore .wc-thumb { width: 2.4em; height: 2.4em; border-radius: 8px; }
.widget-calcolatore .wc-thumb .qa-ico { width: 1.25em; height: 1.25em; }
.widget-calcolatore .qa-titolo { font-size: max(.9375rem, calc(var(--qa-u) * 1.2)); letter-spacing: -.015em; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
@container qa (width >= 48rem) {
  .widget-calcolatore .qa-titolo { font-size: calc(var(--qa-u) * 1.35); }
}

/* ---------- schede del modulo prodotto (Dettagli · Prezzo · …) ---------- */
.widget-calcolatore .wc-schede { margin-top: -.35em; }
.widget-calcolatore .wc-schede .qa-scheda.is-attiva { color: var(--q-brand-text); }

/* ---------- corpo: comandi a sinistra, risultato a destra ---------- */
.widget-calcolatore .wc-contenuto { gap: .9em; }
.widget-calcolatore .wc-corpo {
  display: grid;
  gap: .9em;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@container qa (width >= 52rem) {
  .widget-calcolatore .wc-corpo { grid-template-columns: minmax(18.5em, 21em) minmax(0, 1fr); }
}

.widget-calcolatore .wc-intesta { display: grid; gap: .2em; min-width: 0; }
.widget-calcolatore .wc-intesta > strong { font-size: var(--qa-t-b); font-weight: 800; letter-spacing: -.01em; }
.widget-calcolatore .wc-intesta > small { font-size: var(--qa-t-xs); color: var(--q-muted); line-height: 1.4; }

/* ---------- comandi ---------- */
.widget-calcolatore .wc-comandi { gap: 1em; padding: 1.15em 1.15em 1.1em; }

.widget-calcolatore .wc-campo-nome { display: grid; gap: .35em; min-width: 0; }
.widget-calcolatore .wc-cifra { position: relative; display: block; }
.widget-calcolatore .wc-cifra > .wc-unita {
  position: absolute; left: .75em; top: 50%;
  transform: translateY(-50%);
  font-size: max(1rem, calc(var(--qa-u) * 1.45));
  font-weight: 700;
  color: var(--q-muted);
  pointer-events: none;
}
.widget-calcolatore input.wc-costo {
  min-height: 3.4rem;
  padding-left: 1.75em;
  font-size: max(1.0625rem, calc(var(--qa-u) * 1.45));
  font-weight: 800;
  letter-spacing: -.02em;
  background: var(--q-surface-2);
  border-color: color-mix(in srgb, var(--q-muted) 75%, var(--q-surface));
  transition: border-color var(--qa-dur-fast) ease;
}
.widget-calcolatore .wc-campo.is-errore input.wc-costo { border-color: var(--q-bad); }
.widget-calcolatore .is-errore > .qa-aiuto,
.widget-calcolatore .qa-aiuto.is-errore,
.widget-calcolatore small.is-errore { color: var(--q-bad); font-weight: 700; }

/* scala delle 5 fasce di prezzo, con il cursore */
.widget-calcolatore .wc-scala { display: grid; gap: .1em; margin-top: -.15em; }
.widget-calcolatore .wc-fasce,
.widget-calcolatore .wc-binario,
.widget-calcolatore .wc-limiti {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
}
.widget-calcolatore .wc-fascia {
  text-align: center;
  font-size: var(--qa-t-xs);
  font-weight: 800;
  color: var(--q-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color var(--qa-dur-fast) ease;
}
.widget-calcolatore .wc-fascia.is-attiva { color: var(--wc-attiva); }

.widget-calcolatore .wc-pista { position: relative; height: 2.75rem; }
.widget-calcolatore .wc-binario {
  position: absolute; left: 0; right: 0; top: 50%;
  height: .5rem;
  transform: translateY(-50%);
  pointer-events: none;
}
.widget-calcolatore .wc-binario > i {
  display: block;
  border-radius: 2px;
  background: var(--wc-traccia);
  transition: background-color var(--qa-dur-fast) ease;
}
.widget-calcolatore .wc-binario > i:first-child { border-radius: 999px 2px 2px 999px; }
.widget-calcolatore .wc-binario > i:last-child { border-radius: 2px 999px 999px 2px; }
.widget-calcolatore .wc-binario > i.is-passata { background: var(--wc-passata); }
.widget-calcolatore .wc-binario > i.is-attiva { background: var(--wc-attiva); }

.widget-calcolatore input.wc-cursore {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  min-height: 0;
  margin: 0; padding: 0;
  border: 0; border-radius: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}
.widget-calcolatore input.wc-cursore:focus-visible { outline: none; }
.widget-calcolatore input.wc-cursore::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
.widget-calcolatore input.wc-cursore::-moz-range-track { height: 100%; background: transparent; border: 0; }
.widget-calcolatore input.wc-cursore::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem; height: 1.5rem;
  margin-top: 0;
  border-radius: 50%;
  border: 0;
  background: #fff;
  box-shadow: 0 0 0 .3rem var(--q-brand), 0 .35rem .9rem color-mix(in srgb, var(--q-brand) 45%, transparent);
  transition: transform var(--qa-dur-press) var(--qa-ease-out);
}
.widget-calcolatore input.wc-cursore::-moz-range-thumb {
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  border: 0;
  background: #fff;
  box-shadow: 0 0 0 .3rem var(--q-brand), 0 .35rem .9rem color-mix(in srgb, var(--q-brand) 45%, transparent);
  transition: transform var(--qa-dur-press) var(--qa-ease-out);
}
.widget-calcolatore input.wc-cursore:active::-webkit-slider-thumb { transform: scale(1.12); }
.widget-calcolatore input.wc-cursore:active::-moz-range-thumb { transform: scale(1.12); }
/* focus da tastiera: anello staccato dal pomello (fessura del colore di fondo) */
.widget-calcolatore input.wc-cursore:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 .3rem var(--q-brand), 0 0 0 .45rem var(--q-surface), 0 0 0 .65rem var(--wc-fuoco);
}
.widget-calcolatore input.wc-cursore:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 .3rem var(--q-brand), 0 0 0 .45rem var(--q-surface), 0 0 0 .65rem var(--wc-fuoco);
}

.widget-calcolatore .wc-limiti > span {
  font-size: var(--qa-t-xs);
  color: var(--q-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateX(-50%);
  justify-self: start;
}
.widget-calcolatore .wc-limiti > span:first-child { transform: none; }

/* righe «Fascia di costo» e «Profitto desiderato» */
.widget-calcolatore .wc-regola {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2em .8em;
  padding-top: .65em;
  border-top: 1px solid var(--q-line);
  font-size: var(--qa-t-s);
  min-width: 0;
}
.widget-calcolatore .wc-regola + .wc-regola { margin-top: -.45em; }
.widget-calcolatore .wc-regola-testo { color: var(--q-muted); font-weight: 600; white-space: nowrap; }
.widget-calcolatore .wc-regola > strong {
  font-weight: 800;
  text-align: right;
  margin-left: auto;
  min-width: 0;
}
.widget-calcolatore .wc-ok,
.widget-calcolatore .wc-fascia-testo { color: var(--q-ok); }
.widget-calcolatore .wc-regola > strong.wc-neutro { color: var(--q-ink); font-weight: 700; }

/* sintesi sotto il cursore: solo sul telefono, dove i riquadri finiscono lontano */
.widget-calcolatore .wc-sintesi { display: none; }

/* IVA facoltativa: riga con interruttore, come «IVA specifica del prodotto» */
.widget-calcolatore .wc-iva {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55em .7em;
  padding-top: .8em;
  border-top: 1px solid var(--q-line);
}
.widget-calcolatore .wc-iva-testo { display: grid; gap: .2em; flex: 1 1 0; min-width: 0; }
.widget-calcolatore .wc-iva-testo > strong { font-size: var(--qa-t-s); font-weight: 800; }
.widget-calcolatore .wc-iva-testo > small { font-size: var(--qa-t-xs); color: var(--q-muted); line-height: 1.4; }
.widget-calcolatore .wc-iva-campo { display: grid; gap: .35em; flex: 0 0 100%; order: 3; min-width: 0; }
.widget-calcolatore .wc-iva-nome {
  display: flex; align-items: center; justify-content: space-between; gap: .8em;
  font-size: var(--qa-t-s); font-weight: 700; color: var(--q-ink);
}
.widget-calcolatore .wc-iva-cifra { position: relative; display: block; flex: none; font-size: max(1rem, var(--qa-t-m)); }
.widget-calcolatore .wc-iva-cifra > input { width: 6.5em; }
.widget-calcolatore .wc-iva-cifra > .wc-unita {
  position: absolute; right: .8em; top: 50%; transform: translateY(-50%);
  color: var(--q-muted); font-weight: 700; pointer-events: none;
  transition: opacity var(--qa-dur-fast) ease;
}
.widget-calcolatore input.wc-iva-valore {
  text-align: right; padding-right: 1.9em; font-weight: 800;
  transition: opacity var(--qa-dur-fast) ease, border-color var(--qa-dur-fast) ease;
  border-color: color-mix(in srgb, var(--q-muted) 75%, var(--q-surface));
}
.widget-calcolatore input.wc-iva-valore:disabled,
.widget-calcolatore input.wc-iva-valore:disabled + .wc-unita { opacity: .5; }
.widget-calcolatore input.wc-iva-valore:disabled { cursor: not-allowed; }
.widget-calcolatore .wc-iva-errore { font-size: var(--qa-t-xs); line-height: 1.4; color: var(--q-bad); font-weight: 700; text-align: right; }
.widget-calcolatore .wc-iva-errore[hidden] { display: none; }
.widget-calcolatore .wc-iva.is-errore input.wc-iva-valore { border-color: var(--q-bad); }
.widget-calcolatore .wc-interruttore {
  position: relative; display: grid; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem;
  font-size: var(--qa-u);
}
.widget-calcolatore .wc-interruttore > input {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.widget-calcolatore .wc-interruttore > input:focus-visible + .qa-interruttore {
  outline: 2px solid var(--q-brand-text); outline-offset: 2px;
}

/* ---------- risultato ---------- */
.widget-calcolatore .wc-risultati {
  container: wcr / inline-size;
  display: grid; gap: .9em; min-width: 0;
}
.widget-calcolatore .wc-kpi-griglia {
  display: grid; gap: .6em;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@container wcr (width >= 40rem) {
  .widget-calcolatore .wc-kpi-griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.widget-calcolatore .wc-kpi {
  display: grid; gap: .35em; align-content: start;
  min-width: 0;
  padding: .9em 1em;
  border-radius: 12px;
  background: color-mix(in srgb, var(--q-surface-raised) 55%, var(--q-surface));
  border: 1px solid var(--q-line);
}
.widget-calcolatore .wc-kpi--primario {
  background: var(--q-indigo-soft);
  border-color: color-mix(in srgb, var(--q-info) 38%, transparent);
}
.widget-calcolatore .wc-kpi > span {
  font-size: var(--qa-t-xs);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--q-muted);
  overflow-wrap: anywhere;
}
.widget-calcolatore .wc-kpi > strong {
  font-size: clamp(1.0625rem, calc(var(--qa-u) * 1.5), 1.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.widget-calcolatore .wc-kpi > small {
  font-size: var(--qa-t-xs);
  color: var(--q-muted);
  line-height: 1.35;
}
.widget-calcolatore .wc-kpi--profitto > strong { color: var(--q-ok); }

/* composizione del prezzo */
.widget-calcolatore .wc-composizione { gap: .85em; }
.widget-calcolatore .wc-comp-testa {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6em 1em;
}
.widget-calcolatore .wc-margine {
  flex: none;
  padding: .45em .8em;
  border-radius: 999px;
  background: var(--q-lime-soft);
  border: 1px solid color-mix(in srgb, var(--q-ok) 18%, transparent);
  color: var(--q-ok);
  font-size: var(--qa-t-xs);
  font-weight: 900;
  white-space: nowrap;
}

.widget-calcolatore .wc-ripartizione {
  position: relative;
  height: .6rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--wc-traccia);
}
.widget-calcolatore .wc-ripartizione > i {
  position: absolute; inset: 0;
  transform-origin: left center;
  transform: translateX(calc(var(--o, 0) * 100%)) scaleX(var(--v, 0));
}
.widget-calcolatore.wc-morbido .wc-ripartizione > i {
  transition: transform var(--qa-dur-base) var(--qa-ease-out);
}
.widget-calcolatore .wc-r-costo { background: var(--wc-costo); }
.widget-calcolatore .wc-r-comm { background: var(--q-bad); }
.widget-calcolatore .wc-r-prof { background: var(--q-ok); }

.widget-calcolatore .wc-legenda {
  display: flex; flex-wrap: wrap; gap: .45em 1.2em;
  font-size: var(--qa-t-xs);
  font-weight: 700;
  color: var(--q-muted);
}
.widget-calcolatore .wc-legenda > span { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; }
.widget-calcolatore .wc-legenda i { display: block; width: .6rem; height: .6rem; border-radius: 3px; flex: none; }
.widget-calcolatore .wc-legenda b { color: var(--q-ink); font-weight: 800; }

.widget-calcolatore .wc-voci {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  border-top: 1px solid var(--q-line);
}
.widget-calcolatore .wc-voci > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8em;
  padding: .6em .25em;
  border-bottom: 1px solid var(--q-line);
  font-size: var(--qa-t-xs);
  color: var(--q-muted);
  min-width: 0;
}
.widget-calcolatore .wc-voci dt { min-width: 0; overflow-wrap: anywhere; }
.widget-calcolatore .wc-voci dd { margin: 0; flex: none; color: var(--q-ink); font-weight: 700; }
@container wcr (width >= 30rem) {
  .widget-calcolatore .wc-voci { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .widget-calcolatore .wc-voci > div:nth-child(odd) { padding-right: 1.1em; }
  .widget-calcolatore .wc-voci > div:nth-child(even) { padding-left: 1.1em; border-left: 1px solid var(--q-line); }
}

.widget-calcolatore .wc-nota {
  display: flex; align-items: flex-start; gap: .55em;
  font-size: var(--qa-t-xs);
  color: var(--q-muted);
  line-height: 1.5;
  max-width: 72ch;
}
.widget-calcolatore .wc-nota > .qa-ico { width: 1.15em; height: 1.15em; flex: none; margin-top: .12em; color: var(--q-info); }

/* stato «non calcolabile»: valori a «—» */
.widget-calcolatore.is-sospeso .wc-ripartizione > i { opacity: 0; }
.widget-calcolatore.is-sospeso .wc-kpi > strong,
.widget-calcolatore.is-sospeso .wc-sintesi strong,
.widget-calcolatore.is-sospeso .wc-ok,
.widget-calcolatore.is-sospeso .wc-fascia-testo,
.widget-calcolatore.is-sospeso .wc-margine { color: var(--q-muted); }
.widget-calcolatore.is-sospeso .wc-margine { background: var(--q-surface-2); border-color: var(--q-line); }

/* ---------- telefono: meno spazio, stessa gerarchia ---------- */
@container qa (width < 36rem) {
  .widget-calcolatore .wc-contenuto { padding: .75em; gap: .75em; }
  .widget-calcolatore .wc-comandi,
  .widget-calcolatore .wc-composizione { padding: 1em .9em; }
  .widget-calcolatore .wc-kpi { padding: .75em .8em; }
  .widget-calcolatore .wc-thumb { display: none; }
  .widget-calcolatore .wc-sintesi {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: -.2em;
    border-radius: 12px;
    background: var(--q-indigo-soft);
    border: 1px solid color-mix(in srgb, var(--q-info) 38%, transparent);
  }
  .widget-calcolatore .wc-sintesi > span { display: grid; gap: .2em; align-content: space-between; min-width: 0; padding: .65em .8em; }
  .widget-calcolatore .wc-sintesi > span + span { border-left: 1px solid color-mix(in srgb, var(--q-info) 30%, transparent); }
  .widget-calcolatore .wc-sintesi small {
    font-size: var(--qa-t-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    line-height: 1.25; color: var(--q-muted);
    overflow-wrap: anywhere;
  }
  .widget-calcolatore .wc-sintesi strong {
    font-size: clamp(1.0625rem, calc(var(--qa-u) * 1.5), 1.375rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
    overflow-wrap: anywhere;
  }
  .widget-calcolatore .wc-sintesi-profitto strong { color: var(--q-ok); }
}

@media (forced-colors: active) {
  .widget-calcolatore .wc-binario > i.is-attiva,
  .widget-calcolatore .wc-r-prof { background: Highlight; }
  .widget-calcolatore .wc-binario > i,
  .widget-calcolatore .wc-r-costo,
  .widget-calcolatore .wc-r-comm { background: CanvasText; }
  .widget-calcolatore input.wc-cursore:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
  .widget-calcolatore .wc-sintesi { border: 1px solid CanvasText; }
}

/* SAFARI F3: in WebKit il pomello è già centrato; il binario alto quanto il pomello lo centra anche in Chrome */
.widget-calcolatore input.wc-cursore::-webkit-slider-runnable-track { height: 1.5rem; background: transparent; border: 0; }
/* SAFARI F17: finestra sotto 320 px (zoom 200 %): il simbolo € accanto al campo, il campo usa tutta la larghezza */
@media (max-width: 19.99em) {
  .widget-calcolatore .wc-cifra { display: flex; align-items: center; gap: 0.25em; }
  .widget-calcolatore .wc-cifra > .wc-unita { position: static; transform: none; flex: none; }
  .widget-calcolatore input.wc-costo { padding-left: 0.4em; padding-right: 0.25em; min-width: 0; flex: 1 1 auto; font-size: 1rem; }
  .widget-calcolatore .qa-card, .widget-calcolatore .qa-contenuto { padding-inline: 0.5rem; }
  .widget-calcolatore .wc-legenda, .widget-calcolatore .wc-comp-testa { flex-wrap: wrap; }
  .widget-calcolatore .wc-legenda > span, .widget-calcolatore .wc-regola-testo, .widget-calcolatore .wc-margine, .widget-calcolatore .qa-esempio { white-space: normal; min-width: 0; }
}

/* ---- css/widget-estensione.css ---- */
/* =====================================================================
   Qublo · widget «estensione»
   Pagina prodotto generica di un fornitore con i due pulsanti veri
   dell'estensione (src/Qublo.BrowserExtension/content.js:404-506,
   content.css, theme.css) e, accanto, Qublo › Bozze con la bozza creata.
   Solo ciò che app-ui.css non ha. Movimento: transform e opacity.
   ===================================================================== */

/* ---------- token: estensione (theme.css) e pagina del fornitore ----------
   Le pagine vere dei fornitori sono chiare: --we-f-* restano chiari in entrambi
   i temi. Con il tema cambiano solo i pulsanti dell'estensione (--we-x-*, che
   seguono il tema dell'account come theme.css) e la colonna Qublo. */
.widget-estensione {
  /* estensione, tema scuro dell'account */
  --we-x-primario: #5151c9;
  --we-x-primario-hover: #4444b3;
  --we-x-primario-chiaro: #b7b7fa;
  --we-x-ok-fondo: #173725;
  --we-x-ok-testo: #cdf3d6;
  /* pagina del fornitore: neutra e chiara, nessun marchio, nessun colore di negozi veri */
  --we-f-fondo: #ffffff;
  --we-f-sup: #f4f4f6;
  --we-f-sup-2: #eaebee;
  --we-f-linea: #e2e3e8;
  --we-f-ink: #1b1d22;
  --we-f-muto: #5c5f68;
  --we-f-ok: #1d7a3e;
  --we-f-btn: #1b1d22;
  --we-f-btn-testo: #ffffff;
  --we-f-barra: #f1f2f4;
  --we-f-foto: #3d5bd9;
}
.widget-estensione[data-tema="chiaro"],
[data-tema="chiaro"] .widget-estensione:not([data-tema]) {
  --we-x-primario-chiaro: #4444ad;
  --we-x-ok-fondo: #e9f5ec;
  --we-x-ok-testo: #205c30;
}
.widget-estensione[data-tema="scuro"],
[data-tema="scuro"] .widget-estensione:not([data-tema]) {
  --we-x-primario-chiaro: #b7b7fa;
  --we-x-ok-fondo: #173725;
  --we-x-ok-testo: #cdf3d6;
}

/* barra della finestra: titolo breve sotto i 26rem; «Dati di esempio» non tocca il bordo */
.widget-estensione .we-barra-breve { display: none; }
@container qa (width < 26rem) {
  .widget-estensione .we-barra-lungo { display: none; }
  .widget-estensione .we-barra-breve { display: inline; }
}
@container qa (width < 22rem) {
  .widget-estensione .qa-barra { gap: .55em; }
  .widget-estensione .qa-barra > .qa-punti { display: none; }
}
.widget-estensione .qa-barra > .qa-esempio:last-child,
.widget-estensione .qa-barra:has(> .qa-pausa[hidden]) > .qa-esempio { margin-right: .75em; }

/* ---------- scena: due schede affiancate (fornitore | Qublo) ---------- */
.widget-estensione .we-scena {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@container qa (width >= 48rem) {
  .widget-estensione .we-scena { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); }
}
@container qa (width >= 80rem) {
  .widget-estensione .we-scena { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

/* barra dell'indirizzo di ogni scheda */
.widget-estensione .we-indirizzo {
  display: flex; align-items: center; gap: .55em;
  min-height: 2.6em;
  padding: .4em .85em;
  border-bottom: 1px solid var(--we-f-linea);
  background: var(--we-f-barra);
  color: var(--we-f-muto);
  font-size: var(--qa-t-xs);
  min-width: 0;
}
.widget-estensione .we-indirizzo > .qa-ico { width: 1.05em; height: 1.05em; }
.widget-estensione .we-url {
  flex: 1 1 auto; min-width: 0;
  padding: .3em .75em;
  border-radius: 999px;
  background: var(--we-f-sup);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.widget-estensione .we-estensioni { flex: none; display: inline-flex; }
/* icona dell'estensione (icons/qublo-mark, amazon-toolbar.js .qublo-amazon-mark) */
.widget-estensione .we-q-marchio {
  display: inline-grid; place-items: center; flex: none;
  width: 1.75em; height: 1.75em; border-radius: .5em;
  background: linear-gradient(135deg, #b7b7fa, var(--we-x-primario));
  color: #fff;
  font-weight: 900; font-size: var(--qa-t-xs); line-height: 1;
}

/* =====================================================================
   1. Pagina del fornitore
   ===================================================================== */
.widget-estensione .we-fornitore {
  container: we-f / inline-size;
  position: relative;
  min-width: 0;
  background: var(--we-f-fondo);
  color: var(--we-f-ink);
}
.widget-estensione .we-pagina { display: grid; gap: .8em; padding: .9em 1em 1.15em; min-width: 0; }

.widget-estensione .we-testa { display: flex; align-items: center; gap: .8em; min-width: 0; }
.widget-estensione .we-logo-finto { display: inline-flex; align-items: center; gap: .3em; flex: none; }
.widget-estensione .we-logo-finto > i { display: block; height: 1.15em; border-radius: .3em; background: var(--we-f-sup-2); }
.widget-estensione .we-logo-finto > i:first-child { width: 1.15em; border-radius: 50%; background: var(--we-f-ink); }
.widget-estensione .we-logo-finto > i:last-child { width: 3.4em; height: .6em; }
.widget-estensione .we-cerca {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: .5em;
  min-height: 2.3em; padding: 0 .8em;
  border: 1px solid var(--we-f-linea); border-radius: 999px;
  background: var(--we-f-sup);
  color: var(--we-f-muto);
  font-size: var(--qa-t-xs);
}
.widget-estensione .we-cerca > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.widget-estensione .we-cerca .qa-ico { width: 1.05em; height: 1.05em; }
.widget-estensione .we-carrello-ico { width: 1.35em; height: 1.35em; color: var(--we-f-muto); }

.widget-estensione .we-percorso {
  color: var(--we-f-muto);
  font-size: var(--qa-t-xs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* prodotto: telefono = foto piccola + testo, poi il riquadro d'acquisto */
.widget-estensione .we-prodotto {
  display: grid;
  grid-template-columns: 6.2em minmax(0, 1fr);
  grid-template-areas: "galleria info" "acquisto acquisto";
  gap: .9em 1em;
  align-items: start;
  min-width: 0;
}
.widget-estensione .we-galleria { grid-area: galleria; display: grid; gap: .5em; min-width: 0; }
.widget-estensione .we-info { grid-area: info; display: grid; gap: .45em; min-width: 0; }
.widget-estensione .we-acquisto { grid-area: acquisto; min-width: 0; }

@container we-f (width >= 30rem) {
  .widget-estensione .we-prodotto {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
    grid-template-areas: "galleria info" "galleria acquisto";
    gap: 1em 1.25em;
  }
}
@container we-f (width >= 47rem) {
  .widget-estensione .we-prodotto {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.05fr) minmax(0, .9fr);
    grid-template-areas: "galleria info acquisto";
    gap: 1.4em;
  }
}

.widget-estensione .we-foto {
  display: grid; place-items: center;
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--we-f-sup);
  border: 1px solid var(--we-f-linea);
  color: var(--we-f-foto);
}
.widget-estensione .we-foto .qa-ico { width: 46%; height: 46%; stroke-width: 1.5; }
.widget-estensione .we-foto .qa-ico path { vector-effect: non-scaling-stroke; }
.widget-estensione .we-miniature { display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45em; }
.widget-estensione .we-miniature > i {
  display: grid; place-items: center;
  aspect-ratio: 1; border-radius: 8px;
  background: var(--we-f-sup); border: 1px solid var(--we-f-linea);
  color: var(--we-f-foto);
}
.widget-estensione .we-miniature > i.is-attiva { border-color: var(--we-f-ink); box-shadow: 0 0 0 1px var(--we-f-ink); }
.widget-estensione .we-miniature .qa-ico { width: 52%; height: 52%; stroke-width: 1.6; }
.widget-estensione .we-miniature .qa-ico path { vector-effect: non-scaling-stroke; }
/* stessa lampada: di lato e nelle altre due tinte dei campioni */
.widget-estensione .we-mini-specchio .qa-ico { transform: scaleX(-1); }
.widget-estensione .we-mini-ardesia { color: #5d6470; }
.widget-estensione .we-mini-scura { color: #2b2d33; }
@container we-f (width >= 30rem) { .widget-estensione .we-miniature { display: grid; } }

.widget-estensione .we-nome {
  font-size: var(--qa-t-b); font-weight: 650; line-height: 1.32; letter-spacing: -.005em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
.widget-estensione .we-prezzo { font-size: calc(var(--qa-u) * 1.55); font-weight: 750; letter-spacing: -.015em; line-height: 1.1; }
.widget-estensione .we-variante { font-size: var(--qa-t-s); color: var(--we-f-muto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget-estensione .we-variante b { color: var(--we-f-ink); font-weight: 650; }
.widget-estensione .we-campioni { display: flex; gap: .45em; }
.widget-estensione .we-campioni > i { width: 1.55em; height: 1.55em; border-radius: 50%; border: 2px solid var(--we-f-fondo); box-shadow: 0 0 0 1px var(--we-f-linea); }
.widget-estensione .we-campioni > i:nth-child(1) { background: #5d6470; }
.widget-estensione .we-campioni > i:nth-child(2) { background: #e9e6df; }
.widget-estensione .we-campioni > i:nth-child(3) { background: #2b2d33; }
.widget-estensione .we-campioni > i.is-scelto { box-shadow: 0 0 0 2px var(--we-f-ink); }

/* riquadro d'acquisto */
.widget-estensione .we-acquisto {
  display: grid; gap: .6em;
  padding: .9em;
  border: 1px solid var(--we-f-linea);
  border-radius: 12px;
  background: var(--we-f-fondo);
}
.widget-estensione .we-disponibile { color: var(--we-f-ok); font-size: var(--qa-t-s); font-weight: 650; }
.widget-estensione .we-quantita {
  display: flex; align-items: center; justify-content: space-between; gap: .5em;
  min-height: 2.5em; padding: 0 .55em 0 .8em;
  border: 1px solid var(--we-f-linea); border-radius: 8px;
  background: var(--we-f-sup);
  font-size: var(--qa-t-s);
  white-space: nowrap;
}
.widget-estensione .we-quantita .qa-ico { width: 1em; height: 1em; color: var(--we-f-muto); }
.widget-estensione .we-carrello {
  display: flex; align-items: center; justify-content: center;
  min-height: 2.75em; padding: 0 1em;
  border-radius: 999px;
  background: var(--we-f-btn); color: var(--we-f-btn-testo);
  font-size: var(--qa-t-s); font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- i due pulsanti dell'estensione (content.css) ---------- */
.widget-estensione .we-q-azioni { position: relative; display: flex; flex-direction: column; gap: .55em; margin: .1em 0; min-width: 0; }
/* passi 1-2: anello che compare una volta (solo opacity e transform) */
.widget-estensione .we-q-azioni::after {
  content: ""; position: absolute; inset: -5px; z-index: 1;
  border: 2px solid var(--we-x-primario); border-radius: 12px;
  pointer-events: none;
  opacity: 0; transform: scale(1.04);
  transition: opacity 260ms var(--qa-ease-out), transform 420ms var(--qa-ease-out);
}
.widget-estensione .we-fornitore.is-fuoco .we-q-azioni::after { opacity: 1; transform: none; }
/* il resto della pagina del fornitore si abbassa mentre il cursore lavora */
.widget-estensione :is(.we-indirizzo, .we-testa, .we-percorso, .we-galleria, .we-info, .we-disponibile, .we-quantita, .we-carrello) {
  transition: opacity 320ms var(--qa-ease-out);
}
.widget-estensione .we-fornitore.is-fuoco :is(.we-indirizzo, .we-testa, .we-percorso, .we-galleria, .we-info, .we-disponibile, .we-quantita, .we-carrello) { opacity: .82; }
.widget-estensione .we-acquisto > * { min-width: 0; }
.widget-estensione .we-q-btn {
  display: flex; align-items: center; justify-content: center; gap: .45em;
  width: 100%; min-width: 0;
  min-height: 3.15em;                 /* 38 px a 12 px */
  padding: .2em .65em;
  border-radius: 8px;
  background: var(--we-x-primario);
  color: #fff;
  font-size: var(--qa-t-xs); font-weight: 700; line-height: 1.25;
  text-align: center;
  transition: background-color var(--qa-dur-fast) ease, color var(--qa-dur-fast) ease, transform var(--qa-dur-press) var(--qa-ease-out);
}
.widget-estensione .we-q-ico { flex: none; font-size: 1.5em; font-weight: 800; line-height: 1; }
.widget-estensione .we-q-testo { min-width: 0; overflow-wrap: anywhere; }   /* come content.css: white-space normal */
.widget-estensione .we-q-btn[data-stato="pending"] { background: var(--we-x-primario-hover); }
.widget-estensione .we-q-btn[data-stato="imported"] { background: var(--we-x-ok-fondo); color: var(--we-x-ok-testo); }
.widget-estensione .we-q-btn.is-premuto { transform: scale(.97); }

/* =====================================================================
   2. Qublo › Bozze
   ===================================================================== */
.widget-estensione .we-qublo {
  container: we-q / inline-size;
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--q-bg);
  border-top: 1px solid var(--q-line);
}
@container qa (width >= 48rem) {
  .widget-estensione .we-qublo { border-top: 0; border-left: 1px solid var(--q-line); }
}
.widget-estensione .we-indirizzo--qublo { background: var(--qa-barra-fondo); border-color: var(--q-line); color: var(--q-muted); }
.widget-estensione .we-indirizzo--qublo .we-url { background: var(--q-surface-2); }
.widget-estensione .we-qublo-corpo { display: grid; gap: .9em; align-content: start; padding: 1em; min-width: 0; }
@container qa (width >= 48rem) { .widget-estensione .we-qublo-corpo { padding: 1.15em 1.15em 1.3em; } }

.widget-estensione .we-qublo-testa { display: flex; align-items: center; gap: .6em; min-width: 0; }
.widget-estensione .we-conto { overflow: hidden; }
.widget-estensione .we-conto-n { display: inline-block; }
.widget-estensione .we-qublo-titolo {
  font-size: calc(var(--qa-u) * 1.5); font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

/* tabella a righe in griglia: le colonne si tolgono con la larghezza */
.widget-estensione .we-riga {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .9em;
  padding: .7em .9em;
  border-top: 1px solid var(--q-line);
  font-size: var(--qa-t-m);
  min-width: 0;
}
.widget-estensione .we-intesta {
  border-top: 0;
  padding-block: .8em;
  color: var(--q-brand-text);
  font-size: var(--qa-t-s); font-weight: 800;
  white-space: nowrap;
}
.widget-estensione .we-intesta > span { overflow: hidden; text-overflow: ellipsis; }
.widget-estensione .we-col-data, .widget-estensione .we-col-prezzo { display: none; }
.widget-estensione .we-col-data { white-space: nowrap; }
/* come Drafts.razor:370 e 1600: ordinate per UpdatedAt decrescente */
.widget-estensione .we-intesta .we-col-data::after { content: " \2193" / ""; color: var(--q-brand-text); }
.widget-estensione .we-intesta .we-col-profitto,
.widget-estensione .we-riga > .qa-profitto { min-width: 5.6em; }
@container we-q (width >= 25rem) {
  .widget-estensione .we-riga { grid-template-columns: minmax(0, 1fr) auto auto; }
  .widget-estensione .we-col-prezzo { display: grid; }
  .widget-estensione .we-intesta .we-col-prezzo { display: block; min-width: 6.4em; }
}
@container we-q (width >= 37rem) {
  .widget-estensione .we-riga { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 1.1em; }
  .widget-estensione .we-col-data { display: block; }
}

.widget-estensione .we-riga .qa-prodotto { gap: .7em; }
.widget-estensione .we-riga .qa-thumb { width: 2.6em; height: 2.6em; }
.widget-estensione .we-cella-prodotto { display: grid; gap: .35em; min-width: 0; }
.widget-estensione .we-cella-prodotto > strong {
  display: block; font-weight: 800; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* righe: tre posti visibili (due sul telefono); la quarta resta sotto il bordo */
.widget-estensione .we-righe {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-rows: 0;
  overflow: clip;
}
@container qa (width < 36rem) {
  .widget-estensione .we-righe { grid-template-rows: repeat(2, auto); }
}
@container qa (width >= 48rem) {
  .widget-estensione .we-righe { grid-template-rows: repeat(4, auto); }
}
.widget-estensione .we-righe > .we-riga { align-self: start; }
.widget-estensione .we-nuova { background: var(--q-indigo-soft); }
/* «Stock disattivo»: testo muto pieno (AA anche in tema scuro); la differenza la fanno sfondo e bordo */
.widget-estensione .qa-pill--spenta { color: var(--q-muted); }

/* =====================================================================
   3. Movimento (solo transform e opacity)
   ===================================================================== */
.widget-estensione .we-vecchia {
  transition: transform 640ms var(--qa-ease-move);
}
.widget-estensione .we-righe.is-su > .we-vecchia { transform: translateY(calc(var(--we-passo, 4em) * -1)); }
.widget-estensione .we-nuova {
  transition: opacity 420ms var(--qa-ease-out), transform 520ms var(--qa-ease-out), background-color var(--qa-dur-fast) ease;
}
.widget-estensione .we-nuova.is-attesa { opacity: 0; transform: scale(.985); }

.widget-estensione .we-cursore,
.widget-estensione .we-volo {
  position: absolute; left: 0; top: 0; z-index: 6;
  pointer-events: none;
  opacity: 0;
}
.widget-estensione .we-cursore { width: 1.45em; height: 1.45em; }
.widget-estensione .we-cursore svg { width: 100%; height: 100%; fill: #fff; stroke: #15161b; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.widget-estensione .we-volo {
  z-index: 5;
  display: flex; align-items: center; gap: .35em;
  padding: .3em;
  border-radius: 12px;
  border: 1px solid var(--q-brand-line);
  background: var(--q-surface);
  box-shadow: var(--q-shadow);
}
.widget-estensione .we-volo .qa-thumb { width: 2.4em; height: 2.4em; }
.widget-estensione .we-volo .we-q-marchio { margin-right: .1em; }

@media (prefers-reduced-motion: reduce) {
  .widget-estensione .we-righe.is-su > .we-vecchia { transform: none; }
  .widget-estensione .we-nuova.is-attesa { opacity: 1; transform: none; }
  .widget-estensione .we-cursore, .widget-estensione .we-volo { display: none; }
}
@media print {
  .widget-estensione .we-cursore, .widget-estensione .we-volo { display: none; }
}
@media (forced-colors: active) {
  .widget-estensione .we-q-btn, .widget-estensione .we-carrello, .widget-estensione .we-acquisto { border: 1px solid CanvasText; }
}

/* righe oltre il primo posto nascosto: restano invisibili (non si sovrappongono durante lo scorrimento) */
@container qa (width < 36rem) { .widget-estensione .we-righe > .we-riga:nth-child(n+4) { opacity: 0; } }
@container qa (36rem <= width < 48rem) { .widget-estensione .we-righe > .we-riga:nth-child(n+5) { opacity: 0; } }

/* telefono: pagina del fornitore compatta, così pulsanti e Bozze stanno in uno schermo */
@container qa (width < 36rem) {
  .widget-estensione :is(.we-testa, .we-percorso, .we-campioni, .we-disponibile) { display: none; }
  .widget-estensione .we-pagina { gap: .6em; padding: .75em .85em .9em; }
  .widget-estensione .we-acquisto { gap: .5em; padding: .75em; }
  .widget-estensione .we-nome { -webkit-line-clamp: 2; }
  .widget-estensione .we-qublo-corpo { gap: .7em; padding: .85em; }
}
@container we-f (width < 30rem) {
  .widget-estensione .we-prodotto { grid-template-columns: 4.5em minmax(0, 1fr); gap: .7em .8em; }
}

/* ---- css/widget-fasce.css ---- */
/* =====================================================================
   Qublo · widget «fasce» — Impostazioni › Account eBay › Prezzi e disponibilità
   Fonte: EbayAccountEditDialog.razor (+ .razor.css) su origin/main.
   Si appoggia a app-ui.css; qui solo il dialogo dell'account e la bozza.
   Movimento: solo opacity e transform; colori con ease 180 ms.
   ===================================================================== */

.widget-fasce .wf-scena { display: grid; gap: 1em; min-width: 0; }
/* bozza sotto il dialogo: card compatta allineata a destra, sotto la fascia che cambia */
@container qa (width < 80rem) {
  .widget-fasce .wf-campo.wf-da-xl { display: none; }
  .widget-fasce .wf-bozza { width: 100%; max-width: 40rem; justify-self: end; }
}
@container qa (width >= 80rem) {
  .widget-fasce .wf-scena { grid-template-columns: minmax(0, 1fr) 18.5em; align-items: end; }
  .widget-fasce .wf-bozza { margin-bottom: 4.5em; }
  .widget-fasce .wf-due > .wf-account { grid-column: 1 / -1; }   /* come nell'app: primo campo, a tutta riga */
}

/* ---------- dialogo dell'account ---------- */
.widget-fasce .wf-dialogo {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--q-surface);
  border: 1px solid var(--q-line);
  border-radius: 1.2em;
  box-shadow: var(--q-shadow);
  overflow: hidden;
}
.widget-fasce .wf-testa {
  display: flex; align-items: center; gap: .75em;
  padding: .75em 1em;
  border-bottom: 1px solid var(--q-line);
}
.widget-fasce .wf-tasto {
  display: grid; place-items: center; flex: none;
  width: 2.5em; height: 2.5em;
  border-radius: .7em; border: 1px solid var(--q-line);
  background: var(--q-surface-2); color: var(--q-ink);
}
.widget-fasce .wf-nome {
  flex: 1; min-width: 0;
  font-size: var(--qa-t-l); font-weight: 750; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.widget-fasce .wf-corpo { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }

/* navigazione delle sezioni: in colonna come nell'app; stretta = solo la sezione aperta */
.widget-fasce .wf-nav {
  display: flex; gap: .4em;
  padding: .6em .75em;
  border-bottom: 1px solid var(--q-line);
  min-width: 0;
}
.widget-fasce .wf-nav > li {
  display: flex; align-items: center; gap: .6em; min-width: 0;
  padding: .75em .9em;
  border-radius: .7em;
  font-size: var(--qa-t-s); font-weight: 700; color: var(--q-ink);
}
.widget-fasce .wf-nav > li > span { min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.widget-fasce .wf-nav .qa-ico { width: 1.35em; height: 1.35em; stroke-width: 1.7; }
.widget-fasce .wf-nav > li.is-attiva {
  background: var(--q-brand); color: var(--q-on-brand);
  box-shadow: 0 6px 16px rgba(81, 81, 201, .2);
}
.widget-fasce .wf-nav > .wf-altra { display: none; }
@container qa (width >= 56rem) {
  .widget-fasce .wf-corpo { grid-template-columns: 15.5em minmax(0, 1fr); }
  .widget-fasce .wf-nav {
    flex-direction: column; gap: .35em;
    padding: 1em .9em;
    border-bottom: 0; border-right: 1px solid var(--q-line);
  }
  .widget-fasce .wf-nav > .wf-altra { display: flex; }
}

/* sezione «Prezzi e disponibilità» */
.widget-fasce .wf-sezione { display: grid; align-content: start; padding: .2em 1.6em 1.3em; min-width: 0; }
.widget-fasce .wf-campo { display: grid; min-width: 0; margin-top: 1em; }
.widget-fasce .wf-due {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.2em; align-items: end;
}
.widget-fasce .wf-etichetta { font-size: var(--qa-t-b); font-weight: 800; }
.widget-fasce .wf-aiuto {
  margin: .25em 0 .65em;
  font-size: var(--qa-t-s); font-weight: 400; line-height: 1.45; color: var(--q-muted);
}
.widget-fasce .wf-input {
  min-height: 3.2em; border-radius: .8em;
  font-size: var(--qa-t-b); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color var(--qa-dur-fast) ease;
}
.widget-fasce .wf-input.is-attivo { outline: 2px solid var(--q-brand-text); outline-offset: 1px; border-color: transparent; }

/* blocco «Fasce di prezzo» */
.widget-fasce .wf-fasce { margin-top: 1.25em; min-width: 0; }
.widget-fasce .wf-fasce-titolo { display: block; font-size: var(--qa-t-b); font-weight: 750; }
.widget-fasce .wf-fasce-aiuto {
  display: block; max-width: 62ch;
  margin: .3em 0 .9em;
  font-size: var(--qa-t-s); line-height: 1.45; color: var(--q-muted);
}
.widget-fasce .wf-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .95em 1.2em; }
.widget-fasce .wf-fascia { display: grid; gap: .5em; min-width: 0; }
.widget-fasce .wf-fascia:last-child { grid-column: 1 / -1; }
.widget-fasce .wf-fascia-nome {
  font-size: max(.75rem, calc(var(--qa-u) * .94)); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.widget-fasce .wf-valore {
  display: inline-flex; align-items: center;
  margin: 0 -.12em; padding: 0 .12em;
  border-radius: .25em;
  transition: background-color var(--qa-dur-fast) ease;
}
.widget-fasce .wf-valore.is-selezionato { background: color-mix(in srgb, var(--q-brand) 50%, transparent); }
.widget-fasce .wf-valore .qa-cursore { margin-left: .08em; }

/* piede */
.widget-fasce .wf-piede {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  padding: .8em 1.6em;
  border-top: 1px solid var(--q-line);
}
.widget-fasce .wf-link {
  min-width: 0;
  font-size: var(--qa-t-s); font-weight: 700; color: var(--q-brand-text);
  text-decoration: underline; text-underline-offset: .2em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.widget-fasce .wf-salva { display: inline-grid; place-items: center; flex: none; min-height: 3em; padding: 0 1.3em; }
.widget-fasce .wf-salva > span { grid-area: 1 / 1; transition: opacity var(--qa-dur-fast) ease; }
.widget-fasce .wf-salva-b { opacity: 0; }
.widget-fasce .wf-salva.is-salva .wf-salva-a { opacity: 0; }
.widget-fasce .wf-salva.is-salva .wf-salva-b { opacity: 1; }

/* ---------- la bozza che usa la fascia ---------- */
.widget-fasce .wf-bozza {
  container: wfb / inline-size;
  position: relative;
  display: grid; gap: .85em; min-width: 0;
  padding: 1em 1.15em;
  background: var(--q-surface);
  border: 1px solid var(--q-line);
  border-radius: 1.1em;
  box-shadow: var(--q-shadow);
  overflow: hidden;
}
.widget-fasce .wf-bozza-testa { display: flex; align-items: center; gap: .5em; min-width: 0; font-size: var(--qa-t-s); }
.widget-fasce .wf-bozza-testa > .qa-ico { color: var(--q-brand-text); }
.widget-fasce .wf-bozza-testa > strong { font-weight: 800; flex: none; }
.widget-fasce .wf-bozza-stato {
  margin-left: auto; min-width: 0;
  font-size: var(--qa-t-xs); font-weight: 600; color: var(--q-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.widget-fasce .wf-bozza-riga { display: grid; gap: .9em; min-width: 0; }
.widget-fasce .wf-bozza-prodotto strong { font-size: var(--qa-t-m); }
.widget-fasce .wf-bozza-numeri { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 1.8em; }
.widget-fasce .wf-col { display: grid; align-content: start; gap: .35em; min-width: 0; }
.widget-fasce .wf-col-testa { font-size: var(--qa-t-s); font-weight: 800; color: var(--q-brand-text); }
.widget-fasce .wf-bozza-piede { min-width: 0; text-align: left; }
/* differenza del prezzo di vendita, accanto a VEN */
.widget-fasce .wf-delta {
  display: inline-flex; align-items: center; gap: .2em; flex: none; align-self: center;
  padding: .15em .45em .15em .3em;
  border-radius: 999px;
  background: var(--q-lime-soft); color: var(--q-ok);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q-ok) 30%, transparent);
  font-size: var(--qa-t-xs); font-weight: 800;
  transition: opacity var(--qa-dur-base) var(--qa-ease-out), transform var(--qa-dur-base) var(--qa-ease-out);
}
.widget-fasce .wf-delta .qa-ico { width: 1em; height: 1em; stroke-width: 2.4; }
.widget-fasce .wf-delta.qa-prima { opacity: 0; transform: translateY(.4em) scale(.96); }
.widget-fasce .wf-nota { display: block; font-size: var(--qa-t-xs); line-height: 1.4; color: var(--q-muted); }

/* VEN e ROI cambiano a scatto (con centesimi 99 non esistono valori intermedi): breve dissolvenza */
.widget-fasce .wf-ven, .widget-fasce .wf-roi { transition: opacity var(--qa-dur-fast) ease; }
.widget-fasce .wf-scatto { opacity: 0; }

/* lampo del ricalcolo: solo opacità */
.widget-fasce .wf-lampo {
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px var(--q-brand-text);
  background: color-mix(in srgb, var(--q-brand) 8%, transparent);
  opacity: 0;
  transition: opacity var(--qa-dur-reveal) var(--qa-ease-out);
}
.widget-fasce .wf-bozza.is-lampo .wf-lampo { opacity: 1; transition-duration: var(--qa-dur-fast); }

/* bozza larga (sotto il dialogo): prodotto a sinistra, numeri a destra */
@container wfb (width >= 34rem) {
  .widget-fasce .wf-bozza-riga { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2em; }
}

/* ---------- telefono: versione semplice ---------- */
@container qa (width < 36rem) {
  .widget-fasce .wf-sezione { padding: 0 1em 1em; }
  .widget-fasce .wf-testa { padding: .6em .75em; }
  .widget-fasce .wf-tasto { width: 2.3em; height: 2.3em; }
  .widget-fasce .wf-fasce { margin-top: .9em; }
  .widget-fasce .wf-griglia { grid-template-columns: minmax(0, 1fr); gap: .45em; }
  .widget-fasce .wf-fascia { grid-template-columns: minmax(0, 1fr) 4.4em; align-items: center; gap: .8em; }
  .widget-fasce .wf-fascia .wf-input { min-height: 2.75em; justify-content: center; }
  .widget-fasce .wf-piede { padding: .7em 1em; }
  .widget-fasce .wf-salva { padding: 0 1em; }
  .widget-fasce .wf-nav { display: none; }
  /* corto: campo e bozza nella stessa schermata */
  .widget-fasce .wf-fasce-aiuto,
  .widget-fasce .wf-fascia:nth-child(n+4),
  .widget-fasce .wf-piede .wf-link { display: none; }
  .widget-fasce .wf-fasce-titolo { margin-bottom: .55em; }
  .widget-fasce .wf-piede { justify-content: flex-end; }
  .widget-fasce .wf-bozza { padding: .85em .9em; gap: .65em; }
  .widget-fasce .wf-bozza .qa-thumb { display: none; }
  .widget-fasce .wf-bozza-prodotto strong { -webkit-line-clamp: 1; }
  .widget-fasce .wf-bozza-numeri { gap: 1.4em; }
}

/* ---- css/widget-importa.css ---- */
/* =====================================================================
   Qublo · widget «importa» — Bozze → «Crea Nuove Bozze» → stato importazione
   Fonti (origin/main): Pages/Drafts.razor (finestra e tabella),
   Pages/Drafts.razor.css (.q-import-*), Components/Imports/GlobalImportStatus.razor(.css).
   Solo ciò che app-ui.css non ha. Movimento: transform e opacity.
   ===================================================================== */

.widget-importa {
  --wi-sheet: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------- pagina ---------- */
.widget-importa .qa-contenuto { padding-bottom: 8.4em; }   /* spazio vero per lo stato importazione */
.widget-importa .wi-nowrap { white-space: nowrap; }
.widget-importa .qa-tabella th { vertical-align: middle; }
.widget-importa .wi-ordina {
  display: inline-block; width: .95em; height: .95em;
  margin-left: .3em; vertical-align: -.12em; opacity: .7;
}
.widget-importa .wi-pagine { display: inline-flex; gap: .6em; color: var(--q-muted); }
/* Tutte le righe alte uguali (CLS 0 mentre entrano ed escono): titolo sempre su 2 righe, pillole su una. */
.widget-importa .qa-prodotto strong { max-width: 22em; min-height: 2.5em; }   /* 2 × line-height 1.25 */
/* pillole su una riga: quella che non ci sta va a capo e resta nascosta (mai tagliata a metà) */
.widget-importa .qa-prodotto .qa-pillole { font-size: var(--qa-t-xs); height: 1.75em; overflow: hidden; min-width: 0; }
.widget-importa .qa-azione { width: 1.75em; height: 1.75em; border-radius: 8px; }   /* 28 px, come le azioni vere */
/* Mercato da 62rem (a 1100 px si vede il negozio); Quantità e ID prodotto solo dove c'è posto:
   a 1100 px le 9 colonne non stanno nell'area tabella (≈ 840 px) senza schiacciare il titolo. */
@container qa (width < 62rem) { .widget-importa .wi-da-l { display: none !important; } }
@container qa (width < 76rem) { .widget-importa .wi-da-xl { display: none !important; } }
@container qa (width < 86rem) { .widget-importa .wi-da-xxl { display: none !important; } }

/* ---------- righe: quante se ne vedono (stato finale = nessun data-arrivate) ----------
   DOM: n3 n2 n1 (nuove, la più recente in alto) · o1…o4 (bozze già presenti).
   Telefono: 3 righe in tutto. Da 36rem: 4. */
.widget-importa .wi-riga {
  transition: opacity 360ms var(--qa-ease-out), transform 460ms var(--qa-ease-move);
}
.widget-importa .wi-riga > td { transition: background-color var(--qa-dur-fast) ease; }
.widget-importa .wi-o { display: none; }
.widget-importa[data-arrivate="0"] .wi-n,
.widget-importa[data-arrivate="1"] :is(.wi-n2, .wi-n3),
.widget-importa[data-arrivate="2"] .wi-n3 { display: none; }
.widget-importa[data-arrivate="0"] :is(.wi-o1, .wi-o2, .wi-o3),
.widget-importa[data-arrivate="1"] :is(.wi-o1, .wi-o2),
.widget-importa[data-arrivate="2"] .wi-o1 { display: table-row; }
@container qa (width >= 36rem) {
  .widget-importa:not([data-arrivate]) .wi-o1,
  .widget-importa[data-arrivate="3"] .wi-o1,
  .widget-importa[data-arrivate="2"] .wi-o2,
  .widget-importa[data-arrivate="1"] .wi-o3,
  .widget-importa[data-arrivate="0"] .wi-o4 { display: table-row; }
}
.widget-importa .wi-riga.wi-entra { opacity: 0; transform: translateY(-.9em); }
.widget-importa .wi-riga.wi-nuova { transition-delay: 220ms; }   /* prima le righe fanno spazio, poi entra la bozza */
.widget-importa .wi-riga.wi-esce { opacity: 0; transition-duration: var(--qa-dur-fast); }
.widget-importa .wi-riga.wi-nuova > td { background: var(--q-indigo-soft); }

/* pulsante premuto: colore più scuro, come l'hover vero */
.widget-importa .qa-btn--primario.is-premuto { background: var(--q-brand-dark); }

/* ---------- «Crea Nuove Bozze» (finestra sopra la pagina) ---------- */
.widget-importa .wi-velo {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center;
  padding: 1em;
  background: var(--q-overlay);
  opacity: 0; visibility: hidden;
  transition: opacity var(--qa-dur-base) var(--qa-ease-out), visibility 0s linear var(--qa-dur-base);
}
.widget-importa[data-fase="modale"] .wi-velo {
  opacity: 1; visibility: visible;
  transition: opacity var(--qa-dur-base) var(--qa-ease-out), visibility 0s;
}
.widget-importa .wi-modale {
  width: min(38em, 100%);
  min-width: 0;
  background: var(--q-surface);
  border: 1px solid var(--q-line);
  border-radius: 16px;
  box-shadow: var(--q-shadow);
  overflow: clip;
  transform: translateY(1em) scale(.97);
  transition: transform 380ms var(--wi-sheet);
}
.widget-importa[data-fase="modale"] .wi-modale { transform: none; }

.widget-importa .wi-modale-testa {
  display: flex; align-items: flex-start; gap: 1em;
  padding: 1.05em 1.25em .95em;
  border-bottom: 1px solid var(--q-line);
}
.widget-importa .wi-modale-testa > div { display: grid; gap: .3em; min-width: 0; }
.widget-importa .wi-modale-titolo { font-size: var(--qa-t-l); font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.widget-importa .wi-modale-sotto { font-size: var(--qa-t-s); color: var(--q-muted); font-weight: 560; line-height: 1.4; }
.widget-importa .wi-chiudi {
  display: grid; place-items: center; flex: none; margin-left: auto;
  width: 2.1em; height: 2.1em; border-radius: 8px;
  border: 1px solid var(--q-line); color: var(--q-muted);
}
.widget-importa .wi-chiudi .qa-ico { width: 1em; height: 1em; }

.widget-importa .wi-modale-corpo { display: grid; gap: .85em; padding: 1em 1.25em 1.15em; min-width: 0; }
.widget-importa .wi-metodo {
  display: inline-flex; gap: 3px; width: fit-content; max-width: 100%;
  padding: 4px; border-radius: 10px;
  background: var(--q-surface-raised); border: 1px solid var(--q-line);
}
.widget-importa .wi-metodo > span {
  padding: .6em 1.05em; border-radius: 7px;
  font-size: var(--qa-t-xs); font-weight: 800; color: var(--q-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.widget-importa .wi-metodo > .is-attivo { background: var(--q-brand); color: var(--q-on-brand); }

.widget-importa .wi-area {
  display: grid; align-items: start;
  min-height: 6.4em; padding: .6em .8em;
  white-space: normal;
}
.widget-importa .wi-segnaposto,
.widget-importa .wi-incollato { grid-area: 1 / 1; display: grid; min-width: 0; }
.widget-importa .wi-segnaposto > span,
.widget-importa .wi-linea {
  display: block; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.55;
}
.widget-importa .wi-segnaposto { color: var(--q-muted); opacity: 0; transition: opacity var(--qa-dur-fast) ease; }
.widget-importa.wi-vuota .wi-segnaposto { opacity: 1; }
.widget-importa .wi-linea { transition: opacity var(--qa-dur-base) var(--qa-ease-out), transform var(--qa-dur-base) var(--qa-ease-out); }
.widget-importa .wi-linea.qa-prima { opacity: 0; transform: translateY(.35em); }

.widget-importa .wi-modale-piede {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75em 1em;
  padding: .9em 1.25em;
  border-top: 1px solid var(--q-line);
  background: var(--q-surface-2);
}
.widget-importa .wi-varianti { display: inline-flex; align-items: center; gap: .6em; font-size: var(--qa-t-s); font-weight: 500; min-width: 0; }
.widget-importa .wi-invia { margin-left: auto; text-align: center; transition: opacity var(--qa-dur-fast) ease, background-color var(--qa-dur-fast) ease, transform var(--qa-dur-press) var(--qa-ease-out); }
.widget-importa .wi-invia.wi-spento { opacity: .55; }

/* ---------- stato importazione (GlobalImportStatus, in basso a destra) ---------- */
.widget-importa .wi-stato {
  position: absolute; z-index: 5;
  right: 1em; bottom: 1em;
  width: min(28em, calc(100% - 2em));
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: .8em;
  min-height: 4.9em;
  padding: .8em 3.1em .8em .9em;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--q-brand-text) 35%, var(--q-line));
  background: radial-gradient(circle at 100% 0, var(--q-indigo-soft), transparent 42%), var(--q-surface);
  box-shadow: 0 18px 48px var(--q-shadow-color);
  transition: opacity var(--qa-dur-base) var(--qa-ease-out), transform 380ms var(--wi-sheet);
}
.widget-importa .wi-stato.qa-prima { opacity: 0; transform: translateY(1.2em); }
.widget-importa .wi-stato.qa-prima.wi-via {           /* esce come dopo un clic sulla × */
  transition-duration: var(--qa-dur-base), var(--qa-dur-base);
  transition-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
}
/* concluso (stato finale): «Completato», senza spinner, riga piccola né barra, come l'app senza lavori attivi */
.widget-importa .wi-stato[data-concluso] { grid-template-columns: minmax(0, 1fr) auto; }
.widget-importa .wi-stato[data-concluso] :is(.wi-stato-esito, .wi-progresso, .wi-barra) { display: none; }
.widget-importa .wi-stato-esito {
  display: grid; place-items: center;
  width: 2.6em; height: 2.6em; border-radius: 11px;
  background: var(--q-indigo-soft);
  border: 1px solid color-mix(in srgb, var(--q-brand-text) 42%, transparent);
  color: var(--q-brand-text);
}
.widget-importa .wi-stato-testo { display: grid; gap: .25em; min-width: 0; }
.widget-importa .wi-stato-testo > strong { font-size: var(--qa-t-s); font-weight: 900; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget-importa .wi-stato-testo > small { font-size: var(--qa-t-xs); font-weight: 650; color: var(--q-muted); line-height: 1.35; overflow-wrap: anywhere; }
.widget-importa .wi-barra { height: 4px; margin-top: .2em; background: var(--q-surface-raised); }
.widget-importa .wi-barra > i {
  background: linear-gradient(90deg, var(--q-brand-text), var(--q-lime, var(--q-ok)));   /* come .q-global-import-progress */
  transition: transform 420ms var(--qa-ease-out);
}
.widget-importa .wi-stato-freccia { color: var(--q-muted); width: 1.15em; height: 1.15em; }   /* chiuso: punta in giù */
.widget-importa .wi-stato-x {
  position: absolute; top: .55em; right: .55em;
  display: grid; place-items: center;
  width: 1.9em; height: 1.65em; border-radius: 6px;
  border: 1px solid var(--q-line); background: var(--q-surface); color: var(--q-ink);
}
.widget-importa .wi-stato-x .qa-ico { width: .9em; height: .9em; }
.widget-importa .wi-stato-riduci {          /* «Riduci banner importazioni», sopra il riquadro */
  position: absolute; top: -2em; right: .55em;
  display: grid; place-items: center;
  width: 2.6em; height: 1.65em; border-radius: 6px;
  border: 1px solid var(--q-line); background: var(--q-surface); color: var(--q-ink);
}
.widget-importa .wi-stato-riduci .qa-ico { width: 1em; height: 1em; }

/* ---------- telefono: tutto in colonna, niente a metà ---------- */
@container qa (width < 36rem) {
  .widget-importa .qa-contenuto { padding-bottom: 7.9em; }
  .widget-importa .wi-velo { padding: .6em; align-items: start; }
  .widget-importa .wi-modale-testa,
  .widget-importa .wi-modale-corpo,
  .widget-importa .wi-modale-piede { padding-inline: .9em; }
  .widget-importa .wi-metodo { display: flex; width: 100%; }
  .widget-importa .wi-metodo > span { flex: 1 1 0; text-align: center; padding-inline: .5em; }
  .widget-importa .wi-invia { width: 100%; }
  .widget-importa .wi-stato { right: .6em; bottom: .6em; width: calc(100% - 1.2em); gap: .65em; padding-right: 2.8em; }
  .widget-importa .wi-stato-freccia,
  .widget-importa .wi-stato-riduci { display: none; }       /* il «−» cadrebbe sul piede tabella */
  .widget-importa .qa-pill--warn ~ .qa-pill--stock { display: none; }   /* una pillola sola: la più importante */
  .widget-importa .wi-crea { padding-inline: .8em; }
}

/* ---- css/widget-messaggi.css ---- */
/* =====================================================================
   Qublo · widget «messaggi» — Messaggi Diretti (/orders/messages)
   Fonte: Pages/OrderMessages.razor e Orders.razor.css 1478-2420 (origin/main).
   Area unica a tre colonne (elenco | conversazione | contesto) che si
   semplifica con la larghezza del widget (contenitore qa):
     < 36rem  solo la conversazione
     ≥ 36rem  elenco + conversazione
     ≥ 64rem  elenco + conversazione + contesto
   Movimento: solo opacity e transform.
   ===================================================================== */

.widget-messaggi .wm-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--q-surface);
  border: 1px solid var(--q-line);
  border-radius: 12px;
  overflow: clip;
  min-width: 0;
}
.widget-messaggi .wm-elenco,
.widget-messaggi .wm-contesto { display: none; }

/* le colonne si dichiarano sull'area: la query guarda il suo contenitore (.qa-contenuto) */
@container qa (width >= 36rem) {
  .widget-messaggi .wm-area { grid-template-columns: minmax(11em, 34%) minmax(0, 1fr); }
  .widget-messaggi .wm-elenco { display: flex; }
}
@container qa (width >= 64rem) {
  .widget-messaggi .wm-area { grid-template-columns: minmax(14.5em, 27%) minmax(0, 1fr) minmax(12.5em, 24%); }
  .widget-messaggi .wm-contesto { display: grid; }
}

/* ---------- testate di elenco e conversazione ---------- */
.widget-messaggi .wm-testa {
  display: flex; align-items: center; justify-content: space-between; gap: .75em;
  min-height: 4.2em;
  padding: .7em 1.1em;
  border-bottom: 1px solid var(--q-line);
}
.widget-messaggi .wm-testa > div { display: grid; gap: .25em; min-width: 0; }
.widget-messaggi .wm-testa strong {
  font-size: var(--qa-t-m); font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.widget-messaggi .wm-testa span,
.widget-messaggi .wm-testa small {
  color: var(--q-muted); font-size: var(--qa-t-xs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.widget-messaggi .wm-tondo {
  display: inline-grid; place-items: center; flex: none;
  width: 2.1em; height: 2.1em; border-radius: 8px;
  border: 1px solid var(--q-line); color: var(--q-muted);
  transition: color var(--qa-dur-fast) ease, border-color var(--qa-dur-fast) ease, background-color var(--qa-dur-fast) ease;
}
.widget-messaggi .wm-tondo .qa-ico { width: 1.05em; height: 1.05em; stroke-width: 1.7; }
/* «Aggiorna conversazioni» premuto: l'icona fa un giro (transform da JS) */
.widget-messaggi .wm-tondo.is-premuto {
  color: var(--q-brand-text); border-color: var(--q-brand-line);
  background: color-mix(in srgb, var(--q-brand) 10%, var(--q-surface));
}

/* ---------- elenco conversazioni ---------- */
.widget-messaggi .wm-elenco {
  flex-direction: column;
  border-right: 1px solid var(--q-line);
  min-width: 0;
  padding-bottom: .5em;
}
.widget-messaggi .wm-riga {
  display: grid; grid-template-columns: 2.9em minmax(0, 1fr); align-items: center;
  padding: .7em .85em;
  color: var(--q-ink);
  min-width: 0;
}
.widget-messaggi .wm-riga.is-attiva {
  margin: .5em .55em .2em; padding-inline: .55em;
  border-radius: 11px;
  background: var(--q-brand); color: var(--q-on-brand);
}
.widget-messaggi .wm-avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 2.4em; height: 2.4em; border-radius: 50%;
  background: var(--q-indigo-soft); color: var(--q-brand-text);
  font-size: var(--qa-t-s); font-weight: 900;
}
.widget-messaggi .wm-riga.is-attiva .wm-avatar { background: color-mix(in srgb, #fff 16%, transparent); color: #fff; }
.widget-messaggi .wm-copia { display: grid; gap: .25em; min-width: 0; }
.widget-messaggi .wm-copia > span { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; min-width: 0; }
.widget-messaggi .wm-copia strong {
  font-size: var(--qa-t-s); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.widget-messaggi .wm-riga.is-attiva strong,
.widget-messaggi .wm-riga.is-nonletta strong { font-weight: 800; }
.widget-messaggi .wm-copia time {
  flex: none; color: var(--q-muted);
  font-size: var(--qa-t-xs); font-variant-numeric: tabular-nums;
}
.widget-messaggi .wm-copia small {
  display: block;
  color: var(--q-muted); font-size: var(--qa-t-xs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.widget-messaggi .wm-riga.is-nonletta small { color: var(--q-ink); font-weight: 600; }
.widget-messaggi .wm-riga.is-attiva small,
.widget-messaggi .wm-riga.is-attiva time { color: var(--q-on-brand); }
.widget-messaggi .wm-ora,
.widget-messaggi .wm-anteprima {
  transition: opacity var(--qa-dur-fast) ease;
}
.widget-messaggi .is-svanito { opacity: 0; }

/* ---------- conversazione ---------- */
.widget-messaggi .wm-chat {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
}
.widget-messaggi .wm-corpo {
  display: grid; align-content: start; gap: .75em;
  padding: 1.1em 1.1em 1.2em;
  min-width: 0;
}
.widget-messaggi .wm-msg {
  position: relative;
  justify-self: start;
  max-width: min(84%, 30em);
  padding: .65em .85em;
  border: 1px solid var(--q-line);
  border-radius: 11px 11px 11px 3px;
  background: var(--q-surface-raised);
  transition: opacity var(--qa-dur-reveal) var(--qa-ease-out), transform var(--qa-dur-reveal) var(--qa-ease-out);
}
.widget-messaggi .wm-msg--tu {
  justify-self: end;
  border-color: var(--q-info);
  border-radius: 11px 11px 3px 11px;
}
.widget-messaggi .wm-msg--auto { border-left: 3px solid var(--q-brand-text); }
.widget-messaggi .wm-msg > small {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35em .45em;
  color: var(--q-muted); font-size: var(--qa-t-xs); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.widget-messaggi .wm-msg--tu > small { color: var(--q-info); }
.widget-messaggi .wm-msg > p {
  margin-top: .35em;
  font-size: var(--qa-t-s); line-height: 1.45;
  overflow-wrap: anywhere;
}
.widget-messaggi .wm-auto {
  display: inline-flex;
  padding: .14em .5em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--q-brand) 10%, var(--q-surface)); color: var(--q-brand-text);
  font-size: var(--qa-t-xs); font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase;
  max-width: 100%;
}

/* ingresso dei messaggi: sale dal basso */
.widget-messaggi .wm-msg.qa-prima { opacity: 0; transform: translate3d(0, .9em, 0); }
/* anello che si spegne attorno al messaggio automatico appena arrivato */
.widget-messaggi .wm-msg--auto::after {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 14px 14px 6px 14px;
  border: 1.5px solid var(--q-brand-text);
  opacity: 0;
  pointer-events: none;
}
.widget-messaggi .wm-msg--auto.is-nuovo::after {
  animation: wm-alone 1600ms var(--qa-ease-out) 220ms both;
}
@keyframes wm-alone {
  0% { opacity: 0; transform: scale(.985); }
  25% { opacity: .75; }
  100% { opacity: 0; transform: scale(1.015); }
}
.widget-messaggi .wm-msg--auto .wm-auto { transition: opacity var(--qa-dur-base) var(--qa-ease-out) 260ms, transform var(--qa-dur-base) var(--qa-ease-out) 260ms; }
.widget-messaggi .wm-msg--auto.qa-prima .wm-auto { opacity: 0; transform: translate3d(-.35em, 0, 0); }

/* campo di scrittura (senza «Allega file», spento nell'app) */
.widget-messaggi .wm-scrivi {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5em;
  margin: 0 1.1em 1.1em;
  padding: .4em .45em .4em .9em;
  border: 1px solid var(--q-line);
  border-radius: 10px;
  transition: border-color var(--qa-dur-fast) ease;
}
.widget-messaggi .wm-scrivi.is-scrive { border-color: var(--q-brand-text); }
.widget-messaggi .wm-campo {
  display: flex; align-items: center; min-width: 0; min-height: 2.4em;
  font-size: var(--qa-t-s);
  white-space: nowrap; overflow: hidden;
}
.widget-messaggi .wm-segnaposto { color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.widget-messaggi .wm-coda {               /* mentre scrivi resta visibile la fine della frase */
  display: none; justify-content: flex-end; align-items: center;
  max-width: 100%; overflow: hidden;
}
.widget-messaggi .wm-bozza { flex: none; white-space: pre; }
.widget-messaggi .wm-scrivi.is-scrive .wm-coda { display: inline-flex; }
.widget-messaggi .wm-cursore { display: none; }
.widget-messaggi .wm-scrivi.is-scrive .wm-segnaposto { display: none; }
.widget-messaggi .wm-scrivi.is-scrive .wm-cursore { display: inline-block; flex: none; }
.widget-messaggi .wm-invia {
  display: inline-grid; place-items: center; flex: none;
  width: 2.3em; height: 2.3em; border-radius: 8px;
  background: var(--q-surface-raised); color: var(--q-ink);
  opacity: .45;
  transition: opacity var(--qa-dur-fast) ease, background-color var(--qa-dur-fast) ease, color var(--qa-dur-fast) ease, transform var(--qa-dur-press) var(--qa-ease-out);
}
.widget-messaggi .wm-invia .qa-ico { width: 1.1em; height: 1.1em; stroke-width: 1.8; }
.widget-messaggi .wm-scrivi.is-scrive .wm-invia { opacity: 1; }
.widget-messaggi .wm-invia.is-premuto { opacity: 1; background: var(--q-brand); color: var(--q-on-brand); transform: scale(.94); }

/* ---------- contesto (destra) ---------- */
.widget-messaggi .wm-contesto {
  grid-template-rows: auto minmax(0, 1fr);
  border-left: 1px solid var(--q-line);
  min-width: 0;
}
.widget-messaggi .wm-contesto-testa {
  display: flex; flex-direction: column; align-items: center; gap: .6em;
  padding: 1.4em 1em 1.1em;
  border-bottom: 1px solid var(--q-line);
  min-width: 0;
}
.widget-messaggi .wm-avatar--grande {
  background: var(--q-bg); color: var(--q-brand-text);
  font-size: calc(var(--qa-u) * 1.6);
  width: 2.9em; height: 2.9em;
}
.widget-messaggi .wm-contesto-testa > strong {
  max-width: 100%;
  font-size: var(--qa-t-l); font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.widget-messaggi .wm-dettagli { display: grid; align-content: start; gap: .85em; padding: 1.1em 1.1em 1.2em; min-width: 0; }
.widget-messaggi .wm-dettagli > div { display: grid; gap: .25em; min-width: 0; }
.widget-messaggi .wm-dettagli > div:not(.wm-nota) > span {
  color: var(--q-brand-text); font-size: var(--qa-t-xs);
  text-transform: uppercase; letter-spacing: .02em;
}
.widget-messaggi .wm-dettagli > div > strong,
.widget-messaggi .wm-dettagli > div > em {
  font-size: var(--qa-t-s); font-weight: 700; font-style: normal;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.widget-messaggi .wm-dettagli > div > em { color: var(--q-info); font-weight: 500; text-decoration: underline; text-underline-offset: .18em; }
.widget-messaggi .wm-negozio { display: flex; align-items: center; gap: .45em; }
.widget-messaggi .wm-negozio > b {
  display: inline-grid; place-items: center; flex: none;
  width: 1.9em; height: 1.9em; border-radius: 50%;
  background: var(--q-red-soft); color: var(--q-bad);
  font-size: var(--qa-t-xs); font-weight: 800;
}
.widget-messaggi .wm-nota { gap: .45em !important; }
.widget-messaggi .wm-nota > strong { font-size: var(--qa-t-s); }
.widget-messaggi .wm-nota .qa-input--area { min-height: 4.6em; font-size: var(--qa-t-s); }
.widget-messaggi .wm-salva {
  justify-self: end;
  padding: .5em .85em; border-radius: 8px;
  background: var(--q-brand); color: var(--q-on-brand);
  font-size: var(--qa-t-xs); font-weight: 800;
}

/* colonna stretta: l'ora va in una riga sua, sotto l'anteprima, e il nome resta intero
   (dopo le regole di base, che altrimenti la scavalcano) */
@container qa (36rem <= width < 64rem) {
  .widget-messaggi .wm-copia > span { display: contents; }
  .widget-messaggi .wm-copia time { grid-row: 3; }
}

/* telefono: meno margini, bolle più larghe */
@container qa (width < 36rem) {
  .widget-messaggi .qa-contenuto { padding: .75em; }
  .widget-messaggi .wm-testa { padding: .6em .85em; min-height: 3.6em; }
  .widget-messaggi .wm-corpo { padding: .85em .75em 1em; gap: .6em; }
  .widget-messaggi .wm-msg { max-width: 90%; }
  .widget-messaggi .wm-auto { white-space: nowrap; text-transform: none; letter-spacing: 0; }
  .widget-messaggi .wm-scrivi { margin: 0 .75em .75em; }
}

/* widget molto stretto: via il titolo della barra (lo ripete la testata), resta «Dati di esempio» */
@container qa (width < 22rem) {
  .widget-messaggi .qa-barra-titolo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .widget-messaggi .wm-msg--auto.is-nuovo::after { animation: none; opacity: 0; }
}

/* ---- css/widget-monitoraggio.css ---- */
/* =====================================================================
   Widget «monitoraggio» · schermata Prodotti (/inventory) di Qublo
   Fonte: Components/Inventory/InventoryTableRow.razor (+ .razor.css),
   Pages/Inventory.razor, wwwroot/app.css (.q-banner.error) su origin/main.
   Storia: il prezzo del fornitore sale → Qublo ricalcola il prezzo eBay;
   un prodotto si esaurisce → QTA 0, pillola «Esaurito», banner vero.
   Solo ciò che app-ui.css non ha. Movimento: transform e opacity.
   ===================================================================== */

/* l'altezza finale della tabella resta riservata dentro la card (niente salti, niente vuoti fuori) */
.widget-monitoraggio .wm-tabella { min-height: var(--wm-alto, 0px); }

/* tabella: colonne essenziali, nessuno scorrimento */
.widget-monitoraggio .wm-tabella td { transition: background-color var(--qa-dur-base) ease; }
.widget-monitoraggio .wm-tabella th { vertical-align: middle; }
@container qa (width >= 48rem) { .widget-monitoraggio .wm-tabella th:nth-child(2) { width: 34%; } }
.widget-monitoraggio .wm-ordina { font-weight: 700; opacity: .85; }
.widget-monitoraggio .wm-data { white-space: nowrap; font-size: var(--qa-t-s); }
.widget-monitoraggio .qa-prodotto strong { font-size: var(--qa-t-m); }
.widget-monitoraggio .qa-prodotto > div { gap: .45em; }
.widget-monitoraggio .qa-pillole { gap: .3em; }
.widget-monitoraggio .qa-profitto > strong { font-size: var(--qa-t-m); }
.widget-monitoraggio .qa-kv b { min-width: 0; }

/* riga che Qublo sta ricontrollando: fondo leggero (app-ui) + filetto a sinistra, come il banner.
   Sotto 48rem la casella è nascosta e il filetto resta sulla cella del prodotto. */
.widget-monitoraggio .wm-tabella tr[data-riga] > td:is(:first-child, :nth-child(2)) { position: relative; }
.widget-monitoraggio .wm-tabella tr[data-riga] > td:is(:first-child, :nth-child(2))::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--q-brand-text);
  opacity: 0; transform: scaleY(.4);
  transition: opacity 180ms var(--qa-ease-out), transform 180ms var(--qa-ease-out);
  pointer-events: none;
}
.widget-monitoraggio .wm-tabella tr.is-evidenziata > td:is(:first-child, :nth-child(2))::before { opacity: 1; transform: none; }
@container qa (width >= 48rem) { .widget-monitoraggio .wm-tabella tr[data-riga] > td:nth-child(2)::before { content: none; } }

/* «Ultima osservazione: …» sotto ACQ / VEN (data-amazon-observation, q-muted small) */
.widget-monitoraggio .wm-oss {
  display: block;
  margin-top: .5em;
  font-size: var(--qa-t-xs);
  font-weight: 500;
  line-height: 1.35;
  color: var(--q-muted);
}
.widget-monitoraggio .wm-ora { white-space: nowrap; }
@container qa (width >= 36rem) { .widget-monitoraggio .wm-oss-et { white-space: nowrap; } }

/* colonne in più solo dove c'è spazio vero (mai scorrimento orizzontale) */
.widget-monitoraggio .wm-da-xp,
.widget-monitoraggio .wm-da-xl { display: none; }
@container qa (width >= 76rem) { .widget-monitoraggio .wm-da-xp { display: table-cell; } }
@container qa (width >= 84rem) { .widget-monitoraggio .wm-da-xl { display: table-cell; } }
/* QTA dentro la cella del prezzo finché la colonna Quantità non c'è */
@container qa (width >= 48rem) { .widget-monitoraggio .wm-fino-m { display: none; } }
/* ROI dentro la cella del prezzo finché la colonna Profitto non c'è (telefoni) */
.widget-monitoraggio .wm-roi { color: var(--q-ok); font-weight: 800; }
@container qa (width >= 36rem) { .widget-monitoraggio .wm-fino-s { display: none; } }

/* banner rosso sotto la riga esaurita (.q-banner.error) */
.widget-monitoraggio .wm-banner > td { padding: 0; }
.widget-monitoraggio .wm-avviso {
  display: flex; align-items: center; gap: .65em;
  padding: .6em 1em .6em .9em;
  background: var(--q-red-soft);
  border-left: 3px solid var(--q-bad);
  color: var(--q-bad);
  font-size: var(--qa-t-s); font-weight: 700; line-height: 1.5;
  transition: opacity var(--qa-dur-base) var(--qa-ease-out), transform var(--qa-dur-reveal) var(--qa-ease-out);
}
.widget-monitoraggio .wm-avviso > span { flex: 1 1 auto; min-width: 0; }
.widget-monitoraggio .wm-chiudi {
  display: inline-grid; place-items: center; flex: none;
  width: 1.9em; height: 1.9em;
  border: 1px solid color-mix(in srgb, currentColor 36%, transparent);
  border-radius: 8px;
  font-style: normal; font-weight: 600; line-height: 1;
}

/* ---------- rullo: il valore vecchio esce in alto, il nuovo sale dal basso ---------- */
.widget-monitoraggio .wm-rullo {
  display: inline-grid;
  vertical-align: bottom;
  overflow: clip;
  overflow-clip-margin: .1em;
}
.widget-monitoraggio .wm-rullo > span {
  grid-area: 1 / 1;
  white-space: nowrap;
  transition:
    transform 560ms var(--qa-ease-out),
    opacity 380ms var(--qa-ease-out),
    color var(--qa-dur-fast) ease;
}
.widget-monitoraggio .wm-vecchio { position: relative; opacity: 0; transform: translateY(-110%); }
.widget-monitoraggio .wm-rullo.is-prima > .wm-vecchio { opacity: 1; transform: none; }
.widget-monitoraggio .wm-rullo.is-prima > .wm-nuovo { opacity: 0; transform: translateY(110%); }
/* prezzo del fornitore: prima si barra il vecchio */
.widget-monitoraggio .wm-rullo--barra > .wm-vecchio::after {
  content: "";
  position: absolute; left: -.05em; right: -.05em; top: 54%;
  height: 1.5px; border-radius: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 300ms var(--qa-ease-out);
}
.widget-monitoraggio .wm-rullo--barra.is-barrato > .wm-vecchio { color: var(--q-muted); }
.widget-monitoraggio .wm-rullo--barra.is-barrato > .wm-vecchio::after { transform: scaleX(1); }
/* prezzo eBay appena ricalcolato */
.widget-monitoraggio .wm-rullo.is-acceso > .wm-nuovo { color: var(--q-brand-text); }
/* ora dell'osservazione appena aggiornata: un attimo in inchiostro pieno */
.widget-monitoraggio .wm-rullo.is-fresco > .wm-nuovo { color: var(--q-ink); }

/* pillola «Esaurito» */
.widget-monitoraggio .wm-esaurito { transition: opacity var(--qa-dur-base) var(--qa-ease-out), transform 420ms var(--qa-ease-out); }

/* stati della scena (impostati dal JS) */
.widget-monitoraggio .wm-via { display: none !important; }
.widget-monitoraggio .wm-esaurito.wm-prima { opacity: 0; transform: scale(.82); }
.widget-monitoraggio .wm-avviso.wm-prima { opacity: 0; transform: translateY(-.6em); }

@media (prefers-reduced-motion: reduce) {
  .widget-monitoraggio .wm-prima { opacity: 1 !important; transform: none !important; }
  .widget-monitoraggio .wm-rullo.is-prima > .wm-vecchio { opacity: 0 !important; }
  .widget-monitoraggio .wm-rullo.is-prima > .wm-nuovo { opacity: 1 !important; transform: none !important; }
}
@media print {
  .widget-monitoraggio .wm-via { display: revert !important; }
  .widget-monitoraggio .wm-rullo > .wm-vecchio { display: none; }
}

/* ---- css/widget-ordini.css ---- */
/* =====================================================================
   Qublo · widget «ordini» — Ordini + dettaglio dell'ordine (scheda Commissioni)
   Fonte: Pages/Orders.razor, Pages/OrderPageBase.razor, Pages/Orders.razor.css,
   Components/Orders/OrderStatusMenu.razor (origin/main). Solo ciò che app-ui.css non ha.
   Scena: l'ordine arriva «In attesa» → si apre il dettaglio → commissioni e profitto
   netto → «Copia tutte le informazioni». Stato finale = markup.
   ===================================================================== */

/* lo schermo impila pagina, velo e dettaglio nella stessa cella:
   l'altezza è quella del più alto, niente posizioni assolute da calcolare */
.widget-ordini .wo-schermo { display: grid; }
.widget-ordini .wo-schermo > * { grid-area: 1 / 1; min-width: 0; }
.widget-ordini .qa-pagina { min-height: 100%; }
.widget-ordini .wo-contenuto { flex: 1 1 auto; }

/* ---------- barra strumenti ---------- */
.widget-ordini .wo-strumenti { flex-wrap: nowrap; }
.widget-ordini .wo-strumenti .qa-cerca { flex: 1 1 10em; min-height: 2.65em; }
.widget-ordini .wo-strumenti .qa-cerca > .qa-ico { color: var(--q-muted); }
.widget-ordini .wo-azioni-barra { display: flex; gap: .5em; flex: none; }
.widget-ordini .wo-tb {               /* .orders-toolbar-button: indaco pieno, 32 px, 12,5 px/900 */
  display: inline-flex; align-items: center; gap: .45em;
  min-height: 2.45em; padding: 0 .85em;
  border: 1px solid var(--q-brand); border-radius: 8px;
  background: var(--q-brand); color: var(--q-on-brand);
  font-size: var(--qa-t-s); font-weight: 900; white-space: nowrap;
}
.widget-ordini .wo-tb .qa-ico { width: 1.1em; height: 1.1em; stroke-width: 1.8; }
.widget-ordini .wo-tb--secondario { background: var(--q-surface-raised); border-color: var(--q-line); color: var(--q-ink); }

/* ---------- tabella ---------- */
.widget-ordini .wo-tabella { display: flex; flex-direction: column; flex: 1 1 auto; border-radius: 12px; }
.widget-ordini .wo-tabella table { table-layout: auto; }
.widget-ordini .wo-tabella th { padding: .85em .75em; font-size: var(--qa-t-s); }
.widget-ordini .wo-tabella td { padding: .75em; }
.widget-ordini .wo-ordina { color: var(--q-muted); font-weight: 700; }
.widget-ordini .wo-c-spunta { width: 1%; padding-inline: .9em .2em !important; }
.widget-ordini .wo-c-ordine { width: 40%; min-width: 11em; }
.widget-ordini .wo-c-ordine .qa-prodotto strong { font-size: var(--qa-t-s); }
.widget-ordini .wo-c-data, .widget-ordini .wo-c-entro { white-space: nowrap; }
.widget-ordini .wo-c-regione, .widget-ordini .wo-c-entro { text-align: center; }
.widget-ordini .wo-c-azioni { text-align: center; }
.widget-ordini .wo-thumb { width: 3em; height: 3em; }
/* miniature: sagoma piena a due toni sulla tinta della riga, non un segnaposto grigio */
.widget-ordini .qa-thumb[data-tinta] {
  background: color-mix(in srgb, currentColor 13%, var(--q-surface));
  border-color: color-mix(in srgb, currentColor 26%, var(--q-surface));
}
.widget-ordini .qa-thumb[data-tinta] .qa-ico {
  width: 1.6em; height: 1.6em; stroke-width: 2.2;
  fill: color-mix(in srgb, currentColor 30%, transparent);
}
.widget-ordini .wo-piede { margin-top: auto; }
.widget-ordini .wo-per-pagina { display: inline-flex; align-items: center; gap: .6em; }
.widget-ordini .wo-per-pagina .qa-select { width: auto; min-height: 2.3em; padding: .3em .6em; gap: .9em; }

/* mini-badge sotto il titolo (.orders-mini-badge: 4 px, 900) */
.widget-ordini .wo-badges { display: flex; flex-wrap: wrap; gap: .3em; }
.widget-ordini .wo-mb {
  display: inline-flex; align-items: center;
  padding: .2em .4em; border-radius: 4px;
  font-size: var(--qa-t-xs); font-weight: 900; line-height: 1.1; white-space: nowrap;
}
.widget-ordini .wo-mb--ok { background: var(--q-lime-soft); color: var(--q-ok); }
.widget-ordini .wo-mb--bad { background: var(--q-red-soft); color: var(--q-bad); }
.widget-ordini .wo-mb--info { background: var(--q-indigo-soft); color: var(--q-info); }

/* stato + «Sincronizza prodotto» */
.widget-ordini .wo-pila { display: grid; gap: .35em; justify-items: start; }
.widget-ordini .wo-c-stato .qa-stato { min-width: 10.5em; }
.widget-ordini .qa-stato .qa-ico { width: 1.05em; height: 1.05em; stroke-width: 2; }
.widget-ordini .wo-sync {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  width: 100%; min-height: 2.3em; padding: 0 .55em;
  border: 1px solid var(--q-line); border-radius: 8px;
  background: var(--q-surface-raised); color: var(--q-muted);
  font-size: var(--qa-t-xs); font-weight: 900; white-space: nowrap;
}
.widget-ordini .wo-sync .qa-ico { width: 1.05em; height: 1.05em; stroke-width: 1.8; }
.widget-ordini .wo-feedback { color: var(--q-ok); font-size: var(--qa-t-xs); font-weight: 700; }

.widget-ordini .wo-cliente { display: grid; gap: .15em; min-width: 0; }
.widget-ordini .wo-cliente > span { font-weight: 600; }
.widget-ordini .wo-cliente > small { color: var(--q-muted); font-size: var(--qa-t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12em; }
.widget-ordini .wo-kv { display: grid; gap: .3em; font-size: var(--qa-t-s); white-space: nowrap; }
.widget-ordini .wo-kv > span { display: flex; align-items: baseline; gap: .35em; }
.widget-ordini .wo-kv b {
  padding: .1em .3em; border-radius: 3px;
  background: var(--q-surface-raised); color: var(--q-muted);
  font-size: var(--qa-t-xs); font-weight: 900;
}
.widget-ordini .wo-sigla {
  display: inline-grid; place-items: center; align-self: center;
  min-width: 1.6em; height: 1.6em; padding: 0 .2em; border-radius: 999px;
  background: var(--q-surface-2); color: var(--q-ink);
  font-size: var(--qa-t-xs); font-style: normal; font-weight: 900;
}
.widget-ordini .wo-profitto { color: var(--q-ok); font-weight: 900; white-space: nowrap; }
.widget-ordini .wo-profitto.is-negativo { color: var(--q-bad); }

/* righe: la nuova entra; quella aperta resta selezionata */
.widget-ordini .wo-riga td { transition: background-color var(--qa-dur-base) ease; }
.widget-ordini .wo-r1 { transition: opacity var(--qa-dur-reveal) var(--qa-ease-out), transform var(--qa-dur-reveal) var(--qa-ease-out); }
.widget-ordini .wo-r1.qa-prima { opacity: 0; transform: translateY(-.8em); }
.widget-ordini .wo-thumb { transition: transform var(--qa-dur-press) var(--qa-ease-out); }
.widget-ordini .wo-thumb.is-premuto { transform: scale(.94); }

/* colonne in più per i widget molto larghi */
@container qa (width < 80rem) { .widget-ordini .wo-da-xl { display: none !important; } }

/* ---------- velo e dettaglio (drawer) ---------- */
.widget-ordini .wo-velo {
  z-index: 3;
  background: var(--q-overlay);
  opacity: var(--wo-velo, .82);
  pointer-events: none;
  transition: opacity var(--qa-dur-base) var(--qa-ease-out);
}
.widget-ordini .wo-velo.wo-chiuso { opacity: 0; }

.widget-ordini .wo-drawer {
  --wo-m: 1.15em;                     /* margini interni (30 px nell'app) */
  z-index: 4;
  justify-self: end;
  align-self: stretch;
  display: flex; flex-direction: column;
  width: 100%;
  min-width: 0;
  background: var(--q-surface);
  border-left: 1px solid var(--q-line);
  font-size: var(--qa-u);
  transition: transform var(--qa-dur-sheet, 380ms) cubic-bezier(.32, .72, 0, 1), opacity var(--qa-dur-base) var(--qa-ease-out);
}
.widget-ordini .wo-drawer { transform-origin: 100% 40%; }
/* chiuso: più piccolo verso il bordo destro, mai oltre lo schermo (niente scorrimento) */
.widget-ordini .wo-drawer.wo-chiuso { opacity: 0; transform: scale(.955); }
@container qa (width >= 36rem) {
  .widget-ordini .wo-drawer {
    --wo-m: 1.5em;
    width: min(calc(100% - 1.5em), 34em);
    margin: .75em .75em .75em 0;
    border: 1px solid var(--q-line);
    border-radius: 14px;
    box-shadow: -24px 0 70px var(--q-shadow-color);
  }
}
@container qa (width >= 64rem) {
  /* il dettaglio lascia leggibile la tabella (stato e profitto della riga) e il velo è leggero */
  .widget-ordini .wo-drawer { --wo-m: 1.7em; width: min(36em, 44%); margin: .9em .9em .9em 0; }
  .widget-ordini .wo-velo { --wo-velo: .55; }
}

.widget-ordini .wo-d-testa,
.widget-ordini .wo-d-sintesi,
.widget-ordini .wo-d-cliente,
.widget-ordini .wo-d-schede { margin-inline: var(--wo-m); border-bottom: 1px solid var(--q-line); }

.widget-ordini .wo-d-testa { display: flex; align-items: flex-start; gap: 1em; padding: 1.3em 0 .9em; }
.widget-ordini .wo-d-intestazione { display: grid; gap: .4em; min-width: 0; }
.widget-ordini .wo-d-titolo { display: flex; align-items: center; gap: .45em; min-width: 0; }
.widget-ordini .wo-d-titolo strong {
  font-size: calc(var(--qa-u) * 1.3); font-weight: 800; letter-spacing: -.015em; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.widget-ordini .wo-d-titolo .qa-ico { width: 1.2em; height: 1.2em; }
.widget-ordini .wo-d-ricevuto { color: var(--q-muted); font-size: var(--qa-t-s); }
.widget-ordini .wo-d-chiudi { margin-left: auto; color: var(--q-muted); }
.widget-ordini .wo-d-chiudi .qa-ico { width: 1.35em; height: 1.35em; }

.widget-ordini .wo-d-sintesi { padding: .85em 0 1em; }
.widget-ordini .wo-d-prodotto { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .8em; }
.widget-ordini .wo-d-thumb { width: 3.6em; height: 3.6em; border-radius: 8px; }
.widget-ordini .wo-d-prodotto > div { display: grid; gap: .4em; min-width: 0; }
.widget-ordini .wo-d-prodotto strong {
  color: var(--q-info); font-size: var(--qa-t-m); font-weight: 800; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.widget-ordini .wo-d-prodotto small { display: flex; align-items: center; gap: .4em; color: var(--q-muted); font-size: var(--qa-t-xs); }
.widget-ordini .wo-e {
  display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 999px;
  background: var(--q-surface-2); color: var(--q-ink); font-weight: 900; line-height: 1;
}
.widget-ordini .wo-d-metriche {
  display: grid; gap: .8em 1em; margin-top: 1em;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@container qa (width >= 36rem) { .widget-ordini .wo-d-metriche { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.widget-ordini .wo-d-metriche > div,
.widget-ordini .wo-d-cliente > div { display: grid; gap: .3em; min-width: 0; align-content: start; }
.widget-ordini .wo-d-metriche > div > span,
.widget-ordini .wo-d-etichetta { color: var(--q-muted); font-size: var(--qa-t-s); }
.widget-ordini .wo-d-metriche strong,
.widget-ordini .wo-d-cliente strong { font-size: var(--qa-t-m); font-weight: 700; white-space: nowrap; }
.widget-ordini .wo-d-cliente strong { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }

.widget-ordini .wo-d-cliente { display: grid; gap: .95em 2em; grid-template-columns: minmax(0, 1fr); padding: 1em 0; }
@container qa (width >= 36rem) { .widget-ordini .wo-d-cliente { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.widget-ordini .wo-d-etichetta { display: flex; align-items: center; gap: .4em; }
.widget-ordini .wo-d-etichetta .qa-ico { width: 1em; height: 1em; color: var(--q-brand-text); }
.widget-ordini .wo-d-copia-tutto { grid-column: 1 / -1; display: grid !important; gap: .55em; justify-items: start; }
.widget-ordini .wo-aiuto { color: var(--q-muted); font-size: var(--qa-t-xs); line-height: 1.4; }

/* «Copia tutte le informazioni» → «Informazioni copiate»: due testi nella stessa cella */
.widget-ordini .wo-copia { display: inline-grid; justify-items: center; transition: transform var(--qa-dur-press) var(--qa-ease-out); }
.widget-ordini .wo-copia > span { grid-area: 1 / 1; transition: opacity var(--qa-dur-fast) ease, transform var(--qa-dur-base) var(--qa-ease-out); }
.widget-ordini .wo-copia.is-copiato .wo-copia-a { opacity: 0; transform: translateY(-.45em); }
.widget-ordini .wo-copia:not(.is-copiato) .wo-copia-b { opacity: 0; transform: translateY(.45em); }
.widget-ordini .wo-copia.is-premuto { transform: scale(.97); }

/* schede: attiva in colore info con sottolineatura */
.widget-ordini .wo-d-schede { display: flex; justify-content: space-between; gap: .2em; }
/* sei schede solo quando entrano intere; prima le tre principali */
@container qa (width < 44rem) { .widget-ordini .wo-d-schede > .qa-da-s { display: none !important; } }
.widget-ordini .wo-d-schede > span {
  position: relative; flex: 0 0 auto;
  display: grid; place-items: center; min-height: 3.1em; padding: 0 .5em;
  font-size: var(--qa-t-s); font-weight: 800; white-space: nowrap;
}
.widget-ordini .wo-d-schede > span:not(.is-attiva) { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.widget-ordini .wo-d-schede > span.is-attiva { color: var(--q-info); }
.widget-ordini .wo-d-schede > span.is-attiva::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: currentColor; }

/* scheda Commissioni */
.widget-ordini .wo-d-corpo { display: grid; padding: .95em var(--wo-m) 1.2em; }
.widget-ordini .wo-ric {
  display: grid; gap: .3em; margin-bottom: .95em; padding: .7em .8em;
  background: var(--q-surface-2);
  border: 1px solid var(--q-line); border-left: 3px solid var(--q-ok);
  border-radius: 8px;
  font-size: var(--qa-t-s);
}
.widget-ordini .wo-ric > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2em .7em; }
.widget-ordini .wo-ric span, .widget-ordini .wo-ric small { color: var(--q-muted); font-size: var(--qa-t-xs); }
.widget-ordini .wo-ric strong { font-size: var(--qa-t-xs); font-weight: 800; white-space: nowrap; }

/* barra del profitto: profitto / vendita (23 %), riempita con scaleX */
.widget-ordini .wo-barra {
  --v: .23;
  position: relative; display: block; height: 2.1em; margin-bottom: 1em;
  border-radius: 6px; overflow: hidden;
  background: var(--q-surface-raised);
}
.widget-ordini .wo-barra > i {
  position: absolute; inset: 0;
  background: var(--q-info);
  transform-origin: left center;
  transform: scaleX(var(--v));
}

.widget-ordini .wo-fee {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8em;
  min-height: 2.3em; padding: .55em .3em;
  border-bottom: 1px dotted var(--q-line);
  font-size: var(--qa-t-m);
  transition: opacity var(--qa-dur-base) var(--qa-ease-out), transform var(--qa-dur-base) var(--qa-ease-out);
}
.widget-ordini .wo-fee > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-ordini .wo-fee > strong { font-weight: 700; white-space: nowrap; }
.widget-ordini .wo-fee > span small { margin-left: .4em; color: var(--q-info); font-size: var(--qa-t-xs); font-weight: 900; }
.widget-ordini .wo-fee--sponsor { background: var(--q-indigo-soft); border-radius: 4px; }
.widget-ordini .wo-fee--effettive { border-bottom-style: solid; font-weight: 800; }
.widget-ordini .wo-fee--effettive > strong { font-weight: 800; }
.widget-ordini .wo-fee--totale { margin-top: .3em; border-bottom-style: solid; font-weight: 900; }
.widget-ordini .wo-fee--totale > strong { font-weight: 900; }
.widget-ordini .wo-fee.qa-prima { opacity: 0; transform: translateY(.45em); }

/* ---------- telefono: versione semplificata ---------- */
@container qa (width < 36rem) {
  .widget-ordini .wo-tabella table { table-layout: fixed; }
  .widget-ordini .wo-c-ordine { width: auto; min-width: 0; }
  .widget-ordini th.wo-c-stato { width: 9.4em; }
  .widget-ordini .wo-c-stato .qa-stato { min-width: 0; max-width: 100%; padding: 0 .5em; }
  .widget-ordini .wo-c-stato .qa-stato > .qa-ico:first-child { display: none; }
  .widget-ordini .wo-c-stato .qa-stato > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .widget-ordini .wo-badges .wo-mb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .widget-ordini .wo-c-stato .qa-stato > .qa-ico:last-child { display: none; }
  .widget-ordini .wo-tabella td, .widget-ordini .wo-tabella th { padding-inline: .55em; }
  .widget-ordini .wo-thumb { width: 2.4em; height: 2.4em; }
  /* tutte e cinque le righe: la tabella riempie l'altezza del dettaglio, niente vuoto */
  .widget-ordini tr.wo-r4, .widget-ordini tr.wo-r5 { display: table-row !important; }
  .widget-ordini .wo-tabella table { flex: 1 1 auto; }   /* l'altezza in più va alle righe, non sotto */
  .widget-ordini .wo-d-testa { padding-top: 1em; }
  .widget-ordini .wo-d-titolo strong { font-size: calc(var(--qa-u) * 1.15); }
}

/* ---------- riduci movimento: tutto fermo e aperto ---------- */
@media (prefers-reduced-motion: reduce) {
  .widget-ordini .wo-chiuso { opacity: 1 !important; transform: none !important; }
  .widget-ordini .wo-velo.wo-chiuso { opacity: var(--wo-velo, .82) !important; }
}
@media print {
  .widget-ordini .wo-chiuso { opacity: 1 !important; transform: none !important; }
}

/* ---- css/widget-panoramica.css ---- */
/* =====================================================================
   Qublo · widget «panoramica» — la Home (/dashboard) dell'app
   Fonti: Pages/Dashboard.razor(.css), Components/Notifications/NotificationBell.razor(.css)
   su origin/main. Solo ciò che app-ui.css non ha. Movimento: transform, opacity,
   stroke-dashoffset. Stato finale = markup.
   ===================================================================== */

/* ---------- griglia della Home: segue la larghezza del widget ---------- */
.widget-panoramica .wpn-griglia {
  display: grid;
  gap: .85em;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "f" "p" "v";
}
.widget-panoramica .wpn-fatt { grid-area: f; }
.widget-panoramica .wpn-prof { grid-area: p; }
.widget-panoramica .wpn-prod { grid-area: d; }
.widget-panoramica .wpn-ord { grid-area: o; }
.widget-panoramica .wpn-vend { grid-area: v; }
.widget-panoramica .wpn-corso { grid-area: c; }

/* telefono: niente card Profitto (il profitto di oggi è nel riepilogo), grafico più basso,
   così campanella, «Aggiorna» e grafico stanno insieme in circa 550 px */
@container qa (width < 28rem) {
  .widget-panoramica .wpn-griglia { grid-template-areas: "f" "v"; }
  .widget-panoramica .wpn-prof { display: none; }
  .widget-panoramica .wpn-grafico { --wpn-h: 7.5em; }
  .widget-panoramica .wpn-vend .qa-card-desc { white-space: nowrap; }
}
@container qa (width >= 28rem) {
  .widget-panoramica .wpn-griglia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "f p" "v v";
  }
}
@container qa (width >= 48rem) {
  .widget-panoramica .wpn-griglia {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "f p o" "v v v";
  }
}
@container qa (width >= 64rem) {
  .widget-panoramica .wpn-griglia {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas: "f d o" "p d o" "v v c";
  }
}

/* ---------- card: titolo, descrizione, occhio ---------- */
.widget-panoramica .wpn-testa { display: grid; gap: .2em; min-width: 0; }
.widget-panoramica .wpn-testa > span { overflow: hidden; text-overflow: ellipsis; }
.widget-panoramica .wpn-occhio {
  display: grid; place-items: center; flex: none;
  width: 1.9em; height: 1.9em; margin: -.2em -.35em 0 auto;
  border-radius: 8px;
  color: var(--q-muted);
}
.widget-panoramica .qa-card--brand .wpn-occhio { color: rgba(255, 255, 255, .78); }
.widget-panoramica .wpn-kpi { margin-top: .1em; }
.widget-panoramica .qa-trend { flex-wrap: wrap; row-gap: .3em; }
.widget-panoramica .qa-trend > b { white-space: nowrap; }

/* ---------- Prodotti totali: linea lime dei caricamenti ---------- */
.widget-panoramica .wpn-prod .wpn-spark { flex: 1 1 auto; }
.widget-panoramica .wpn-spark { position: relative; min-height: 4.4em; margin: .35em .3em .2em; }
.widget-panoramica .wpn-spark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.widget-panoramica .wpn-linea-prod { stroke-dasharray: none; }
.widget-panoramica .wpn-spark-griglia { fill: none; stroke: var(--q-line); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }

/* ---------- Ordini: semicerchio ---------- */
.widget-panoramica .wpn-ord { justify-content: flex-start; }
.widget-panoramica .wpn-semi { display: grid; width: 100%; max-width: 17em; margin: .8em auto 0; }
.widget-panoramica .wpn-semi svg { grid-area: 1 / 1; width: 100%; height: auto; overflow: visible; }
.widget-panoramica .wpn-semi-traccia,
.widget-panoramica .wpn-semi-valore { fill: none; stroke-width: 30; stroke-linecap: round; }
.widget-panoramica .wpn-semi-traccia { stroke: var(--q-line); }
.widget-panoramica .wpn-semi-centro { grid-area: 1 / 1; align-self: end; justify-self: center; display: grid; text-align: center; }
.widget-panoramica .wpn-semi-centro > span,
.widget-panoramica .wpn-semi-centro > small,
.widget-panoramica .wpn-ciambella-centro > span { color: var(--q-muted); font-size: var(--qa-t-xs); font-weight: 650; }
.widget-panoramica .wpn-semi-centro > strong,
.widget-panoramica .wpn-ciambella-centro > strong {
  font-size: calc(var(--qa-u) * 1.9); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: .08em 0;
}

/* base della card: i due conteggi del semicerchio, con il punto della legenda */
.widget-panoramica .wpn-ord-legenda {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4em 1.4em;
  margin-top: auto; padding-top: .3em;
}
.widget-panoramica .wpn-ord-legenda > div { justify-content: flex-start; gap: .45em; }
.widget-panoramica .wpn-ord-legenda span::before { width: 7px; height: 7px; }
.widget-panoramica .wpn-ord-legenda .wpn-leg-completati::before { background: color-mix(in srgb, var(--q-muted) 40%, var(--q-line)); }

/* ---------- Panoramica vendite ---------- */
.widget-panoramica .wpn-vend-testa { flex-wrap: wrap; align-items: center; row-gap: .6em; }
.widget-panoramica .wpn-azioni { display: flex; align-items: center; gap: .45em; margin-left: auto; }
.widget-panoramica .wpn-periodo {
  display: inline-flex; align-items: center; height: 2.2em; padding: 0 .75em;
  border: 1px solid var(--q-line); border-radius: 7px;
  background: var(--q-surface); color: var(--q-muted);
  font-size: var(--qa-t-xs); font-weight: 720; white-space: nowrap;
}
.widget-panoramica .wpn-aggiorna {
  display: grid; place-items: center; width: 2.2em; height: 2.2em;
  border: 1px solid var(--q-line); border-radius: 8px;
  background: var(--q-surface-2); color: var(--q-ink);
  transition: transform var(--qa-dur-press) var(--qa-ease-out);
}
.widget-panoramica .wpn-aggiorna svg { width: 1.05em; height: 1.05em; transition: transform 760ms var(--qa-ease-move); }
.widget-panoramica .wpn-aggiorna.is-premuto { transform: scale(.94); }
.widget-panoramica .wpn-aggiorna.is-gira svg { transform: rotate(360deg); }

.widget-panoramica .wpn-chiave { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35em 1.1em; font-size: var(--qa-t-xs); color: var(--q-muted); font-weight: 650; }
.widget-panoramica .wpn-chiave > span { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; }
.widget-panoramica .wpn-chiave > span::before { content: ""; width: .6em; height: .6em; border-radius: 2px; background: var(--q-brand); }
.widget-panoramica .wpn-chiave > .wpn-chiave-p::before { background: var(--q-ok); }

.widget-panoramica .wpn-grafico {
  --wpn-h: 10em;
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  grid-template-rows: var(--wpn-h) auto;
  column-gap: .6em;
  margin-top: .2em;
}
@container qa (width >= 48rem) { .widget-panoramica .wpn-grafico { --wpn-h: 11.5em; } }
@container qa (width >= 64rem) { .widget-panoramica .wpn-grafico { --wpn-h: 12.5em; } }

.widget-panoramica .wpn-asse-y {
  display: flex; flex-direction: column; justify-content: space-between;
  margin: -.5em 0; text-align: right; line-height: 1;
  color: var(--q-muted); font-size: var(--qa-t-xs); font-weight: 680;
}
.widget-panoramica .wpn-area { position: relative; min-width: 0; }
.widget-panoramica .wpn-righe { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.widget-panoramica .wpn-righe > i { display: block; height: 0; border-top: 1px solid var(--q-line); }
.widget-panoramica .wpn-colonne {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr));
}
.widget-panoramica .wpn-col { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; min-width: 0; }
.widget-panoramica .wpn-barra {
  display: block;
  width: 68%; max-width: 2.8em; min-height: 2px;
  height: calc(var(--h, .5) * 100%);
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--q-brand-text), var(--q-brand));
  box-shadow: 0 0 18px color-mix(in srgb, var(--q-brand) 18%, transparent);
  transform-origin: 50% 100%;
  transform: scaleY(var(--s, 1));
  transition: transform var(--qa-dur-reveal) var(--qa-ease-out);
}
.widget-panoramica .wpn-barra.qa-prima { opacity: 1; transform: scaleY(0); }
.widget-panoramica .wpn-oggi .wpn-barra { transition-duration: 900ms; }
/* guida tratteggiata dal riepilogo alla colonna di oggi, solo durante il riepilogo */
.widget-panoramica .wpn-oggi::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  border-left: 1px dashed color-mix(in srgb, var(--q-brand-text) 55%, var(--q-line));
  transition: opacity var(--qa-dur-base) ease;
}
.widget-panoramica:not([data-fase="riepilogo"]) .wpn-oggi::before { opacity: 0; }

/* linea del profitto: SVG che si allunga con l'area, tratto costante */
.widget-panoramica .wpn-profitto { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.widget-panoramica .wpn-linea-b {
  /* l'ultimo tratto (ieri → oggi) si inclina attorno al punto di ieri: P9 = (850, 775.31) */
  transform-box: view-box;
  transform-origin: 850px 775.31px;
  transform: skewY(var(--k, 0deg));
  transition: stroke-dashoffset 380ms var(--qa-ease-out), transform 900ms var(--qa-ease-out);
}

.widget-panoramica .wpn-punto {
  position: absolute; left: var(--x); top: var(--y); z-index: 1;
  width: .64em; height: .64em; border-radius: 50%;
  background: var(--q-ok);
  box-shadow: 0 0 0 2px var(--q-surface);
  transform: translate(-50%, -50%) translateY(calc(var(--dy, 0) * var(--wpn-h, 0em)));
  transition: opacity var(--qa-dur-base) var(--qa-ease-out), transform 900ms var(--qa-ease-out);
}
.widget-panoramica .wpn-punto.qa-prima { opacity: 0; transform: translate(-50%, -50%) translateY(calc(var(--dy, 0) * var(--wpn-h, 0em))) scale(.4); }
.widget-panoramica .wpn-punto-prod { width: .55em; height: .55em; }
.widget-panoramica .wpn-punto-oggi::after {
  content: ""; position: absolute; inset: -.42em; border-radius: 50%;
  background: color-mix(in srgb, var(--q-ok) 26%, transparent);
  transition: opacity var(--qa-dur-base) ease;
}
.widget-panoramica:not([data-fase="riepilogo"]) .wpn-punto-oggi::after { opacity: 0; }

/* suggerimento della colonna di oggi: nell'app compare al passaggio, qui solo durante la scena */
.widget-panoramica .wpn-sugg {
  position: absolute; z-index: 3; top: .3em; right: calc(10% + .4em);
  display: grid; gap: .3em;
  min-width: 11.5em; max-width: 100%;
  padding: .7em .8em;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--q-brand) 32%, transparent);
  background: var(--q-surface-2);
  box-shadow: 0 15px 35px var(--q-shadow-color);
  font-size: var(--qa-t-xs);
  transition: opacity var(--qa-dur-base) var(--qa-ease-out), transform var(--qa-dur-base) var(--qa-ease-out);
}
.widget-panoramica .wpn-sugg:not(.is-visibile) { opacity: 0; transform: translateY(-.4em); }
.widget-panoramica .wpn-sugg > strong { font-weight: 800; margin-bottom: .1em; }
.widget-panoramica .wpn-sugg > span { display: flex; justify-content: space-between; gap: 1em; color: var(--q-muted); white-space: nowrap; }
.widget-panoramica .wpn-sugg b { color: var(--q-ink); font-weight: 780; }
/* stretto: il riepilogo sale sopra il grafico, nella zona della legenda */
@container qa (width < 30rem) {
  .widget-panoramica .wpn-sugg { min-width: 9.5em; top: auto; right: 0; bottom: calc(100% + .4em); }
}

.widget-panoramica .wpn-asse-x {
  grid-column: 2;
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr));
  padding-top: .6em;
  color: var(--q-muted); font-size: var(--qa-t-xs); font-weight: 680;
}
.widget-panoramica .wpn-asse-x > span { display: flex; justify-content: center; white-space: nowrap; min-width: 0; }
@container qa (width < 48rem) {
  .widget-panoramica .wpn-x1, .widget-panoramica .wpn-x3, .widget-panoramica .wpn-x5,
  .widget-panoramica .wpn-x7, .widget-panoramica .wpn-x9 { visibility: hidden; }
}
@container qa (width < 30rem) {
  .widget-panoramica .wpn-x4, .widget-panoramica .wpn-x8 { visibility: hidden; }
}

/* ---------- Ordini in corso: anello a due segmenti ---------- */
.widget-panoramica .wpn-ciambella { display: grid; width: min(100%, 10.5em); margin: .2em auto .1em; }
.widget-panoramica .wpn-ciambella svg { grid-area: 1 / 1; width: 100%; height: auto; overflow: visible; transform: rotate(-90deg); }
.widget-panoramica .wpn-ciambella circle { fill: none; stroke-width: 20; }
.widget-panoramica .wpn-ciambella-traccia { stroke: var(--q-line); }
.widget-panoramica .wpn-seg {
  stroke-linecap: round;
  transform-box: view-box; transform-origin: 95px 95px;
  transform: rotate(var(--r, 0deg));
  transition: stroke-dashoffset var(--qa-dur-story) var(--qa-ease-out), transform var(--qa-dur-story) var(--qa-ease-out);
}
.widget-panoramica .wpn-seg-spedito { stroke: var(--q-ok); }
.widget-panoramica .wpn-ciambella-centro { grid-area: 1 / 1; place-self: center; display: grid; text-align: center; }
.widget-panoramica .wpn-legenda { display: grid; gap: .5em; font-size: var(--qa-t-s); }
.widget-panoramica .wpn-legenda > div { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.widget-panoramica .wpn-legenda span { display: inline-flex; align-items: center; gap: .5em; color: var(--q-muted); font-weight: 650; }
.widget-panoramica .wpn-legenda span::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--q-brand-text); }
.widget-panoramica .wpn-legenda .wpn-leg-spedito::before { background: var(--q-ok); }
.widget-panoramica .wpn-legenda strong { font-weight: 800; }

/* ---------- campanella e pannello Notifiche ---------- */
.widget-panoramica .qa-testata { position: relative; z-index: 3; }
.widget-panoramica .qa-campanella {
  transition: background-color var(--qa-dur-fast) ease, color var(--qa-dur-fast) ease, transform var(--qa-dur-press) var(--qa-ease-out);
}
.widget-panoramica .qa-campanella.wpn-attiva { background: var(--q-surface-2); color: var(--q-ink); }
.widget-panoramica .qa-campanella.is-premuto { transform: scale(.94); }
.widget-panoramica .qa-campanella > b { top: -.45em; right: -.55em; box-shadow: 0 0 0 2px var(--q-surface); transition: transform var(--qa-dur-base) var(--qa-ease-out), opacity var(--qa-dur-fast) ease; }
.widget-panoramica .qa-campanella > b.wpn-badge-via { opacity: 0; transform: scale(.5); }
.widget-panoramica .qa-campanella > b.wpn-badge-pop { transform: scale(1.22); }

.widget-panoramica .wpn-notifiche {
  position: absolute; z-index: 6;
  top: calc(100% + .45em); right: .8em;
  width: min(24em, calc(100% - 1.6em));
  overflow: hidden;
  border: 1px solid var(--q-line); border-radius: 16px;
  background: var(--q-surface);
  box-shadow: 0 26px 70px var(--q-shadow-color);
  opacity: 0; visibility: hidden;
  transform: translateY(-.5em) scale(.98);
  transform-origin: 92% 0;
  transition: opacity var(--qa-dur-base) var(--qa-ease-out), transform var(--qa-dur-base) var(--qa-ease-out), visibility 0s linear var(--qa-dur-base);
}
.widget-panoramica .wpn-notifiche.is-aperto { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.widget-panoramica .wpn-not-testa {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  padding: 1em 1.1em .85em; border-bottom: 1px solid var(--q-line);
}
.widget-panoramica .wpn-not-testa > div { display: grid; gap: .15em; min-width: 0; }
.widget-panoramica .wpn-not-testa span { color: var(--q-brand-text); font-size: var(--qa-t-xs); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.widget-panoramica .wpn-not-testa strong { font-size: calc(var(--qa-u) * 1.2); font-weight: 800; }
.widget-panoramica .wpn-not-testa em { font-style: normal; color: var(--q-brand-text); font-size: var(--qa-t-xs); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.widget-panoramica .wpn-not {
  position: relative;
  display: flex; align-items: flex-start; gap: .75em;
  padding: .85em 1.1em;
  border-bottom: 1px solid var(--q-line);
  transition: opacity var(--qa-dur-base) var(--qa-ease-out), transform var(--qa-dur-base) var(--qa-ease-out);
}
.widget-panoramica .wpn-not.qa-prima { opacity: 0; transform: translateY(-.5em); }
.widget-panoramica .wpn-not.is-nuova { background: var(--q-indigo-soft); }
.widget-panoramica .wpn-not.is-nuova::before {
  content: ""; position: absolute; left: 0; top: .8em; bottom: .8em; width: 3px;
  border-radius: 0 999px 999px 0; background: var(--q-brand);
}
.widget-panoramica .wpn-tipo {
  display: grid; place-items: center; flex: none;
  width: 2.3em; height: 2.3em; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--q-brand) 24%, transparent);
  background: var(--q-indigo-soft); color: var(--q-brand-text);
  font-size: var(--qa-t-xs); font-weight: 900;
}
.widget-panoramica .wpn-tipo--ordine { background: var(--q-lime-soft); border-color: color-mix(in srgb, var(--q-ok) 22%, transparent); color: var(--q-ok); }
.widget-panoramica .wpn-tipo--messaggio { background: var(--q-info-soft); border-color: color-mix(in srgb, var(--q-info) 22%, transparent); color: var(--q-info); }
.widget-panoramica .wpn-not > span { display: grid; gap: .2em; min-width: 0; }
.widget-panoramica .wpn-not strong { font-size: var(--qa-t-s); font-weight: 800; line-height: 1.3; }
.widget-panoramica .wpn-not > span > span { color: var(--q-muted); font-size: var(--qa-t-xs); line-height: 1.4; }
.widget-panoramica .wpn-not small { color: var(--q-muted); font-size: var(--qa-t-xs); opacity: .85; }
.widget-panoramica .wpn-not-x { flex: none; margin: -.1em -.3em 0 auto; color: var(--q-muted); font-size: var(--qa-t-xs); font-style: normal; line-height: 1; }
.widget-panoramica .wpn-not-piede {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5em .8em;
  padding: .8em 1.1em; background: var(--q-surface-2);
  color: var(--q-brand-text); font-size: var(--qa-t-xs); font-weight: 800;
}
.widget-panoramica .wpn-browser { display: inline-flex; align-items: center; gap: .6em; margin-left: auto; color: var(--q-ink); white-space: nowrap; }
.widget-panoramica .wpn-browser > b {
  display: inline-flex; align-items: center; min-height: 2em; padding: 0 .75em;
  border: 1px solid var(--q-line); border-radius: 999px;
  color: var(--q-muted); font-weight: 800;
}
@container qa (width < 30rem) {
  .widget-panoramica .wpn-not-testa em { white-space: normal; text-align: right; max-width: 8.5em; line-height: 1.25; }
  /* il pannello resta dentro il widget: via la notifica che non fa parte della storia */
  .widget-panoramica .wpn-not:not(.is-nuova) { display: none; }
}

/* ---------- accessibilità e stampa ---------- */
@media (prefers-reduced-motion: reduce) {
  .widget-panoramica .wpn-notifiche { display: none; }
}
@media print {
  .widget-panoramica .wpn-notifiche { display: none; }
}

/* centesimi in apice: mai sotto 12 px reali */
.widget-panoramica .wpn-kpi sup { font-size: max(0.75rem, .55em); }