body { font-family: Arial, sans-serif; background: #f4f4f9; padding: 20px; }

/* Layout dell'immagine da scaricare */
#tabellone-whatsapp {
  width: 100%;
  max-width: 1100px;
  padding: 20px;
  background: #1b4332; /* Verde campo */
  color: white;
  border-radius: 12px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.titolo { text-align: center; margin-bottom: 15px; }
.tabella-orari { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tabella-orari th,
.tabella-orari td { border: 1px solid #52b788; padding: 10px 6px; text-align: center; }
.tabella-orari th { background: #2d6a4f; color: #d8f3dc; font-size: 13px; }
.tabella-orari th:first-child,
.tabella-orari td:first-child { width: 105px; }
.tabella-orari td { height: 48px; font-size: 12px; vertical-align: middle; }
.fisso { color: #d8f3dc; font-weight: bold; }
.variabile { color: #f8f9fa; font-style: italic; }
.libero { color: #ffb703; font-weight: bold; }
.prenotato { background: #40916c; color: white; vertical-align: middle; }
.prenotato.fisso { background: #277da1; color: white; }

#gestione-gruppi { max-width: 1100px; margin-bottom: 20px; }
#form-gruppo,
#form-capogruppo { display: none; margin-top: 15px; padding: 18px; background: white; border-radius: 8px; }
#form-gruppo.visibile,
#form-capogruppo.visibile { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(130px, 1fr)); align-items: end; }
#form-gruppo label,
#form-capogruppo label { display: grid; gap: 5px; color: #1b4332; font-weight: bold; font-size: 13px; }
#form-gruppo input,
#form-gruppo select,
#form-capogruppo input { padding: 9px; border: 1px solid #95d5b2; border-radius: 5px; font: inherit; }

.tipo-gruppo { display: flex !important; gap: 10px !important; align-items: center; }
.tipo-gruppo span { display: block; }
.tipo-gruppo label { display: flex !important; gap: 5px !important; align-items: center; font-weight: normal !important; }
.colore-gruppo-label { display: grid; gap: 5px; }
.colore-gruppo-label input { width: 58px; height: 36px; padding: 3px; cursor: pointer; }
.azioni-form { display: flex; gap: 8px; }
.annulla { background-color: #6c757d; }
.elimina-gruppo { display: flex; gap: 8px; align-items: center; margin-top: 15px; }
.elimina-gruppo label { color: #1b4332; font-weight: bold; font-size: 13px; }
.elimina-gruppo select { padding: 9px; border: 1px solid #95d5b2; border-radius: 5px; font: inherit; }
.elimina { background-color: #b02a37; }
.errore-form,
.successo-form { grid-column: 1 / -1; margin: 0; font-weight: bold; }
.errore-form { color: #b02a37; }
.successo-form { color: #2d6a4f; }

button {
  padding: 12px 20px;
  background-color: #25d366; /* Verde WhatsApp */
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}