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

h1, h2 {
  color: #333;
}


ul#domains-list {
    list-style-type: none;
    padding: 0;
    margin: 0;

    /* 1. Abilita Flexbox nel contenitore */
    display: flex;
    /* 2. Permette agli elementi di andare a capo */
    flex-wrap: wrap;
    /* 3. Spazio uniforme tra gli elementi */
    justify-content: space-between;
}

#domains-list li {
    cursor: pointer;
    padding: 10px;
    border: 1px solid #ddd;
    margin: 4px;
    background-color: #f9f9f9;

    /* Rimuovi il float e usa le proprietà Flexbox */
    float: none;

    /* 4. Definisci una dimensione minima (circa 19.5% per un massimo di 5 elementi per riga) */
    /* 100% / 5 = 20%. Sottraiamo i margini/padding per non superare il 100% totale. */
    width: calc(20% - 8px);

    /* 5. Aggiunge box-sizing per includere padding e border nella larghezza, semplificando il calcolo */
    box-sizing: border-box;

    /* 6. Imposta una dimensione minima per l'elemento. Se l'area del contenitore si restringe
       sotto questa dimensione, l'elemento andrà a capo. */
    min-width: 150px;

    /* Opzionale: per assicurare che gli elementi stretti non si comprimano troppo */
    flex-grow: 1;
}

#domains-list .spacer {
    /* 1. LARGHEZZA CRUCIALE: Deve essere identica a quella dei <li> reali 
       (5 colonne: 100% / 5 = 20%. Sottrai i margini esterni di 4px per lato = 8px) */
    width: calc(20% - 8px); 
    box-sizing: border-box; 
    
    /* 2. MARGINI CRUCIALI: Deve essere identico per non falsare i calcoli di spaziatura */
    margin: 4px;
    
    /* 3. RENDI LO SPACER INVISIBILE E NON INTERAGIBILE */
    border: none;
    background-color: transparent;
    cursor: default;
    
    /* 4. ELIMINA L'ALTEZZA: Rimuovi il padding e imposta l'altezza a zero per non lasciare righe vuote */
    padding: 0;
    height: 0; 
    overflow: hidden; 
    
    /* Opzionale: Assicura che l'elemento non venga visualizzato affatto se non serve */
    display: block; 
}

li:hover {
  background-color: #eee;
}


#edit-record-section {
/*  margin-top: 20px;*/
}

#records-section {
  margin-top: 20px;
}

form {
  display: flex;
  flex-direction: column;
}

label {
  margin: 5px 0;
}

input, button {
  padding: 10px;
  margin-bottom: 10px;
  font-size: 1em;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}


.record-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  background-color: #efefef;
}

.record-details {
  flex-grow: 1;
    display: flex;  /* Imposta il contenitore come flex */
    flex-wrap: wrap; /* Consente ai div di andare a capo se non c'è spazio sufficiente */
    gap: 10px; /* Aggiunge spazio tra i div */
    padding: 10px; /* Padding per il contenitore */  
}

.record-details div {
    display: flex; /* Se vuoi che i contenuti all'interno siano allineati */
    justify-content: space-between; /* Spazio tra i contenuti */
    padding: 10px;
    border: 1px solid #ccc; /* Bordo per ciascun record */
    flex: 1 1 calc(10% - 10px); /* Consente a ciascun div di occupare il 33% dello spazio, riducendo i margini */
    box-sizing: border-box; /* Include padding e bordi nel calcolo della larghezza */	
    background-color: #fff;
}

.record-actions {
  display: flex;
  gap: 5px;
  padding: 5px;
}

button {
  padding: 10px;
  cursor: pointer;
}



/* Stile generale per il modulo */
#edit-record-form {
    background-color: #f9f9f9; /* Colore di sfondo */
    border: 1px solid #ddd; /* Bordo del modulo */
    border-radius: 5px; /* Angoli arrotondati */
    padding: 20px; /* Spaziatura interna */
    max-width: 400px; /* Larghezza massima del modulo */
    margin: 20px auto; /* Centratura del modulo */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Ombra per dare profondità */
}

/* Stile per le etichette dei campi */
#edit-record-form label {
    display: block; /* Rendi le etichette a blocco */
    margin-bottom: 8px; /* Margine inferiore */
    font-weight: bold; /* Testo in grassetto */
}

/* Stile per i campi di input */
#edit-record-form input[type="text"],
#edit-record-form input[type="number"],
#edit-record-form select {
    width: 100%; /* Larghezza al 100% */
    padding: 10px; /* Spaziatura interna */
    margin-bottom: 15px; /* Margine inferiore */
    border: 1px solid #ccc; /* Bordo degli input */
    border-radius: 4px; /* Angoli arrotondati */
    box-sizing: border-box; /* Includi padding e bordo nella larghezza totale */
    font-size: 16px; /* Dimensione del font */
}

/* Stile per la select */
#edit-record-form select {
    -webkit-appearance: none; /* Rimuovi lo stile predefinito su Chrome/Safari */
    -moz-appearance: none; /* Rimuovi lo stile predefinito su Firefox */
    appearance: none; /* Rimuovi lo stile predefinito su altri browser */
    background: url('data:image/png;base64,...') no-repeat; /* Aggiungi un'icona a sinistra (puoi sostituire con la tua icona) */
    background-position: right 10px center; /* Posiziona l'icona */
    background-size: 20px; /* Dimensione dell'icona */
}

/* Stile per il pulsante di invio */
#edit-record-form button {
    background-color: #28a745; /* Colore di sfondo verde */
    color: white; /* Colore del testo */
    padding: 10px 15px; /* Spaziatura interna */
    border: none; /* Rimuovi il bordo */
    border-radius: 4px; /* Angoli arrotondati */
    cursor: pointer; /* Cambia il cursore a mano */
    font-size: 16px; /* Dimensione del font */
}

/* Cambia colore del pulsante al passaggio del mouse */
#edit-record-form button:hover {
    background-color: #218838; /* Colore più scuro al passaggio del mouse */
}


/* Sfondo modale */
.modal {
  display: none; /* Nascondi di default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5); /* semi-trasparente */
}

/* Contenuto della modale */
.modal-content {
  background-color: #fefefe;
  margin: 10% auto; /* Centra verticalmente e orizzontalmente */
  padding: 20px;
  border-radius: 8px;
  width: 400px; /* Puoi cambiare la larghezza */
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  position: relative;
}

/* Pulsante chiusura */
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

button {
  border-radius: 4px;
}