/* ═══════════════════════════════════════════════════════════════════════════
   dotTerra — Crop Clinic Stylesheet
   Mobile-first design. All measurements in rem. Brand palette:
   --green-dark:  #1A4731   (headers, navbar, dark backgrounds)
   --green-mid:   #2D6A4F   (buttons, accents)
   --green-light: #52B788   (bright accents, icons)
   --mint:        #D8F3DC   (light backgrounds, cards)
   --pale:        #F0F7F4   (page background)
   --gold:        #F59E0B   (highlights, warnings)
   ═══════════════════════════════════════════════════════════════════════════ */

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

:root {
  --green-dark:  #1A4731;
  --green-mid:   #2D6A4F;
  --green-light: #52B788;
  --mint:        #D8F3DC;
  --pale:        #F0F7F4;
  --gold:        #F59E0B;
  --red:         #DC2626;
  --gray:        #6B7280;
  --gray-light:  #F3F4F6;
  --text:        #111827;
  --radius:      12px;
  --radius-sm:   8px;
  --shadow:      0 2px 12px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.12);
  --max-w:       480px;
}

html { font-size: 16px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  background: var(--pale);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

/* ── NAVBAR ────────────────────────────────────────────────────────────────── */
.navbar {
  background: var(--green-dark);
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.nav-brand {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.5px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.nav-link {
  padding: .35rem .65rem;
  border-radius: 20px;
  font-size: .82rem;
  color: #95D5B2;
  transition: background .15s;
}

.nav-link:hover,
.nav-link.active {
  background: rgba(255,255,255,.12);
  color: #fff;
}

.nav-logout {
  color: #95D5B2;
  opacity: .7;
}

/* ── BRAND WORDMARK ─────────────────────────────────────────────────────────── */
.brand-dot   { color: #95D5B2; }
.brand-terra { color: #fff; }

/* ── MAIN CONTENT WRAPPER ──────────────────────────────────────────────────── */
.main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.25rem 1rem 5rem;
}

/* ── TYPOGRAPHY HELPERS ────────────────────────────────────────────────────── */
h1 { font-size: 1.6rem; font-weight: 800; color: var(--green-dark); line-height: 1.2; }
h2 { font-size: 1.2rem; font-weight: 700; color: var(--green-dark); }
h3 { font-size: 1rem;   font-weight: 700; color: var(--green-dark); }
.muted     { color: var(--gray); font-size: .9rem; }
.hint      { color: var(--gray); font-size: .8rem; margin-top: .3rem; display: block; }
.text-center { text-align: center; }
.optional  { font-weight: 400; color: var(--gray); font-size: .85rem; }

/* ── CARD ──────────────────────────────────────────────────────────────────── */
.card {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

/* ── BUTTONS ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.5rem;
  border-radius: 50px;
  font-size: .95rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  gap: .4rem;
  text-decoration: none;
}

.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary  { background: var(--green-dark); color: #fff; }
.btn-secondary { background: var(--mint); color: var(--green-dark); }
.btn-full     { width: 100%; margin-top: .75rem; }
.btn-lg       { padding: .9rem 1.5rem; font-size: 1.05rem; }
.btn-sm       { padding: .45rem 1rem; font-size: .82rem; }
.btn-loading  { opacity: .7; }

/* ── ALERTS ─────────────────────────────────────────────────────────────────── */
.alert {
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  margin-bottom: 1rem;
}
.alert-error {
  background: #FEE2E2;
  color: var(--red);
  border-left: 4px solid var(--red);
}

/* ─────────────────────────────────────────────────────────────────────────────
   LOGIN PAGE
───────────────────────────────────────────────────────────────────────────── */
.login-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 1.5rem;
}

.login-hero {
  text-align: center;
  padding: 1.5rem 0 .5rem;
}

.login-logo {
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: -1px;
  margin-bottom: .4rem;
}

.login-tagline {
  font-size: 1rem;
  color: var(--green-mid);
  font-weight: 600;
}

.login-sub {
  color: var(--gray);
  font-size: .85rem;
  margin-top: .25rem;
}

.login-card { }

.login-card h2 { margin-bottom: .3rem; }

.login-form { margin-top: 1.25rem; }

/* Form groups */
.form-group { margin-bottom: 1rem; }

.form-group label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: .35rem;
  color: var(--green-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: .75rem .9rem;
  border: 1.5px solid #D1D5DB;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  background: #fff;
  color: var(--text);
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--green-light);
  box-shadow: 0 0 0 3px rgba(82,183,136,.15);
}

.form-group textarea { resize: vertical; min-height: 100px; }

.phone-row {
  display: flex;
  align-items: center;
  border: 1.5px solid #D1D5DB;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
  transition: border-color .15s;
}

.phone-row:focus-within {
  border-color: var(--green-light);
  box-shadow: 0 0 0 3px rgba(82,183,136,.15);
}

.phone-flag  { padding: 0 .5rem 0 .75rem; font-size: 1.1rem; }
.phone-prefix {
  padding: .75rem 0 .75rem .25rem;
  font-size: .95rem;
  color: var(--gray);
  white-space: nowrap;
}

.phone-row input {
  border: none;
  box-shadow: none;
  flex: 1;
  padding: .75rem .75rem .75rem .4rem;
  font-size: 1rem;
}

.phone-row input:focus { box-shadow: none; }

.login-features {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: .5rem 0 1rem;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  color: var(--gray);
}

.feature-icon { font-size: 1.5rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   DASHBOARD
───────────────────────────────────────────────────────────────────────────── */
.dashboard-page { display: flex; flex-direction: column; gap: 1.25rem; }

.greeting h1 { margin-bottom: .2rem; }

/* Main CTA card */
.cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--green-dark);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1.25rem 1rem;
  box-shadow: var(--shadow-md);
  transition: opacity .15s;
}

.cta-card:active { opacity: .9; }

.cta-left { display: flex; align-items: center; gap: .9rem; }
.cta-icon { font-size: 2rem; }

.cta-text { display: flex; flex-direction: column; }
.cta-text strong { color: #fff; font-size: 1.05rem; }
.cta-text span   { color: #95D5B2; font-size: .83rem; margin-top: .1rem; }

.cta-arrow { color: var(--gold); font-size: 1.5rem; font-weight: 700; }

/* Recent recommendations section */
.section { display: flex; flex-direction: column; gap: .75rem; }
.section-title { margin-bottom: .2rem; }

.rec-card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: var(--radius);
  padding: .9rem 1rem;
  box-shadow: var(--shadow);
  gap: .85rem;
  transition: box-shadow .15s;
}

.rec-card:active { box-shadow: var(--shadow-md); }

.rec-emoji { font-size: 1.6rem; width: 2rem; text-align: center; }

.rec-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.rec-info strong { font-size: .95rem; color: var(--green-dark); }
.rec-info .muted { font-size: .8rem; margin-top: .1rem; }

.rec-arrow { color: var(--green-light); font-size: 1.2rem; }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.empty-icon { font-size: 3rem; margin-bottom: .75rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   CLINIC PAGE (FORM)
───────────────────────────────────────────────────────────────────────────── */
.clinic-page { display: flex; flex-direction: column; gap: 1rem; }

.page-header h1 { margin-bottom: .25rem; }

.form-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem 1.25rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.form-card-header {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .2rem;
}

.step-num {
  width: 1.75rem;
  height: 1.75rem;
  background: var(--green-dark);
  color: #fff;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* GPS status indicator */
.gps-status {
  font-size: .85rem;
  padding: .5rem .75rem;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  width: fit-content;
}

.gps-idle    { background: var(--gray-light); color: var(--gray); }
.gps-loading { background: #FEF3C7; color: #92400E; }
.gps-success { background: #D1FAE5; color: var(--green-dark); }
.gps-error   { background: #FEE2E2; color: var(--red); }

/* ─────────────────────────────────────────────────────────────────────────────
   RESULT PAGE
───────────────────────────────────────────────────────────────────────────── */
.result-page { display: flex; flex-direction: column; gap: 1rem; }

.result-header {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .75rem 0 .25rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--green-mid);
}

.back-link:hover { color: var(--green-dark); }

.result-crop {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.result-emoji { font-size: 2.8rem; }

.result-title h1 { font-size: 1.4rem; margin-bottom: .1rem; }

/* Data strip */
.data-strip {
  display: flex;
  background: var(--green-dark);
  border-radius: var(--radius);
  overflow: hidden;
}

.data-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .85rem .5rem;
  gap: .2rem;
}

.data-sep {
  width: 1px;
  background: rgba(255,255,255,.15);
  margin: .75rem 0;
}

.data-label { color: #95D5B2; font-size: .72rem; text-align: center; }
.data-value { color: #fff;    font-size: 1.15rem; font-weight: 700; }

/* The recommendation card */
.recommendation-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.recommendation-body {
  padding: 1.25rem;
  line-height: 1.7;
  font-size: .95rem;
}

/* Style the AI output's HTML */
.recommendation-body p    { margin-bottom: .75rem; }
.recommendation-body strong { color: var(--green-dark); }
.recommendation-body ul   { margin: .5rem 0 .75rem 0; padding-left: 0; list-style: none; }

.recommendation-body li {
  padding: .35rem 0 .35rem 1.5rem;
  position: relative;
  border-bottom: 1px solid var(--pale);
}

.recommendation-body li:last-child { border-bottom: none; }

.recommendation-body li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green-light);
  font-weight: 700;
}

/* Details / expand sections — .detail-block is used in templates */
.detail-block {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.detail-block summary {
  padding: .9rem 1.1rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--green-dark);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detail-block summary::after { content: "▼"; font-size: .7rem; color: var(--gray); }
.detail-block[open] summary::after { content: "▲"; }

.detail-body {
  padding: 0 1.1rem 1rem;
  border-top: 1px solid var(--pale);
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: .6rem 0;
  border-bottom: 1px solid var(--gray-light);
  font-size: .9rem;
}

.detail-row:last-child { border-bottom: none; }
.detail-row span  { color: var(--gray); }
.detail-row strong { color: var(--green-dark); }

/* Weather forecast — class names match result.html */
.weather-forecast {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .35rem;
  margin-top: .5rem;
}

.forecast-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--pale);
  border-radius: var(--radius-sm);
  padding: .4rem .2rem;
  gap: .15rem;
}

.forecast-label { font-size: .65rem; color: var(--gray); }
.forecast-temp  { font-size: .78rem; font-weight: 700; color: var(--green-dark); }
.forecast-rain  { font-size: .68rem; color: var(--gray); }

/* Result actions */
.result-actions {
  display: flex;
  gap: .75rem;
  padding: .5rem 0 1rem;
}

.result-actions .btn { flex: 1; }

/* ── LEAFLET MAP ──────────────────────────────────────────────────────────── */
#farmMap {
  height: 300px;
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1.5px solid #D1D5DB;
  position: relative;  /* Required: gives Leaflet a proper stacking context */
  z-index: 0;
}

/*
 * DO NOT override .leaflet-pane z-indexes here.
 * style.css loads BEFORE leaflet.css (see base.html).
 * Leaflet needs its own z-index hierarchy (200/400/500/600/700)
 * to stack tile layers, markers, and popups correctly.
 * Any !important override here defeats that system entirely.
 */

/* ── LANGUAGE TOGGLE (nav + login) ───────────────────────────────────────── */
.lang-toggle {
  display: flex; align-items: center; gap: .2rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  padding: .2rem .3rem;
  margin: 0 .25rem;
}
.lang-btn {
  font-family: monospace; font-size: .72rem; font-weight: 600;
  letter-spacing: .05em; text-decoration: none;
  color: rgba(255,255,255,.45);
  padding: .2rem .45rem; border-radius: 12px;
  transition: color .2s, background .2s;
}
.lang-btn.active {
  background: #52B788; color: #1A4731; pointer-events: none;
}
.lang-btn:not(.active):hover { color: #fff; }
.lang-sep { color: rgba(255,255,255,.2); font-size: .75rem; }

/* Language toggle on login page (outside nav) */
.login-lang {
  display: flex; align-items: center; justify-content: center;
  gap: .3rem; margin: 1rem 0;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px; padding: .3rem .5rem;
  align-self: center; width: fit-content; margin: .75rem auto;
}