/* Stili generali per il corpo della pagina */
body {
  font-family: Arial, sans-serif;         /* Font semplice e leggibile */
  background-color: #eef6f7;              /* Colore di sfondo azzurrino chiaro */
  margin: 0;                              /* Nessuno spazio esterno intorno al body */
  padding: 20px;                          /* Spazio interno ai lati del body */
}

/* Contenitore principale */
.container {
  max-width: 900px;                       /* Larghezza massima 900px */
  margin: auto;                           /* Centra il contenitore orizzontalmente */
  background-color: white;               /* Sfondo bianco */
  padding: 25px;                          /* Spazio interno */
  border-radius: 12px;                    /* Angoli arrotondati */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);/* Ombra leggera intorno al contenitore */
}

/* Titolo principale */
h1 {
  text-align: center;                     /* Allinea il testo al centro */
  color: #009688;                         /* Verde acqua */
}

/* Stile generale del form */
form {
  display: flex;                          /* Disposizione degli elementi in riga */
  gap: 10px;                              /* Spazio tra i campi */
  flex-wrap: wrap;                        /* Manda a capo gli elementi se non ci stanno */
  margin-bottom: 20px;                    /* Spazio sotto il form */
}

/* Stile base per input e pulsanti */
input, button {
  padding: 10px;                          /* Spazio interno */
  font-size: 1rem;                        /* Dimensione leggibile del testo */
}

/* Stile specifico per i pulsanti */
button {
  background-color: #009688;             /* Verde acqua */
  color: white;                           /* Testo bianco */
  border: none;                           /* Nessun bordo */
  border-radius: 5px;                     /* Angoli leggermente arrotondati */
  cursor: pointer;                        /* Il cursore cambia per indicare cliccabilità */
}

/* Effetto al passaggio del mouse sul pulsante */
button:hover {
  background-color: #00796b;              /* Colore più scuro quando ci si passa sopra */
}

/* Tabella DPI e ordini */
table {
  width: 100%;                            /* Occupa tutta la larghezza disponibile */
  border-collapse: collapse;             /* Elimina gli spazi tra i bordi delle celle */
  margin-top: 10px;                       /* Spazio sopra la tabella */
}

/* Intestazioni delle tabelle */
th {
  background-color: #e0f2f1;              /* Sfondo verde acqua chiaro */
  cursor: pointer;                        /* Cursore a mano: indica che si può cliccare */
}

/* Celle della tabella (sia intestazioni che contenuti) */
th, td {
  padding: 12px;                          /* Spazio interno alle celle */
  text-align: center;                     /* Testo centrato */
  border-bottom: 1px solid #ccc;          /* Riga di separazione grigia chiara sotto */
}

/* Stato OK (quando la quantità è sopra la soglia) */
.status-ok {
  color: green;                           /* Testo verde */
  font-weight: bold;                      /* Testo in grassetto */
}

/* Stato basso (quando la quantità è sotto la soglia) */
.status-low {
  color: red;                             /* Testo rosso */
  font-weight: bold;                      /* Testo in grassetto */
}

/* Pulsanti per le azioni (modifica, elimina, ecc.) */
.action-buttons button {
  margin: 2px;                            /* Piccolo spazio tra i pulsanti */
  padding: 5px 8px;                       /* Spaziatura compatta */
  font-size: 0.9rem;                      /* Testo leggermente più piccolo */
}

/* Contenitore per il form degli ordini */
.ordine-container {
  margin-bottom: 1em;                     /* Spazio sotto al blocco ordini */
}

/* Tabelle degli ordini e dello storico */
#tabellaOrdini, #tabellaStorico {
  width: 100%;                            /* Larghezza completa */
  border-collapse: collapse;             /* Unisce i bordi delle celle */
  margin-top: 1em;                        /* Spazio sopra la tabella */
}

/* Celle e intestazioni di tabella per ordini e storico */
#tabellaOrdini th, #tabellaOrdini td,
#tabellaStorico th, #tabellaStorico td {
  border: 1px solid #ccc;                 /* Bordi grigi per ogni cella */
  padding: 8px;                           /* Spazio interno alle celle */
  text-align: center;                     /* Testo centrato */
}

/* Intestazioni della tabella dello storico */
#tabellaStorico th {
  background-color: #e0f2f1;              /* Sfondo verde acqua chiaro */
  cursor: pointer;                        /* Cliccabili (ordinabili) */
}

/* Celle di contenuto della tabella dello storico */
#tabellaStorico td {
  font-size: 0.9rem;                      /* Testo leggermente più piccolo */
}


.paginazione {
  margin-top: 10px;
  text-align: center;
}

.paginazione button {
  margin: 2px;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  background-color: #009688;
  cursor: pointer;
  transition: background-color 0.3s;
}

.paginazione button:hover {
  background-color: #00796b;
}

.pagina-attiva {
  background-color: #00796b;
  color: white;
  font-weight: bold;
}