/**
 * Tab Oggi: card di riepilogo e inserimento rapido.
 *
 * `.insight-card` arriva da style.css e da sleep-styles.css, che la trattano
 * come tessera di sola lettura e ne centrano il contenuto. Qui la card ospita
 * anche un form: un campo di inserimento dentro una colonna centrata non ha
 * un bordo a cui allinearsi, quindi l'asse torna a sinistra. Il resto sono i
 * token del design system, non un tema a parte.
 */

#today-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.insight-card.today-card {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  min-height: 0;
  padding: var(--space-5);
  gap: 0;
}

.insight-card.today-card .insight-content {
  width: 100%;
}

/* Il lift al passaggio del mouse sposterebbe un campo mentre lo si compila. */
.insight-card.today-card:hover {
  transform: none;
  border-left-width: 5px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.08);
}

.today-card .insight-title {
  margin-bottom: var(--space-1);
  text-align: left;
}

.today-card .insight-value {
  margin-top: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-gray-900);
}

.today-card .insight-meta {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

/* Registrato e non registrato si distinguono a colpo d'occhio dalla barra
   laterale e dal peso del valore, senza che l'assenza di un dato gridi. */
.insight-card.today-tracked {
  border-left-color: var(--color-primary-500);
}

.today-tracked .insight-value {
  color: var(--color-primary-700);
}

.insight-card.today-missing {
  border-left-color: var(--color-gray-200);
}

.today-missing .insight-value {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  /* gray-400 sarebbe piu' scarico ma resta sotto 3:1 su questo fondo. */
  color: var(--color-gray-600);
}

/* ── Inserimento rapido ─────────────────────────────────────── */

.today-quick-add {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-100);
}

.today-quick-fields {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-2);
  min-width: 0;
}

.today-quick-input {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-gray-900);
  background-color: var(--color-surface);
  border: var(--input-border);
  border-radius: var(--input-radius);
  appearance: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.today-quick-input::placeholder {
  color: var(--color-gray-600);
}

.today-quick-input:hover {
  border-color: var(--color-gray-300);
}

.today-quick-input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: var(--input-focus-ring);
}

.today-quick-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: #ffffff;
  /* Il 700 invece del 500 del resto dell'app: su testo di 14px il teal chiaro
     sta a 2.3:1 col bianco, sotto il minimo leggibile. */
  background-color: var(--color-primary-700);
  border: none;
  border-radius: var(--input-radius);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.today-quick-btn:hover {
  background-color: var(--color-primary-800);
  box-shadow: var(--shadow-primary);
}

.today-quick-btn:active {
  background-color: var(--color-primary-900);
}

.today-quick-btn:focus-visible {
  outline: 2px solid var(--color-primary-600);
  outline-offset: 2px;
}

/* Su telefono il bottone accanto a due campi lascerebbe caselle da un centinaio
   di pixel: va a capo a piena larghezza invece di comprimerle. La soglia sta
   sopra il telefono piu' largo, altrimenti due dispositivi vicini (375 e 414px)
   mostrerebbero due layout diversi. */
@media (max-width: 480px) {
  .today-quick-add {
    flex-wrap: wrap;
  }

  .today-quick-fields {
    flex: 1 1 100%;
  }

  .today-quick-btn {
    flex: 1 1 100%;
  }
}

/* ── Riepilogo settimanale ──────────────────────────────────── */

.insight-card.weekly-digest {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  min-height: 0;
  padding: var(--space-5);
}

.weekly-digest .insight-title {
  text-align: left;
}

.weekly-digest ul {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--color-gray-700);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.weekly-digest .today-quick-btn {
  align-self: flex-start;
  margin-top: var(--space-4);
  color: var(--color-gray-700);
  background-color: transparent;
  border: 2px solid var(--color-gray-200);
}

.weekly-digest .today-quick-btn:hover {
  color: var(--color-primary-700);
  background-color: transparent;
  border-color: var(--color-primary-500);
  box-shadow: none;
}