/* Gestionale · Da valorizzare — foglio suo (27/10/2026)
   In ufficio gli schermi sono piccoli e la tabella ha otto colonne: sotto i
   1200px ogni riga diventa una SCHEDA, con le etichette accanto ai numeri.
   E si mette in evidenza quello che conta davvero: il costo pieno, il margine,
   quello che manca. Il resto si fa piccolo e grigio. */

/* ---- quello che conta si vede, il resto fa da sfondo ---- */
.v-tab .v-pieno { font-size: 15px; }
.v-tab .v-pieno b { font-size: 17px; color: var(--grigio-900); }
.v-prima { display: block; color: var(--grigio-500); font-size: 11px; line-height: 1.35; }
.v-ivato { display: block; color: var(--grigio-500); font-size: 11px; }
.v-auto { font-size: 11px; color: var(--grigio-500); background: var(--grigio-50);
          border: 1px solid var(--grigio-200); border-radius: 5px;
          padding: 2px 6px; margin-top: 3px; display: inline-block; white-space: nowrap; }
.v-margine { margin-top: 3px; line-height: 1.4; }
.v-margine small { display: block; font-size: 11px; }
.v-netto { font-size: 11px; margin-top: 4px; white-space: nowrap; cursor: pointer;
           color: var(--ambra); background: var(--ambra-chiaro);
           border: 1px solid var(--ambra); border-radius: 5px; padding: 2px 6px; display: inline-block; }
.v-netto.vuoto { color: var(--grigio-500); background: transparent;
                 border-color: var(--grigio-200); border-style: dashed; }
.v-netto:hover { filter: brightness(.97); }
.v-nofoto { display: inline-flex; width: 42px; height: 42px; flex: 0 0 42px;
            align-items: center; justify-content: center; border-radius: 6px;
            border: 1px dashed var(--grigio-300, #cbd5e1); color: var(--grigio-500); font-size: 12px; }

/* le caselle: quelle da riempire si notano */
.v-tab input[type="text"] { border: 1px solid var(--grigio-300, #cbd5e1); border-radius: 7px;
                            padding: 6px 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.v-tab input[type="text"]:focus { outline: 2px solid var(--blu, #2563eb); outline-offset: -1px; }
.v-tab input.v-costo { font-weight: 600; }

/* ---- sotto i 1200px la tabella diventa un elenco di schede ---- */
@media (max-width: 1200px) {
  .v-tab, .v-tab thead, .v-tab tbody, .v-tab tr, .v-tab td { display: block; width: auto; }
  .v-tab thead { display: none; }
  .v-tab tr { border: 1px solid var(--grigio-200); border-radius: 10px;
              padding: 12px 14px; margin: 10px 0; background: #fff; }
  .v-tab td { border: none !important; padding: 5px 0; text-align: left !important;
              display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: baseline; }
  /* la prima cella (foto e nome) sta larga, senza etichetta */
  .v-tab td:first-child { grid-template-columns: 1fr; padding-bottom: 9px;
                          margin-bottom: 7px; border-bottom: 1px solid var(--grigio-100) !important; }
  .v-tab td::before { content: attr(data-et); font-size: 11px; text-transform: uppercase;
                      letter-spacing: .04em; color: var(--grigio-500); font-weight: 600;
                      padding-top: 4px; }
  .v-tab td:first-child::before { content: none; }
  .v-tab input[type="text"] { width: 100% !important; max-width: 160px; }
  .tabella-scorre { overflow: visible; }
}

/* sui telefoni l'etichetta va sopra, se no non resta spazio per il numero */
@media (max-width: 560px) {
  .v-tab td { grid-template-columns: 1fr; gap: 2px; }
  .v-tab td::before { padding-top: 0; }
  .v-tab input[type="text"] { max-width: 100%; }
}

/* ---- le spese in cima: su schermo stretto vanno in colonna ---- */
@media (max-width: 860px) {
  .v-spese { flex-direction: column; align-items: stretch !important; }
  .v-spese label.campo { max-width: none !important; }
  .v-spese .v-oppure { display: none; }
}

/* ---- le due caselle del prezzo: senza IVA e con IVA (27/10/2026) ----
   Si scrive in quella che torna comoda e l'altra si riempie da sola: chi fa un
   prezzo al pubblico pensa «19,99», chi lavora sui listini pensa «16,39». */
.v-coppia { display: flex; gap: 6px; justify-content: flex-end; margin-top: 3px; }
.v-coppia label { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.v-coppia i { font-style: normal; font-size: 10px; color: var(--grigio-500);
              text-transform: uppercase; letter-spacing: .03em; }
.v-coppia input { width: 86px; text-align: right; }
.v-coppia .v-prezzo-iva { background: var(--grigio-50); }
@media (max-width: 1200px) {
  .v-coppia { justify-content: flex-start; }
  .v-coppia label { align-items: flex-start; }
  .v-coppia input { width: 100%; max-width: 110px; }
}
@media (max-width: 560px) {
  .v-coppia { flex-wrap: wrap; }
  .v-coppia label { flex: 1 1 42%; }
}

/* ---- Mancanze: la mail di reclamo (27/10/2026) ---- */
.ml-foto { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px;
           padding: 9px; background: var(--grigio-50); border-radius: 8px; }
.ml-foto img { width: 54px; height: 54px; object-fit: cover; border-radius: 6px;
               border: 1px solid var(--grigio-200); background: #fff; }
.ml-conto { margin-top: 10px; padding: 9px 12px; border-radius: 8px;
            background: var(--ambra-chiaro); color: var(--grigio-900); font-size: 13px; }