/* =========================
   BASE
   ========================= */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  font-family: Arial, sans-serif;
  background: #ffffff;
  color: #333;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-y: auto;
}

/* =========================
   BASE CONTAINER
   ========================= */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto 40px auto;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  box-sizing: border-box;
}

/* =========================
   WRAP OPZIONALE
   ========================= */
.wrap {
  width: 95%;
  max-width: 1400px;
  margin: 0 auto;
}

/* =========================
   HEADER & FOOTER GLOBALI
   ========================= */
#hdr,
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.footer {
  background: #ffffff;
  padding: 10px;
  text-align: center;
  border-top: 1px solid #ddd;
}

/* ===========================
   Tabs reparti
=========================== */
.tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 2px solid #ccc;
  margin: 20px 0;
  gap: 10px;
}
.tabs button {
  padding: 10px 20px;
  border: none;
  border-radius: 8px 8px 0 0;
  background: #ccc;
  color: #fff;
  cursor: pointer;
}
.tabs button.active {
  background: #28a745;
  font-weight: bold;
}

/* ===========================
   Tabelle base comuni
=========================== */
.table,
.table-common,
.table-inviati,
.table-edit,
.table-report,
.products-grid table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  font-family: Arial, sans-serif;
  min-width: 600px;
}
.table th,
.table td,
.table-common th,
.table-common td,
.table-inviati th,
.table-inviati td,
.table-edit th,
.table-edit td,
.table-report th,
.table-report td,
.products-grid th,
.products-grid td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  vertical-align: middle;
}
.table th,
.table-common th,
.table-inviati th,
.table-inviati td,
.table-edit th,
.table-edit td,
.table-report th,
.table-report td,
.products-grid th {
  background: #f2f2f2;
}
.table tr:nth-child(even),
.table-common tr:nth-child(even),
.table-inviati tr:nth-child(even),
.table-edit tr:nth-child(even),
.table-report tr:nth-child(even),
.products-grid tr:nth-child(even) {
  background: #f9f9f9;
}
.table tr:nth-child(odd),
.table-common tr:nth-child(odd),
.table-inviati tr:nth-child(odd),
.table-edit tr:nth-child(odd),
.table-report tr:nth-child(odd),
.products-grid tr:nth-child(odd) {
  background: #fff;
}

/* Tabelle prodotti */
.products-grid th { text-align: left; }

/* ===========================
   Tabelle ordini inviati
=========================== */
.table-inviati th {
  background: #1f3a93;
  color: #fff;
  padding: 10px;
  text-align: left;
}
.table-inviati td {
  border: 1px solid #ddd;
  padding: 10px;
}
.table-inviati .col-data {
  text-align: center;
  white-space: nowrap;
}
.table-inviati td.qta-confermata {
  width: 80px;
  text-align: center;
  white-space: nowrap;
}
.table-inviati input.num-input {
  width: 100%;
  font-size: 14px;
  text-align: center;
  padding: 4px;
  box-sizing: border-box;
}
.table-inviati td.nota-fornitore { width: 100%; }
.table-inviati textarea {
  width: 100%;
  min-height: 30px;
  font-size: 14px;
  padding: 4px;
  resize: vertical;
}
.note-row td {
  background: #fdfdfd;
  font-size: 0.9em;
  color: #555;
  border-top: none;
}
.export-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.export-buttons .btn {
  min-width: 120px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}

/* ===========================
   Tabelle edit
=========================== */
.table-edit th { text-align: left; }
.col-prodotto { white-space: nowrap; }
.col-ordinata { text-align: right; white-space: nowrap; }
.col-um       { text-align: center; white-space: nowrap; }
.col-conf     { text-align: center; width: 80px; }
.col-nota     { width: 100%; }
.table-edit textarea {
  width: 100%;
  min-height: 28px;
  resize: vertical;
  font-size: 0.9em;
}

/* ===========================
   Tabelle report
=========================== */
.table-report th    { background: #f0f0f0; }
.table-report td.left { text-align: left; }
.table-report td.num  { text-align: right; }

/* Tabelle Responsive */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  .table th,
  .table td,
  .table-common th,
  .table-common td,
  .table-inviati th,
  .table-inviati td,
  .table-edit th,
  .table-edit td,
  .table-report th,
  .table-report td,
  .products-grid th,
  .products-grid td {
    padding: 6px;
    font-size: 13px;
  }
}

/* ===========================
   Bottoni
=========================== */
.btn,
a.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;      /* altezza minima */
  padding: 0 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1;        /* evita differenze verticali */
  appearance: none;
  -webkit-appearance: none;
}

.btn-primary,
a.btn-primary { background: #1f3a93; }
.btn-primary:hover,
a.btn-primary:hover { background: #162d73; }
.btn-menu,
a.btn-menu { background: #218838; }
.btn-menu:hover,
a.btn-menu:hover { background: #1a6e2d; }
.btn-email { background: #dc3545; }
.btn-email:hover { background: #b02a37; }

/* ===========================
   Form
=========================== */
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.form-actions label {
  margin-right: 10px;
  white-space: nowrap;
}
.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}
.form-row label {
  width: 140px;
  flex-shrink: 0;
  font-weight: bold;
  text-align: right;
  margin-right: 8px;
  white-space: nowrap;
}
.form-row input,
.form-row select,
.form-row textarea {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 15px;
  height: 40px;
}
.form-row textarea {
  min-height: 80px;
  height: auto;
}

/* ===========================
   Campo password con icona 👁️
=========================== */
.pwd-field {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 350px;
}
.pwd-field input[type="password"],
.pwd-field input[type="text"] {
  height: 45px;
  width: 100%;
  padding: 0 40px 0 12px; /* spazio a dx per l'occhio */
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
  box-sizing: border-box;
}
.pwd-field .gest-toggle-pwd {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  color: #444;
}
.toggle-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  color: #444;
}

/* Riga password */
.password-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}
.password-row label {
  width: 120px;
  flex-shrink: 0;
  font-weight: bold;
  text-align: right;
}
.password-row .pwd-field {
  flex: 1;
  max-width: 400px;
}

/* ===========================
   Overlay messaggi flottanti
=========================== */
.msg-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 20px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-align: left;
  z-index: 11000;
  display: none;
}
.msg-error   { background: #ff0000; }
.msg-success { background: #28a745; }

/* ===========================
   Colonne personalizzate biglietti
=========================== */
.table-common th.col-data,
.table-common td.col-data {
  text-align: center;
  width: 85px;
  max-width: 85px;
  padding-right: 6px;
}
.table-common td.col-data input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 10px;
}
.table-common th.col-email,
.table-common td.col-email {
  width: 300px;
  max-width: 300px;
  white-space: nowrap;
}
.table-common td.col-email input {
  width: 100%;
  box-sizing: border-box;
}
.table-common th.col-tipo,
.table-common td.col-tipo {
  width: 90px;
  max-width: 90px;
  text-align: center;
}

/* ===========================
   Riga evento (EVENTO + QUANTITÀ)
=========================== */
.evento-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}
.evento-row label {
  font-weight: bold;
  margin-right: 8px;
}
.evento-row select#id_evento {
  flex: 0 0 60%;
  min-width: 260px;
  max-width: 60%;
  height: 45px;
}
.evento-row input[type="number"].input-quantita {
  width: 120px;
  max-width: 120px;
  height: 45px;
  text-align: right;
}

/* ===========================
   Bottoni a destra
=========================== */
.actions-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  margin-top: 8px;   /* spazio sopra */
  padding-top: 3px;  /* padding interno sopra i bottoni */
}


/* === OVERLAY MESSAGGI GESTIONALE === */
.gest-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 25px;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  z-index: 20000;
  display: none;
}
.gest-overlay.ok { background: #008000; }   /* verde */
.gest-overlay.error { background: #ff0000; } /* rosso */

/* === MODAL PASSWORD GESTIONALE === */
.gest-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}
.gest-modal-content {
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  width: 550px;
}
.gest-pwd-wrapper {
  display: flex;
  align-items: center;
}
.gest-pwd-wrapper input {
  flex: 1;
}
.gest-toggle-pwd {
  cursor: pointer;
  margin-left: 8px;
}
.num-input::placeholder {
  font-size: 8px;   /* più piccolo del testo normale */
  color: #888;       /* colore più tenue */
}
.gest-hidden { display: none; }

.form-row input,
.form-row select {
  flex: 1;
  max-width: 100%;
  height: 38px;
  padding: 6px 8px;
  box-sizing: border-box;
}
/* ===========================
   Colonna Azioni (icone Edit/Print/Delete)
=========================== */
.col-azioni {
  width: 140px;
  white-space: nowrap;
  text-align: center;
}
.col-azioni a {
  display: inline-block;
  margin: 0 5px;
}
.col-azioni img {
  height: 28px;     /* dimensione standard icone */
  width: auto;
  vertical-align: middle;
}
/* Colonna Importo */
.col-importo {
  text-align: right;
  width: 100px;      /* max 15 caratteri */
  max-width: 100px;
  white-space: nowrap;
}

/* Colonna Tipo */
.col-tipo {
  text-align: left;
  width: auto;       /* riempie lo spazio restante */
}

/* Colonna Fornitore */
.col-fornitore {
  width: 220px;      /* aumentata del 20% rispetto a prima */
  max-width: 220px;
  text-align: left;
  white-space: nowrap;
}

/* Colonna Centro */
.col-centro {
  width: 120px;      /* ridotta del 20% */
  max-width: 120px;
  text-align: left;
  white-space: nowrap;
}

/* Input Importo nei filtri */
#importo_minimo {
  text-align: right;
  width: 120px;
}