@import url('../../assets/libs/font-awesome/4.7.0/css/font-awesome.min.css');

/* Background con movimento lento e sobrio */
body {
  background: var(--ng-page);
  background-size: 300% 300%; /* Aumenta l'area di sfondo per un effetto dinamico */
  animation: gradientShift 30s ease infinite; /* Movimento del gradiente lento e continuo */
  color: #2a2a2a; /* Colore del testo scuro per migliorare la leggibilità */
  font-family: 'Inter', system-ui, sans-serif;
  margin: 0;
  height: 100vh;
}

/* Animazione lenta del background con gradienti fluidi */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Card con effetto vetro (glassmorphism) e trasparenza */
.card {
  border: 1px solid var(--ng-border);
  border-radius: var(--ng-radius-lg);
  box-shadow: var(--ng-shadow-md);
  background: var(--ng-surface);
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover sulla card */
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* Logo con animazione semplice */
.logo {
  width: 100px;
  height: auto;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.logo:hover {
  transform: scale(1.1);
  opacity: 0.85;
}

/* Navigazione con un aspetto pulito e moderno */
.nav-pills .nav-link {
  border-radius: 8px;
  padding: 12px 20px;
  font-weight: 500;
  font-size: 14px;
  color: var(--ng-text-muted);
  background-color: var(--ng-surface-muted);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-pills .nav-link.active {
  background-color: var(--ng-primary);
  color: #ffffff;
}

.nav-pills .nav-link:hover {
  background-color: #d1d9e0;
  color: #2f3b52;
}

/* Input e select con bordi arrotondati */
.form-control, .form-select {
  border-radius: 5px;
  padding: 12px 20px;
  font-size: 16px;
  border: 1px solid #ccc;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus, .form-select:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Pulsanti con colori professionali */
.btn {
  padding: 12px 20px;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  border: none;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Tab content con animazione più delicata */
.tab-content {
  animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.form-check-input:checked + .form-check-label {
  font-weight: 500;
}