@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

body, html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  background-color: #1b1b1b;
  color: #f5f5f5;
  font-family: "MedievalSharp", cursive;
}

h1 {
  color: #e63946;
  text-align: center;
  margin-top: 20px;
}

/* Navbar */
.navbar {
  background-color: #333;
  color: #f5f5f5;
  font-size: 1.2em;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
  font-size: 1.4em;
  color: #e2e2e2 !important;
  width: 88px;
}

/* Pannello di Controllo */
.control-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 15px;
  background-color: #1b1b1b;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.control-panel .btn {
  font-size: 1em;
  margin: 5px;
  transition: transform 0.2s, background-color 0.3s;
}

.control-panel .btn:hover {
  transform: translateY(-2px);
}

#turnCounter {
  font-size: 1.2em;
  color: #e63946;
  font-weight: bold;
}

/* Animazione e Hover per i Pulsanti */
.btn-primary {
  background-color: #e63946;
  border: none;
  color: #fff;
}

.btn-primary:hover {
  background-color: #bf2d34;
}

.btn-info {
  background-color: #17a2b8;
  color: #fff;
}

.btn-info:hover {
  background-color: #138496;
}

.btn-success {
  background-color: #28a745;
  color: #fff;
}

.btn-success:hover {
  background-color: #218838;
}

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

.btn-danger {
  background-color: #dc3545;
  color: #fff;
}

.btn-danger:hover {
  background-color: #c82333;
}

/* END NAV */

.container-fluid {
  max-width: 100%;
  text-align: right;
}

.table-container {
  width: 100%;
  margin: 0 auto;
}

.table-dark {
  width: 100%;
  table-layout: auto;
}

.table-dark th, .table-dark td {
  border: 1px solid #444;
  padding: 8px;
  color: #f5f5f5;
  text-align: center;
}

.table-dark input[type="number"],
.table-dark select,
.table-dark input[type="text"] {
  text-align: center;
  background-color: #333;
  color: #fff;
  border: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#initiativeTable input[placeholder="+"] {
  width: 110px;
}

.pf-attuali {
  font-weight: bold;
}

.pf-attuali.verde {
  color: #28a745;
}

.pf-attuali.giallo {
  color: #ffc107;
}

.pf-attuali.arancione {
  color: #fd7e14;
}

.pf-attuali.rosso {
  color: #dc3545;
}



#turnCounter {
  font-size: 1.2em;
  color: #e63946;
  font-weight: bold;
}

.iniziativa-input {
  display: flex;
  gap: 10px;
  /* Spazio tra i campi */
  align-items: center;
  justify-content: center;
}

.iniziativa-input input[type="number"] {
  width: 110px;
  /* Dimensione fissa per migliorare la leggibilità */
  text-align: center;
}

.pf-attuali.verde {
  color: #28a745 !important;
}

.pf-attuali.giallo {
  color: #ffc107 !important;
}

.pf-attuali.arancione {
  color: #fd7e14 !important;
}

.pf-attuali.rosso {
  color: #dc3545 !important;
}




.table-dark th:nth-child(1) {
  min-width: 200px;
}

.table-dark th:nth-child(2) {
  min-width: 100px;
}

.table-dark th:nth-child(3) {
  min-width: 90px;
}

.table-dark td:nth-child(4),
/* CA */
.table-dark th:nth-child(5),
.table-dark td:nth-child(5),
/* PF Max */
.table-dark th:nth-child(6),
.table-dark td:nth-child(6) {
  /* PF Attuali */
  width: 120px;
  min-width: 120px;

}

.table-dark td:nth-child(7) {
  /* PF Attuali */
  width: 120px;
  min-width: 120px;

}

.condition-icon {
  color: #ff6347;
  /* Colore dell'icona, personalizzabile */
  font-size: 1.2em;
  /* Dimensione dell'icona */
  vertical-align: middle;
  /* Allinea l'icona al centro del testo */
}

.action-buttons button {
  margin: 5px auto;
}

.bonus-wrapper {
  display: flex;
  align-items: center;
}


/* Uniforma la larghezza del menu a tendina */
.dropdown-menu {
  min-width: 150px;
  /* Allinea la larghezza del menu al pulsante */
}


/* Stile del Dropdown per la Navbar */
.navbar .dropdown-menu {
  background-color: #1b1b1b !important;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.navbar .dropdown-menu .dropdown-item {
  color: #f5f5f5 !important;
  transition: background-color 0.2s, color 0.2s;
}

.navbar .dropdown-menu .dropdown-item:hover {
  background-color: #333 !important;
  color: #e63946 !important;
}

/* Stile per le Select nella Tabella */
.table-dark select {
  background-color: #333 !important;
  color: #f5f5f5 !important;
  border: 1px solid #444;
  padding: 5px;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}

.table-dark select:focus {
  background-color: #444 !important;
  color: #fff !important;
  outline: none;
  border-color: #555;
}

/***** Stili per la Guida *****/

/* Sfondo delle card */
.card {
  background-color: #2a2a2a !important;
  /* Grigio scuro per sfondo di card */
  border: 1px solid #444 !important;
  /* Bordo leggermente visibile */
}

/* Colore per i titoli delle sezioni */
.card-header h3 button {
  color: #d4af37 !important;
  /* Oro per i titoli, evocativo di D&D */
  font-weight: bold !important;
}

/* Colore per il testo della descrizione */
.card-body {
  color: #f0e6d6 !important;
  /* Bianco sporco, come pergamena, per il corpo del testo */
}

/* Cambiamento colore su hover del titolo */
.card-header h3 button:hover {
  color: #ffd700 !important;
  /* Giallo oro brillante */
}

/* Colore di sfondo per l'intera guida */
.container-fluid {
  /* Grigio molto scuro per il contenitore principale */
  padding: 20px !important;
  border-radius: 8px !important;
}

/* Stile per i link nell'accordion */
.btn-link {
  color: #d4af37 !important;
  /* Oro scuro per coerenza con i titoli */
  text-decoration: none !important;
}

.btn-link:hover {
  color: #ffd700 !important;
  /* Colore oro più chiaro al passaggio del mouse */
  text-decoration: underline !important;
}

footer a {
  text-decoration: none;
  /* Rimuove la sottolineatura */
}

footer a:hover {
  text-decoration: underline;
  /* Sottolinea al passaggio del mouse */
}

.draggable-dice {
  font-size: 2em;
  /* Dimensione dell'icona */
  cursor: pointer;
  /* Mostra che è interattivo */
  z-index: 1000;
  /* Assicurati che sia sopra gli altri elementi */
  transition: transform 0.2s;
  /* Aggiunge un effetto al passaggio del mouse */
}

.draggable-dice:hover {
  transform: scale(1.1);
  /* Ingrandisci l'icona al passaggio del mouse */
}

.dado-container img {
  width: 5%;
}

.dado-container input {
  text-align: center;
  color: #eee;
  width: 70px;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid #fff;
}

.dado-container .dado {
  display: flex;
  justify-content: start;
  gap: 10px;
}

.dado-container .dado span:nth-child(3) {
  width: 52px;
  text-align: center;
}

.svg-white {
  filter: invert(92%) sepia(100%) saturate(2%) hue-rotate(62deg) brightness(111%) contrast(101%);
  -webkit-filter: invert(92%) sepia(100%) saturate(2%) hue-rotate(62deg) brightness(111%) contrast(101%);
}

.turno-attivo {
  --bs-table-bg: #eee !important;
  color: #fff !important;
  font-weight: bold;
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  right: -260px;
  width: 260px;
  height: 100%;
  background-color: #2b2b2b;
  color: #f5f5f5;
  transition: right 0.3s ease;
  overflow-y: auto;
  z-index: 9999;
  padding: 50px 15px 15px;
  /* Spazio aggiuntivo in alto per evitare la sovrapposizione */
}

.sidebar.open {
  right: 0;
  /* Sidebar visibile */
}

.sidebar-btn {
  background: none;
  border: none;
  color: #e63946;
  /* Rosso acceso */
  font-size: 1.5em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease, transform 0.2s ease;
}

.sidebar-btn:hover {
  color: #bf2d34;
  /* Rosso scuro */
  transform: scale(1.1);
  /* Leggero ingrandimento */
}

/* Pulsante di chiusura della sidebar */
.sidebar-btn.close-btn {
  position: fixed;
  /* Cambiato da absolute a fixed per essere fuori dal flusso */
  top: 20px;
  /* Spazio dall'alto */
  right: 280px;
  /* Distanza dal bordo destro della sidebar */
  z-index: 10000;
  /* Assicura che sia sopra tutto */
  background-color: #333;
  /* Sfondo scuro */
  color: #fff;
  /* Icona bianca */
  border-radius: 50%;
  /* Forma circolare */
  width: 40px;
  height: 40px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  font-size: 1.2em;
}

.sidebar-btn.close-btn:hover {
  background-color: #444;
  color: #e63946;
  transform: rotate(90deg);
}


/* Layout orizzontale */
.sidebar-icons.horizontal-icons {
  display: flex;
  gap: 10px;
  /* Spaziatura tra i pulsanti */
  justify-content: center;
}

.sidebar-section h3 {
  font-size: 14px;
  color: #f5f5f5;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Campo del nome */
.nome-lista-container {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.nome-lista-container input {
  flex: 1;
  padding: 6px;
  font-size: 12px;
  border: none;
  border-radius: 4px;
  background-color: #444;
  color: white;
  text-align: center;
}

.confirm-btn {
  background-color: #28a745;
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.confirm-btn:hover {
  background-color: #218838;
  transform: scale(1.1);
}

/* Divider */
.divider {
  height: 1px;
  background-color: #444;
  margin: 20px 0;
}

/* Contenitore della lista */
.sidebar-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-section ul li {
  background-color: #333;
  /* Sfondo scuro */
  margin-bottom: 10px;
  /* Spaziatura tra le liste */
  padding: 10px;
  border-radius: 5px;
  color: #f5f5f5;
  /* Testo bianco */
}

/* Nome della lista */
.sidebar-section ul li .list-name {
  font-size: 16px;
  /* Dimensione normale del testo */
  font-weight: bold;
  /* Grassetto per enfasi */
  margin-bottom: 5px;
  overflow: hidden;
  white-space: nowrap;
  /* Evita il wrapping del testo */
  text-overflow: ellipsis;
  /* Aggiunge i "..." se il testo è troppo lungo */
}

/* Contenitore delle icone */
.sidebar-section ul li .list-actions {
  display: flex;
  justify-content: flex-end;
  /* Allinea le icone a destra */
  gap: 10px;
  /* Spaziatura tra le icone */
}

/* Icone */
.sidebar-section ul li .list-actions button {
  background: none;
  border: none;
  color: #e63946;
  /* Rosso per le icone */
  font-size: 18px;
  /* Dimensione icone */
  cursor: pointer;
  transition: color 0.3s ease, transform 0.2s ease;
}

.sidebar-section ul li .list-actions button:hover {
  color: #bf2d34;
  /* Rosso scuro al passaggio del mouse */
  transform: scale(1.1);
  /* Leggero ingrandimento */
}

/* Pulsante generico nella sidebar */
.sidebar-btn {
  background: none;
  border: none;
  color: #e63946;
  /* Rosso acceso */
  font-size: 1.5em;
  /* Icone più grandi per visibilità */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease, transform 0.2s ease;
  padding: 10px;
}

.sidebar-btn:hover {
  color: #bf2d34;
  /* Rosso scuro al passaggio del mouse */
  transform: scale(1.1);
  /* Leggero ingrandimento */
}

/* Pulsante per chiudere la sidebar */
.sidebar-btn.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #333;
  /* Sfondo scuro */
  color: #fff;
  /* Icona bianca */
  border-radius: 50%;
  /* Circolare */
  width: 40px;
  height: 40px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  font-size: 1.2em;
}

.sidebar-btn.close-btn:hover {
  background-color: #444;
  /* Sfondo più chiaro al passaggio del mouse */
  color: #e63946;
  /* Rosso per evidenziare */
  transform: rotate(90deg);
  /* Rotazione per effetto visivo */
}

.navbar-btn {
  background-color: #333;
  /* Sfondo scuro */
  color: #f5f5f5;
  /* Testo chiaro */
  border: none;
  padding: 6px 10px;
  font-size: 18px;
  /* Dimensione dell'icona */
  border-radius: 5px;
  /* Angoli arrotondati */
  margin-left: 10px;
  /* Spaziatura dal logo */
  transition: background-color 0.3s, transform 0.2s;
}

.navbar-btn:hover {
  background-color: #444;
  /* Sfondo più chiaro */
  color: #e63946;
  /* Rosso per evidenziare */
  transform: scale(1.1);
  /* Leggero ingrandimento */
}

/* Icone della sidebar */
.sidebar-icon-btn i {
  font-size: 18px;
  /* Dimensione icona */
  display: inline-block;
  margin: 0 auto;
  /* Centra l'icona nel pulsante */
  line-height: 1;
  /* Impedisce all'icona di sembrare schiacciata */
}

/* Pulsanti nella sidebar */
.sidebar-icon-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.sidebar-icon-btn i {
  font-size: 20px;
}

.sidebar-icon-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.sidebar-icon-btn.red {
  background-color: #dc3545;
  color: white;
}

.sidebar-icon-btn.red:hover {
  background-color: #c82333;
}

.sidebar-icon-btn.green {
  background-color: #28a745;
  color: white;
}

.sidebar-icon-btn.green:hover {
  background-color: #218838;
}

.sidebar-icon-btn.yellow {
  background-color: #ffc107;
  color: black;
}

.sidebar-icon-btn.yellow:hover {
  background-color: #e0a800;
}