/* =========================================================
   Viridis Care — Analisi Fitoiatrica UI
   Base CSS — Prototipo isolato (passport/ui/)
   Token allineati al sito viridis.care (Astro)
   Mobile-first, touch-friendly, identità brand Viridis
   NESSUN BOOTSTRAP, NESSUN FONTAWESOME
   ========================================================= */

/* --- Google Fonts — Inter Tight (allineato al sito) --- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500&family=Inter+Tight:wght@300;400;500;600&display=swap&subset=latin,latin-ext');

/* --- Reset & box-sizing --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- Root token — allineati a viridis-care-site/src/styles/global.css --- */
:root {
  /* === PALETTE BRAND (da global.css del sito) === */
  --ink:          #1a2419;   /* testo principale — sito: --ink */
  --forest:       #2d4a34;   /* primario — sito: --forest */
  --forest-deep:  #1e3524;   /* primario hover — sito: --forest-deep */
  --linen:        #f4f0e8;   /* sfondo body — sito: --linen */
  --linen-deep:   #ebe5d7;   /* sfondo input/zone — sito: --linen-deep */
  --brass:        #a8843f;   /* accent/focus/chip — sito: --brass */
  --brass-soft:   #c9a664;   /* accent soft — sito: --brass-soft */
  --moss:         #5a6b4a;   /* testo secondario — sito: --moss */

  /* === ALIAS per retrocompatibilità HTML esistente === */
  --v-dark:       var(--forest);       /* era #1B4332 → ora #2d4a34 */
  --v-mid:        var(--moss);         /* era #4A6B5E → ora #5a6b4a */
  --v-light:      var(--brass-soft);   /* era #A8C5B5 → ora #c9a664 */
  --v-pale:       var(--linen-deep);   /* era #E8F0EC → ora #ebe5d7 */

  /* === SUPERFICIE / STRUTTURA === */
  --ios-bg:       var(--linen);        /* sfondo pagina → linen del sito */
  --ios-surface:  #FFFFFF;             /* card / input surface */
  --ios-label:    var(--ink);          /* testo principale → ink del sito */
  --ios-secondary:var(--moss);         /* testo secondario → moss del sito */
  --ios-tertiary: #8E8E93;             /* metadati neutri — nessun equivalente nel sito */
  --ios-sep:      #e8e4dc;             /* separatori — derivato da linen-deep */

  /* === SEGNALI CLINICI (stato salute pianta — armonizzati alla palette forest/brass del sito) === */
  /* Non sono brand: sono semafori clinici. Tonalità spostate verso la palette calda del sito. */
  --ios-blue:     #007AFF;          /* check prossimo — mantenuto (nessun equiv. sito) */
  --ios-green:    #2e7d32;          /* salute buona — verde bosco (era #34C759 pop iOS) */
  --ios-yellow:   #a8843f;          /* attenzione — brass del sito (era #FF9500 arancio iOS) */
  --ios-red:      #8b2e2e;          /* criticità — rosso caldo botanico (era #FF3B30 iOS red) */

  /* === TIPOGRAFIA (allineata al sito) === */
  --font-display: 'Fraunces', Georgia, serif;           /* sito: --font-display */
  --font-ui:      'Inter Tight', system-ui, sans-serif; /* sito: --font-sans */

  /* === SPAZIATURE === */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;

  /* === RAGGI — allineati al sito (angoli vivi: border-radius: 0 come da direttiva Ro) === */
  --r-sm:   0;      /* input — allineato al sito */
  --r-md:   0;      /* card, bottoni — allineato al sito */
  --r-lg:   0;      /* card large — allineato al sito */
  --r-xl:   0;      /* hero, modal — allineato al sito */
  --r-full: 9999px; /* badge circolari, health-dot — invariato (forma funzionale) */
}

/* --- Global --- */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-ui);
  background-color: var(--linen);    /* linen del sito — non grigio iOS */
  color: var(--ink);                 /* ink del sito — non nero puro */
  min-height: 100vh;
  line-height: 1.6;                  /* 1.6 allineato al sito */
  -webkit-font-smoothing: antialiased;
}

/* --- Navbar (allineata al sito: linen bg, ink text, forest accent) --- */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 240, 232, 0.92);  /* linen/92 — allineato a bg-linen/95 del sito */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--linen-deep); /* separatore caldo, non grigio iOS */
  padding: 12px var(--sp-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
}

/* Brand nel nav — da Nav.astro del sito: Copperplate, #1B4332 hardcoded nel sito */
.nav-bar__brand {
  font-family: 'Copperplate', 'Copperplate Gothic Light', serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #1B4332;   /* valore hardcoded del sito — Nav.astro riga 42 */
  text-decoration: none;
  text-transform: uppercase;
}

.nav-bar__title {
  font-size: 17px;
  font-weight: 500;                   /* 500 allineato al sito (non 600 iOS) */
  letter-spacing: -0.02em;            /* -0.02em del sito (non -0.03em) */
  color: var(--ink);                  /* ink del sito */
  font-family: var(--font-ui);
}

.nav-bar__back {
  font-size: 15px;
  color: var(--forest);               /* forest del sito (non v-dark #1B4332) */
  font-weight: 500;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  min-height: 44px;
  min-width: 44px;
}

.nav-bar__action {
  font-size: 15px;
  color: var(--forest);               /* forest del sito */
  font-weight: 500;                   /* 500 come nav sito */
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0;
  min-height: 44px;
  min-width: 44px;
  text-align: right;
}

/* --- Page container --- */
.page {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--sp-md);
  padding-bottom: 48px;
}

/* --- Section label (allineata a form-label sito: moss, uppercase, 0.08em) --- */
.section-label {
  font-size: 12px;
  font-weight: 500;                   /* sito usa 500 non 600 */
  letter-spacing: 0.08em;             /* allineato al sito */
  text-transform: uppercase;
  color: var(--moss);                 /* moss del sito — non grigio iOS */
  margin-bottom: var(--sp-sm);
  margin-top: var(--sp-lg);
  padding-left: var(--sp-sm);
}

/* --- Card (separatori → linen-deep caldo; allineata al sito; no box-shadow: il sito non la usa) --- */
.card {
  background: var(--ios-surface);
  border-radius: var(--r-lg);  /* 0 — angoli vivi allineati al sito */
  overflow: hidden;
  margin-bottom: var(--sp-md);
}

.card--flush { margin-bottom: 0; }

.card__row {
  display: flex;
  align-items: center;
  padding: 14px var(--sp-md);
  border-bottom: 1px solid var(--linen-deep);  /* separatore caldo linen del sito */
  gap: var(--sp-md);
}

.card__row:last-child { border-bottom: none; }

.card__label {
  font-size: 15px;
  color: var(--moss);                /* moss del sito */
  flex: 0 0 auto;
  min-width: 100px;
}

.card__value {
  font-size: 15px;
  color: var(--ink);                 /* ink del sito */
  font-weight: 500;
  flex: 1;
}

.card__value--secondary {
  color: var(--moss);                /* moss del sito */
  font-weight: 400;
}

/* --- Form elements (allineati al sito: linen-deep bg, moss label, forest focus) --- */
.form-group {
  margin-bottom: var(--sp-md);
}

.form-label {
  display: block;
  font-size: 12px;                    /* sito: 0.75rem = 12px */
  font-weight: 500;                   /* sito: 500 */
  letter-spacing: 0.08em;            /* sito: 0.08em */
  text-transform: uppercase;          /* sito: uppercase */
  color: var(--moss);                 /* sito: --moss */
  margin-bottom: 6px;
  padding-left: 4px;
}

.form-input,
.form-select {
  width: 100%;
  padding: 0.75rem var(--sp-md);     /* sito: 0.75rem 1rem */
  font-family: var(--font-ui);
  font-size: 16px;                    /* mantenuto 16px per evitare zoom iOS */
  color: var(--ink);                  /* ink del sito */
  background: var(--linen-deep);      /* sito: --linen-deep */
  border: 1px solid transparent;      /* sito: 1px solid transparent */
  border-radius: var(--r-sm);         /* var(--r-sm) = 0 — angoli vivi allineati al sito */
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease; /* sito: 0.2s ease */
}

.form-input:focus,
.form-select:focus {
  border-color: var(--forest);        /* sito: --forest */
  outline: none;
}

.form-input::placeholder {
  color: var(--moss);
  opacity: 0.6;                       /* sito: opacity 0.6 */
}

/* Focus accessibilità (allineato a :focus-visible del sito) */
.form-input:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--brass);    /* sito: outline 2px solid --brass */
  outline-offset: 2px;
}

.form-select-wrap {
  position: relative;
}

.form-select-wrap::after {
  content: '›';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  color: var(--ios-tertiary);
  font-size: 18px;
  pointer-events: none;
}

/* --- Photo upload zone (allineata: brass dashed border, linen-deep bg) --- */
.photo-zone {
  background: var(--ios-surface);
  border-radius: var(--r-lg);
  border: 2px dashed var(--brass-soft);  /* brass-soft del sito — warm, non verde neutro */
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  margin-bottom: var(--sp-md);
  position: relative;
  overflow: hidden;
}

.photo-zone:hover,
.photo-zone:focus {
  border-color: var(--forest);           /* forest del sito */
  background: var(--linen-deep);         /* linen-deep del sito */
}

.photo-zone__icon {
  width: 56px;
  height: 56px;
  color: var(--moss);                    /* moss del sito */
}

.photo-zone__text {
  font-size: 15px;
  color: var(--moss);                    /* moss del sito */
  font-weight: 500;
}

.photo-zone__sub {
  font-size: 13px;
  color: var(--ios-tertiary);
}

.photo-zone__preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
}

/* --- Buttons (allineati al sito: forest bg, linen text, uppercase, 0.05em tracking) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.875rem 1.75rem;          /* sito: 0.875rem 2rem — leggermente ridotto per mobile */
  border-radius: var(--r-md);         /* var(--r-md) = 0 — angoli vivi allineati al sito */
  font-family: var(--font-ui);
  font-size: 0.875rem;                /* sito: 0.875rem */
  font-weight: 500;                   /* sito: 500 */
  letter-spacing: 0.05em;            /* sito: 0.05em */
  text-transform: uppercase;          /* sito: uppercase */
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  min-height: 50px;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.15s, transform 0.1s;
  width: 100%;
}

.btn:active { transform: scale(0.98); opacity: 0.85; }

/* .btn-primary del sito — forest bg, linen text */
.btn--primary {
  background: var(--forest);          /* sito: --forest */
  color: var(--linen);                /* sito: --linen */
  border-color: var(--forest);
}

.btn--primary:hover {
  background: var(--forest-deep);     /* sito: --forest-deep */
  border-color: var(--forest-deep);
}

/* Secondario — linen-deep bg, forest text (da schema sito) */
.btn--secondary {
  background: var(--linen-deep);      /* sito: linen-deep */
  color: var(--forest);
  border-color: var(--linen-deep);
}

.btn--secondary:hover {
  background: var(--forest);
  color: var(--linen);
  border-color: var(--forest);
}

/* Segnali clinici — mantenuti (non brand, sono dati di salute) */
.btn--approve {
  background: var(--ios-green);
  color: #fff;
  border-color: var(--ios-green);
}

.btn--reject {
  background: var(--ios-red);
  color: #fff;
  border-color: var(--ios-red);
}

.btn--sm {
  padding: 10px 18px;
  font-size: 0.8125rem;               /* 13px */
  min-height: 44px;
  width: auto;
  border-radius: 0;                  /* angoli vivi — allineato al sito */
}

/* Ghost / outline — da .btn-outline del sito */
.btn--ghost {
  background: transparent;
  color: var(--forest);               /* sito: --forest */
  border: 1px solid var(--forest);    /* sito: 1px solid --forest */
}

.btn--ghost:hover {
  background: var(--forest);
  color: var(--linen);
}

/* --- Health dot --- */
.health-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}

.health-dot--green  { background: var(--ios-green); }
.health-dot--yellow { background: var(--ios-yellow); }
.health-dot--red    { background: var(--ios-red); }

/* Larger variant for esito page */
.health-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 600;
}

/* Segnali clinici — tonalità armonizzate alla palette forest/brass del sito */
.health-badge--green  { background: rgba(46,125,50,0.10);   color: #1e5c21; }  /* verde bosco */
.health-badge--yellow { background: rgba(168,132,63,0.12);  color: #7a5e1f; }  /* brass del sito */
.health-badge--red    { background: rgba(139,46,46,0.12);   color: #6b1f1f; }  /* rosso caldo botanico */

/* --- Gate banner (gate sempre visibile — angoli vivi allineati al sito) --- */
.gate-banner {
  background: rgba(168,132,63,0.07);   /* tono brass del sito */
  border: 1.5px solid rgba(168,132,63,0.30); /* brass del sito */
  border-radius: 0;                    /* angoli vivi — allineato al sito */
  padding: 14px var(--sp-md);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}

.gate-banner__icon {
  color: var(--brass);                 /* brass del sito — warm, coerente con brand */
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.gate-banner__text {
  font-size: 13px;
  color: var(--moss);                  /* moss del sito */
  line-height: 1.6;                   /* 1.6 allineato al sito */
}

.gate-banner__label {
  font-weight: 600;                    /* 600 invece di 700 — sito max 600 */
  color: var(--forest);               /* forest del sito */
}

/* --- Timeline (linea → linen-deep tono caldo del sito) --- */
.timeline {
  position: relative;
  padding-left: 28px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--linen-deep);     /* linen-deep caldo invece di grigio iOS */
}

.timeline-item {
  position: relative;
  margin-bottom: 20px;
}

.timeline-item:last-child { margin-bottom: 0; }

.timeline-item__dot {
  position: absolute;
  left: -24px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: var(--r-full);
  background: var(--ios-surface);
  border: 2px solid var(--linen-deep);  /* linen-deep caldo */
}

.timeline-item__dot--active {
  background: var(--forest);            /* forest del sito */
  border-color: var(--forest);
}

.timeline-item__dot--green {
  background: var(--ios-green);
  border-color: var(--ios-green);
}

.timeline-item__dot--yellow {
  background: var(--ios-yellow);
  border-color: var(--ios-yellow);
}

.timeline-item__dot--red {
  background: var(--ios-red);
  border-color: var(--ios-red);
}

.timeline-item__date {
  font-size: 12px;
  color: var(--ios-tertiary);
  margin-bottom: 2px;
  font-weight: 500;
}

.timeline-item__title {
  font-size: 15px;
  font-weight: 500;                    /* sito: 500 */
  color: var(--ink);                   /* ink del sito */
  letter-spacing: -0.02em;            /* sito: -0.02em */
}

.timeline-item__body {
  font-size: 13px;
  color: var(--moss);                  /* moss del sito */
  margin-top: 4px;
  line-height: 1.6;
}

.timeline-item__chip {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 500;                    /* sito: 500 */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--linen-deep);       /* linen-deep del sito */
  color: var(--forest);               /* forest del sito */
}

/* --- Evolution arrow --- */
.evolution-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}

.evolution-arrow {
  font-size: 18px;
  font-weight: 700;
}

.evolution-arrow--up    { color: var(--ios-green); }
.evolution-arrow--flat  { color: var(--ios-yellow); }
.evolution-arrow--down  { color: var(--ios-red); }

/* --- Approval card (allineata: ink/moss testo, linen-deep bg body, brass accent; no ombra) --- */
.approval-card {
  background: var(--ios-surface);
  border-radius: var(--r-lg);  /* 0 — angoli vivi allineati al sito */
  padding: var(--sp-md);
  margin-bottom: var(--sp-md);
}

.approval-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-sm);
}

.approval-card__title {
  font-size: 15px;
  font-weight: 500;                    /* sito: 500 */
  letter-spacing: -0.02em;            /* sito: -0.02em */
  color: var(--ink);
}

.approval-card__meta {
  font-size: 12px;
  color: var(--ios-tertiary);
  margin-bottom: var(--sp-sm);
}

.approval-card__body {
  font-size: 14px;
  color: var(--moss);                  /* moss del sito */
  line-height: 1.6;                   /* 1.6 del sito */
  margin-bottom: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--linen-deep);       /* linen-deep del sito */
  border-radius: var(--r-sm);
  border-left: 3px solid var(--brass); /* brass del sito — warm accent */
}

.approval-card__actions {
  display: flex;
  gap: var(--sp-sm);
}

/* --- Info chip row (allineata: linen-deep bg, forest text, brass accent) --- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.chip {
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 500;                    /* sito: 500 */
  letter-spacing: 0.04em;
  background: var(--linen-deep);       /* linen-deep del sito */
  color: var(--forest);               /* forest del sito */
}

/* Linea decorativa brass (da .rule-brass del sito) */
.rule-brass {
  display: block;
  width: 2.5rem;
  height: 1px;
  background-color: var(--brass);
  margin-bottom: 1.5rem;
}

/* --- Separator (linen-deep caldo del sito) --- */
.sep {
  height: 1px;
  background: var(--linen-deep);      /* linen-deep del sito */
  margin: var(--sp-md) 0;
}

/* --- Loading spinner (allineato: linen-deep + forest) --- */
.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--linen-deep); /* linen-deep del sito */
  border-top-color: var(--forest);     /* forest del sito */
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --- Responsive (tablet / desktop) --- */
@media (min-width: 600px) {
  .page { padding: var(--sp-xl) var(--sp-xl); }
  .card__row { padding: 16px var(--sp-lg); }
  .nav-bar { padding: 14px var(--sp-xl); }
  .btn { width: auto; }
  .btn--full { width: 100%; }
  .approval-card__actions { justify-content: flex-end; }
}

@media (min-width: 960px) {
  body { background: var(--linen-deep); }  /* linen-deep del sito — non grigio iOS */
  .page { max-width: 680px; background: transparent; }
}