/* style.css */

/* Corpo pagina */
body {
  font-family: Arial, sans-serif;
  margin: 20px;
  background-color: #ffffff; /* colore di sfondo di default per tema chiaro */
  color: #000000;           /* colore del testo di default per tema chiaro */
}

/* Container per la treeview */
#treeContainer {
  position: relative;
  width: 100%;
  height: 600px;  /* Adatta alle tue esigenze */
  overflow: auto;
  margin: 0 auto;
  border: 1px solid #ccc;
}

/* Stili dei nodi dell'albero */
.node {
  position: absolute; /* Fondamentale! */
  padding: 10px 15px;
  color: #fff;
  border: 2px solid #388E3C;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  background-color: #D32F2F; /* Rosso di default */
}

.node.editato {
  background-color: #4CAF50; /* Verde se display_id valorizzato */
}

/* Container .login-container per la form di login */
.login-container {
  width: 300px;
  margin: 100px auto;   /* Centra la form a 100px dall'alto */
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 5px;
  background-color: #f9f9f9; /* background chiaro */
}
.login-container h2 {
  text-align: center;
  margin-bottom: 15px;
}
.login-container label {
  display: block;
  margin-bottom: 5px;
}
.login-container input[type="text"],
.login-container input[type="password"] {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.login-container button {
  width: 100%;
  padding: 10px;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.login-container button:hover {
  background-color: #45a049;
}

/* Stili modali */
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  position: relative;
  width: 470px; /* default */
}
.compact {
  width: 470px;    /* riduce la larghezza */
  padding: 15px;   /* riduce il padding */
  border-radius: 5px;
}
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}

/* Etichette e input nelle form di modali */
.modal-content form label {
  margin-bottom: 3px;
}

/* Bottoni generici */
button {
  padding: 8px 12px;
  margin: 5px;
  background-color: #4CAF50;
  color: #fff;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
button:hover {
  background-color: #45a049;
}

/* ========================== */
/*     MODALITÀ SCURA         */
/* ========================== */
@media (prefers-color-scheme: dark) {
  /* Corpo pagina in dark mode */
  body {
    background-color: #444;  /* sfondo scuro */
    color: #eeeeee;            /* testo chiaro */
  }

  /* Container login in dark mode */
  .login-container {
    background-color: #1e1e1e;
    border-color: #333;
  }
  
  /* Modal content in dark mode */
  .modal-content {
    background-color: #1e1e1e;
    color: #ffffff;
  }

  /* Tree container border */
  #treeContainer {
    border: 1px solid #444;
  }

  /* Bottoni in dark mode */
  button,
  .login-container button {
    background-color: #333;
    color: #ffffff;
  }
  button:hover,
  .login-container button:hover {
    background-color: #555;
  }
  
  /* Ad esempio, potresti rendere i nodi leggermente diversi
     in dark mode, se lo desideri. Qui lasciamo invariato
     il colore di background dei .node per coerenza col "rosso" e "verde"
     che si vogliono mantenere. In caso volessi differenziare, 
     puoi modificare i background sotto.
  */
  .node {
    /* Mantieni rossi se vuoi */
    /* background-color: #D32F2F; */
    /* Se preferisci adattare, puoi schiarire o scurire a piacere */
  }
  .node.editato {
    /* background-color: #4CAF50; */
  }
  
  /* Se ci fossero testi scuri dentro i nodi, 
     puoi forzare un colore chiaro:
  */
  .node, .node.editato {
    color: #ffffff;
  }
}