/* AGRISUD AgroAI - Stile professionale */
:root {
  --agrisud-green: #2d6a4f;
  --agrisud-dark: #1b4332;
  --agrisud-accent: #95d5b2;
  --agrisud-yellow: #f4a261;
  --agrisud-red: #e63946;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  margin: 0;
}

.brand-gradient {
  background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 50%, #40916c 100%);
}

.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.05);
  transition: transform 0.15s, box-shadow 0.15s;
}
.card:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }

.tab-btn {
  cursor: pointer;
  transition: all 0.2s;
}
.tab-btn.active {
  background: var(--agrisud-green);
  color: white;
  box-shadow: 0 4px 6px rgba(45,106,79,0.3);
}

.product-pill {
  background: linear-gradient(135deg, #d8f3dc, #b7e4c7);
  border: 1px solid #95d5b2;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 3px;
  font-weight: 500;
  color: #1b4332;
}
.product-pill .remove {
  cursor: pointer;
  color: #e63946;
  font-weight: bold;
}

.suggestion {
  cursor: pointer;
  padding: 10px 14px;
  border-bottom: 1px solid #e5e7eb;
  transition: background 0.15s;
}
.suggestion:hover { background: #f0fdf4; }
.suggestion:last-child { border-bottom: none; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge-bio { background: #fef3c7; color: #92400e; }
.badge-attivo { background: #d1fae5; color: #065f46; }
.badge-revocato { background: #fee2e2; color: #991b1b; }
.badge-emerg { background: #ddd6fe; color: #5b21b6; }
.badge-attenzione { background: #fef3c7; color: #92400e; }
.badge-incompatibile { background: #fee2e2; color: #991b1b; }
.badge-sconsigliato { background: #fed7aa; color: #9a3412; }
.badge-compatibile { background: #d1fae5; color: #065f46; }

.mix-result-incompatibile { border-left: 6px solid #dc2626; background: #fef2f2; }
.mix-result-sconsigliata { border-left: 6px solid #ea580c; background: #fff7ed; }
.mix-result-compatibile_con_attenzione { border-left: 6px solid #d97706; background: #fffbeb; }
.mix-result-compatibile { border-left: 6px solid #16a34a; background: #f0fdf4; }

.markdown-body h1 { font-size: 1.5rem; font-weight: 700; margin: 1rem 0 0.5rem; color: #1b4332; }
.markdown-body h2 { font-size: 1.25rem; font-weight: 700; margin: 1rem 0 0.5rem; color: #2d6a4f; border-bottom: 2px solid #d1fae5; padding-bottom: 4px; }
.markdown-body h3 { font-size: 1.05rem; font-weight: 600; margin: 0.75rem 0 0.4rem; color: #2d6a4f; }
.markdown-body p { margin: 0.5rem 0; line-height: 1.6; }
.markdown-body ul, .markdown-body ol { margin: 0.5rem 0; padding-left: 1.5rem; }
.markdown-body li { margin: 0.25rem 0; line-height: 1.55; }
.markdown-body strong { color: #1b4332; }
.markdown-body code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
.markdown-body blockquote { border-left: 4px solid #95d5b2; padding-left: 1rem; margin: 0.75rem 0; color: #4b5563; font-style: italic; }
.markdown-body table { border-collapse: collapse; width: 100%; margin: 0.75rem 0; }
.markdown-body th, .markdown-body td { border: 1px solid #e5e7eb; padding: 8px; text-align: left; }
.markdown-body th { background: #f0fdf4; font-weight: 600; }

.spinner {
  width: 38px; height: 38px;
  border: 4px solid rgba(45,106,79,0.15);
  border-top-color: var(--agrisud-green);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.fade-in { animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.pulse-dot {
  width: 8px; height: 8px;
  background: #16a34a;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@media (max-width: 768px) {
  .desktop-only { display: none; }
}