/* Scala l'interfaccia come nelle altre app MC2 (tutte le misure rem crescono insieme). */
html {
  font-size: 17px;
}

/* ── Tinte, le stesse otto di MC2 Suite e Wholesale Hub ── */
.hb-c-blu{background:#e7f0fe;color:#1877f2} .hb-c-vio{background:#f1eafe;color:#7c3aed}
.hb-c-ver{background:#e6f7ef;color:#059669} .hb-c-ara{background:#fef1e3;color:#d97706}
.hb-c-ros{background:#fdeaec;color:#e11d48} .hb-c-tea{background:#e4f6f7;color:#0891b2}
.hb-c-ind{background:#e9eafe;color:#4f46e5} .hb-c-gri{background:#eef1f5;color:#64748b}

/* ── Moduli: un solo aspetto per campi e pulsanti ── */
.campo {
  width: 100%; border: 1px solid #d1d5db; border-radius: 10px;
  padding: 9px 12px; font-size: 14px; background: #fff;
}
.campo:focus { outline: 2px solid #1877f2; outline-offset: 1px; border-color: #1877f2 }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 14px; border-radius: 10px; padding: 10px 16px;
  background: #1877f2; color: #fff; cursor: pointer; white-space: nowrap;
  transition: background .12s;
}
.btn:hover { background: #1568d8 }
.btn.grigio { background: #f3f4f6; color: #374151 }
.btn.grigio:hover { background: #e5e7eb }
.btn.rosso { background: #fdeaec; color: #be123c }
.btn.rosso:hover { background: #fbd5da }

/* ── Tabelle: intestazione piccola e maiuscola, righe che si evidenziano ── */
.tab { width: 100%; font-size: 14px }
.tab th {
  text-align: left; font-size: 12px; font-weight: 600; color: #6b7280;
  text-transform: uppercase; letter-spacing: .04em; padding: 12px 20px;
  border-bottom: 1px solid #f3f4f6; white-space: nowrap;
}
.tab td { padding: 12px 20px; border-bottom: 1px solid #f3f4f6; vertical-align: middle }
.tab tbody tr:hover { background: #f7f9fc }
.tab .num { text-align: right; font-variant-numeric: tabular-nums }

/* ── Il conto dell'ordine: ricevute = applicate + scartate + rese + giacenza ── */
.conto { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap }
.conto .casella {
  flex: 1 1 110px; text-align: center; border: 1px solid #e4e8ee;
  border-radius: 14px; padding: 14px 8px;
}
.conto .casella b { display: block; font-size: 26px; font-weight: 800; color: #1b2733 }
.conto .casella span { font-size: 11.5px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .06em }
.conto .segno { align-self: center; font-size: 22px; font-weight: 700; color: #9aa4b2 }
.conto .casella.base { background: #f7f9fc }
.conto .casella.ok { background: #e6f7ef; border-color: #b7e4cd }
.conto .casella.ok b, .conto .casella.ok span { color: #065f46 }
.conto .casella.ko { background: #fdeaec; border-color: #f6c5cc }
.conto .casella.ko b, .conto .casella.ko span { color: #9f1239 }

.hb-gruppo {
  font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: #9aa4b2; margin: 8px 0 12px; display: flex; align-items: center; gap: 10px;
}
.hb-gruppo:after { content: ""; flex: 1; height: 1px; background: #e4e8ee }

@media (max-width: 400px) {
  header.mc2-barra { padding-left: .5rem; padding-right: .5rem; gap: .25rem; }
  header.mc2-barra img { height: 1.75rem; }
  header.mc2-barra nav { gap: .25rem; }
}

/* ── Informativa: il bottone blu con la «i» e la finestra che apre ── */
.btn-info {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: #1877f2; color: #fff; font-size: 15px; cursor: pointer;
  transition: background .12s, transform .12s;
}
button.btn-info:hover { background: #1568d8; transform: scale(1.06) }
button.btn-info:focus-visible { outline: 2px solid #16294B; outline-offset: 2px }
.informativa {
  width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 64px);
  border: 0; border-radius: 16px; padding: 0; color: #050505;
  box-shadow: 0 24px 60px -12px rgba(22, 41, 75, .45);
}
.informativa::backdrop { background: rgba(0, 0, 0, .45) }
.informativa-testa {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid #eef1f5; position: sticky; top: 0; background: #fff;
}
.informativa-testa h2 { flex: 1; font-size: 17px; font-weight: 800; color: #1b2733 }
.informativa-chiudi {
  width: 32px; height: 32px; border-radius: 9px; color: #6b7280;
  display: inline-flex; align-items: center; justify-content: center;
}
.informativa-chiudi:hover { background: #eef2f7; color: #1b2733 }
.informativa-corpo { padding: 16px 20px 20px }
.informativa-piede { margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef1f5; color: #6b7280 }

/* Il testo delle informative e della pagina «Come funziona». */
.informativa-corpo, .guida { font-size: 14px; line-height: 1.55; color: #374151 }
.informativa-corpo p, .guida p { margin: 0 0 10px }
.informativa-corpo h3, .guida h3 {
  font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: #6b7280; margin: 16px 0 6px;
}
.informativa-corpo ul, .guida ul { margin: 0 0 10px; padding-left: 18px; list-style: disc }
.informativa-corpo li, .guida li { margin-bottom: 4px }
.informativa-corpo b, .guida b { color: #1b2733 }
.informativa-corpo a, .guida a { color: #1877f2; font-weight: 600 }
.informativa-corpo a:hover, .guida a:hover { text-decoration: underline }
.guida ol { margin: 0; padding: 0; list-style: none; counter-reset: passo }
.guida ol li { counter-increment: passo; display: flex; gap: 12px; margin-bottom: 12px }
.guida ol li::before {
  content: counter(passo); flex: none; width: 28px; height: 28px; border-radius: 9px;
  background: #e7f0fe; color: #1877f2; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

/* Tabella con molte colonne: fianchi stretti e intestazioni che vanno a capo,
   perche' il contenuto stia nella pagina senza scorrere di lato. */
.tab.stretta th, .tab.stretta td { padding-left: 10px; padding-right: 10px }
.tab.stretta th:first-child, .tab.stretta td:first-child { padding-left: 20px }
.tab.stretta th:last-child, .tab.stretta td:last-child { padding-right: 20px }
.tab.stretta th { white-space: normal; vertical-align: bottom; line-height: 1.25 }
.tab.stretta .num { white-space: nowrap }

/* Pulsanti delle azioni nelle righe, come in MC2 Suite: riconoscibili anche
   senza passarci sopra. */
.azione { width: 34px; height: 34px; border-radius: 9px; display: inline-flex;
          align-items: center; justify-content: center; color: #6b7280;
          transition: background .12s, color .12s }
.azione:hover { background: #eef2f7; color: #1b2733 }
.azione.rossa:hover { background: #fdeaec; color: #e11d48 }
.azione.blu { color: #1877f2 }
.azione.blu:hover { background: #e7f0fe }

/* Intestazione su due righe: il titolo del gruppo di colonne sta sopra, centrato. */
.tab th.gruppo { text-align: center; color: #1b2733; border-bottom: 1px solid #e4e8ee;
                 border-left: 1px solid #f3f4f6; padding-top: 10px; padding-bottom: 8px }

/* Icona in un riquadro colorato, come nelle card di MC2 Suite. */
.hb-ic-sm { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center;
            justify-content: center; font-size: 13px; flex-shrink: 0 }

/* Linguette: quella accesa e' blu piena, le altre bianche come i filtri. */
.linguetta { background: #fff; color: #374151 }
.linguetta:hover { background: #f3f4f6 }
.linguetta[aria-selected="true"] { background: #1877f2; color: #fff }
.linguetta:focus-visible { outline: 2px solid #16294B; outline-offset: 2px }

/* Miniatura di un materiale nelle tabelle: quadrata, l'immagine intera dentro. */
.miniatura { width: 44px; height: 44px; object-fit: contain; border-radius: 8px;
             background: #f7f9fc; border: 1px solid #e4e8ee; flex: none }
.miniatura.piccola { width: 24px; height: 24px; border-radius: 6px; background: #fff }
.miniatura.grande { width: 60px; height: 60px; border-radius: 10px }
.miniatura.vuota { display: flex; align-items: center; justify-content: center; color: #c3ccd6; font-size: 20px }

/* Zona in cui trascinare le foto per il caricamento in blocco. */
.zona-trascina { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
                 border: 2px dashed #c9d6e8; border-radius: 14px; padding: 28px 16px; text-align: center;
                 background: #f7f9fc; cursor: pointer; transition: background .12s, border-color .12s }
.zona-trascina:hover, .zona-trascina.sopra { background: #eef5ff; border-color: #1877f2 }
.zona-trascina:focus-within { outline: 2px solid #1877f2; outline-offset: 2px }
.btn:disabled { opacity: .5; cursor: not-allowed }

/* L'aspetto di un materiale: un bollino per valore, ognuno con il suo colore. */
.aspetto { display: flex; flex-wrap: wrap; gap: 4px }
.pezzo { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700;
         padding: 2px 8px; border-radius: 9999px; white-space: nowrap; line-height: 1.5 }
.pezzo .nome { font-weight: 500; opacity: .8 }
.pezzo.cartella { background: #eef1f5; color: #475569 }
.pezzo.colore { background: #fdf2e9; color: #9a3412 }
.pezzo.taglia { background: #e4f6f7; color: #0e7490 }
.pezzo.variante { background: #f1eafe; color: #6d28d9 }

/* ── Tabelle con filtri e ordinamento (static/js/tabelle.js) ──
   Il contenitore scorre da se': cosi' l'intestazione resta ferma in cima
   mentre scorrono le righe, anche quando la tabella e' piu' lunga della pagina. */
.tabella-fissa { overflow: auto; max-height: calc(100vh - 13rem) }
.tabella-fissa thead { position: sticky; top: 0; z-index: 2; background: #fff;
                       box-shadow: 0 1px 0 #e4e8ee, 0 6px 10px -8px rgba(27, 39, 51, .35) }
.tabella-fissa thead th { background: #fff }
.tab th.ordinabile { cursor: pointer; user-select: none }
.tab th.ordinabile:hover { color: #1877f2 }
.tab th.ordinabile::after { content: "↕"; margin-left: 5px; opacity: .3; font-size: 11px }
.tab th[aria-sort="ascending"]::after { content: "▲"; opacity: 1; color: #1877f2 }
.tab th[aria-sort="descending"]::after { content: "▼"; opacity: 1; color: #1877f2 }
.tab th[aria-sort="ascending"], .tab th[aria-sort="descending"] { color: #1877f2 }
.tab .riga-filtri th { padding-top: 0; padding-bottom: 10px; text-transform: none; letter-spacing: 0 }
.filtro-colonna { width: 100%; min-width: 70px; border: 1px solid #d1d5db; border-radius: 8px;
                  padding: 5px 8px; font-size: 13px; font-weight: 400; color: #1b2733; background: #fff }
.filtro-colonna.numero { text-align: right }
.filtro-colonna:focus { outline: 2px solid #1877f2; outline-offset: 0; border-color: #1877f2 }
/* Il subtotale in fondo, fermo anche lui mentre scorrono le righe. */
.tab tfoot td { font-weight: 800; color: #1b2733; background: #f7f9fc; border-top: 2px solid #e4e8ee;
                border-bottom: 0; white-space: nowrap }
.tabella-fissa tfoot { position: sticky; bottom: 0; z-index: 2 }