/* --- 🎯 VARIABILI GLOBALI NIKE --- */
:root {
  --nike-black: #111;
  --nike-grey: #f5f5f5;
  --text-primary: #333;
  --card-border-color: #e0e0e0;
  --button-orange: #ff5000;
  --button-orange-hover: #e55d00;
  --button-green: #2ecc71;
  --white: #ffffff;
}

/* --- 🎯 Contenitore Info Box --- */
.info-box-container {
  background-color: var(--nike-grey);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 700px;
  margin: 20px auto;
  position: relative;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* --- 🎯 Titolo Box --- */
.info-box-container h3 {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--button-orange);
  margin-bottom: 16px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- 🎯 Tabella Previsioni --- */
.predictions-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  text-align: center;
}

.predictions-table th,
.predictions-table td {
  padding: 10px;
  border: 1px solid var(--card-border-color);
  font-size: 1rem;
}

.predictions-table th {
  background-color: var(--nike-grey);
  color: var(--nike-black);
  font-weight: bold;
  text-transform: uppercase;
}

/* --- 🎯 Celle Iniziali --- */
.predictions-table td {
  background-color: var(--white);
  color: var(--nike-black);
  transition: background-color 0.3s ease;
}

/* --- 🎯 Riga Confermata (Arancione Nike) --- */
.predictions-table tr.confirmed td {
  background-color: var(--button-orange) !important;
  color: var(--white) !important;
  font-weight: bold;
}

/* --- 🎯 Riga Modificata (Effetto lampeggio Nike verde-arancio) --- */
@keyframes flashNike {
  0% { background-color: var(--button-green); }
  100% { background-color: var(--button-orange); }
}

.predictions-table tr.modified td {
  animation: flashNike 1s ease-in-out;
  color: var(--white);
}

/* --- 🎯 Input Personalizzazione Nike-Style --- */
.manual-time-input {
  background-color: var(--nike-grey);
  border: 2px solid var(--button-orange);
  border-radius: 50px;
  padding: 8px;
  font-size: 0.9rem;
  color: var(--nike-black);
  text-align: center;
  width: 100%;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.manual-time-input:focus {
  outline: none;
  border-color: var(--button-orange-hover);
  box-shadow: 0 0 6px rgba(255,80,0,0.5);
}

.predictions-table td .manual-time-input {
  max-width: 95%;
}

/* --- 🎯 Pulsanti Nike-Style --- */
.confirm-btn,
.customize-btn,
.save-all-btn {
  background-color: var(--button-orange);
  color: var(--white);
  border: none;
  border-radius: 50px;
  padding: 10px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
}

.confirm-btn:hover,
.customize-btn:hover,
.save-all-btn:hover {
  background-color: var(--button-orange-hover);
  transform: scale(1.05);
}

/* --- 🎯 Pulsante Salva Attivo (Verde Nike) --- */
.save-all-btn.enabled {
  background-color: var(--button-green);
}

.save-all-btn.enabled:hover {
  transform: scale(1.05);
  background-color: #27ae60; /* verde più scuro */
}

/* --- 🎯 Pulsante di Chiusura Nike-Style --- */
.close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background-color: var(--button-orange);
  color: var(--white);
  border: none;
  font-size: 1.2rem;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.3s ease;
}

.close-btn:hover {
  background-color: var(--nike-grey);
  color: var(--nike-black);
  transform: scale(1.1);
}

/* --- 🎯 Responsività Nike ottimizzata --- */
@media (max-width: 768px) {
  .info-box-container {
    padding: 16px;
    max-width: 95%;
  }

  .predictions-table th,
  .predictions-table td {
    font-size: 0.9rem;
    padding: 8px;
  }

  .manual-time-input {
    font-size: 0.85rem;
    padding: 6px;
  }
}

@media (max-width: 480px) {
  .info-box-container {
    padding: 12px;
    max-width: 100%;
  }

  .info-box-container h3 {
    font-size: 1.2rem;
  }

  .manual-time-input {
    font-size: 0.8rem;
    padding: 6px;
  }

  .predictions-table th,
  .predictions-table td {
    padding: 6px;
  }
}