/* Portale Fornitori — stesso stile «Monday» delle maschere di TPROJECT */
:root {
  --sfondo: #F6F7FB; --carta: #FFFFFF; --testo: #323338; --tenue: #676879;
  --blu: #0073EA; --blu-scuro: #0060C0; --verde: #00854D; --rosso: #D83A52;
  --bordo: #D0D4E4; --testa: #E6E9EF;
  --ambra-1: #FFF1D6; --ambra-2: #FBE8C4; --verde-1: #E7F3EC; --verde-2: #DBEDE1;
  --rosa-1: #FDE2E4; --rosa-2: #F9D4D8; --riga-2: #F5F6F8;
}
* { box-sizing: border-box; }
/* ⚠ senza questa riga «display: flex» della barra vince su hidden e «Esci» si vede prima di entrare */
[hidden] { display: none !important; }
body { margin: 0; background: var(--sfondo); color: var(--testo);
       font: 15px/1.45 Arial, Helvetica, sans-serif; }
.barra { background: var(--blu); color: #fff; display: flex; align-items: center;
         justify-content: space-between; padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
.barra .titolo { font-size: 19px; font-weight: bold; }
.barra .tenue { color: #CFE3FB; font-weight: normal; }
.utente { display: flex; gap: 10px; align-items: center; }
main { max-width: 1200px; margin: 0 auto; padding: 16px; }
h1 { font-size: 22px; margin: 8px 0 14px; }
.tenue { color: var(--tenue); }
.piccolo { font-size: 13px; color: var(--tenue); }
.scheda { background: var(--carta); border: 1px solid var(--bordo); border-radius: 8px; padding: 20px; }
.stretta { max-width: 420px; margin: 32px auto; }
label { display: block; margin: 10px 0; font-size: 14px; color: var(--tenue); }
input, textarea, select { width: 100%; padding: 8px; font: inherit; border: 1px solid var(--bordo);
                          border-radius: 6px; color: var(--testo); background: #fff; }
.btn { border: 0; border-radius: 6px; padding: 8px 14px; font: bold 14px Arial, sans-serif;
       cursor: pointer; color: #fff; }
.btn:disabled { opacity: .45; cursor: default; }
.btn-blu { background: var(--blu); } .btn-blu:hover { background: var(--blu-scuro); }
.btn-verde { background: var(--verde); } .btn-rosso { background: var(--rosso); }
.btn-chiaro { background: rgba(255,255,255,.18); }
.btn-grigio { background: var(--tenue); }
.btn-piccolo { padding: 5px 9px; font-size: 13px; margin: 2px; }
.btn-scelto { outline: 3px solid #323338; }
.messaggio { padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; }
.messaggio.ok { background: var(--verde-1); color: var(--verde); }
.messaggio.errore { background: var(--rosa-1); color: #A3192D; }
.riquadri { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.riquadro { background: var(--carta); border: 1px solid var(--bordo); border-radius: 8px; padding: 6px 12px; }
.riquadro .t { font-size: 12px; color: var(--tenue); }
.riquadro .v { font-weight: bold; }
.scorre { overflow-x: auto; }
.griglia { width: 100%; border-collapse: collapse; background: var(--carta); }
.griglia th { background: var(--testa); text-align: left; padding: 8px; font-size: 14px; white-space: nowrap; }
.griglia td { padding: 7px 8px; border-top: 1px solid #ECEDF2; vertical-align: top; }
.griglia tbody tr:nth-child(even) { background: var(--riga-2); }
.griglia tbody tr.cliccabile { cursor: pointer; }
.griglia tbody tr.cliccabile:hover { background: #E5F0FF; }
.griglia tr.st-ACCETTATA { background: var(--verde-1) !important; }
.griglia tr.st-ACCETTATA:nth-child(even) { background: var(--verde-2) !important; }
.griglia tr.st-MODIFICATA { background: var(--ambra-1) !important; }
.griglia tr.st-MODIFICATA:nth-child(even) { background: var(--ambra-2) !important; }
.griglia tr.st-RIFIUTATA { background: var(--rosa-1) !important; }
.griglia tr.st-RIFIUTATA:nth-child(even) { background: var(--rosa-2) !important; }
.num { text-align: right; white-space: nowrap; }
.etichetta { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 13px; font-weight: bold; }
.e-APERTA { background: #FFF1D6; color: #8A5A00; }
.e-RISPOSTA_INVIATA { background: var(--verde-1); color: var(--verde); }
.e-RITIRATA { background: #EEEEEE; color: var(--tenue); }
.note { background: var(--carta); border-left: 4px solid var(--blu); padding: 8px 12px; }
.invio { margin-top: 14px; background: var(--carta); border: 1px solid var(--bordo); border-radius: 8px; padding: 12px 16px; }
td input { width: 9em; padding: 5px; }
td input.nota { width: 14em; }
@media (max-width: 640px) {
  main { padding: 10px; }
  .griglia th, .griglia td { padding: 6px; font-size: 13px; }
}