/* ==========================================================================
   Sunset Vista Spray Advisor -- design tokens
   Palette drawn from the vineyard itself: canopy green, ripening-fruit
   plum, trellis-wire gray, and the pale gold of morning fog over rows.
   ========================================================================== */

:root {
  --color-bg: #F5F2EA;
  --color-surface: #FFFFFF;
  --color-ink: #2A241C;
  --color-ink-muted: #6E6555;
  --color-border: #DFD8C6;

  --color-canopy: #3E5C3A;
  --color-canopy-dark: #2C4229;
  --color-plum: #5C2A3E;
  --color-plum-dark: #431F2D;
  --color-gold: #B98A3C;

  --color-status-overdue: #8C2F39;
  --color-status-due-soon: #B9762E;
  --color-status-ok: #3E5C3A;
  --color-status-wait: #5B6B78;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-data: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;

  --radius: 10px;
  --shadow-card: 0 1px 2px rgba(42, 36, 28, 0.06), 0 4px 16px rgba(42, 36, 28, 0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--color-canopy-dark); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-plum-dark);
  margin: 0 0 0.4em;
}

.app-header {
  background: var(--color-canopy);
  color: #F5F2EA;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.app-header .brand {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.app-header .tagline {
  font-size: 0.85rem;
  opacity: 0.85;
}

.app-header nav a {
  color: #F5F2EA;
  text-decoration: none;
  margin-left: 1rem;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(245,242,234,0.4);
}

main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.25rem;
}

.station-strip {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.9rem 1.25rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-data);
  font-size: 0.92rem;
}

.station-strip .stat-label {
  font-family: var(--font-body);
  color: var(--color-ink-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
}

.block-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.block-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.1rem 1.2rem;
}

.block-card h2 {
  font-size: 1.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-pill {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}

.status-overdue { background: var(--color-status-overdue); }
.status-due_soon { background: var(--color-status-due-soon); }
.status-on_schedule { background: var(--color-status-ok); }
.status-scheduled_but_no_clear_window_yet { background: var(--color-status-wait); }

.block-card .meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--color-ink-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 0.5rem;
  margin-top: 0.6rem;
}

.disease-chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

.chip {
  font-size: 0.74rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-ink-muted);
}

.chip.risk-low {
  background: #DCEEDA;
  border-color: #A9CBA4;
  color: #234B23;
}
.chip.risk-moderate {
  background: #FBE9AE;
  border-color: #E0BC66;
  color: #7A5A0B;
}
.chip.risk-high {
  background: #F6C9CE;
  border-color: #E0919C;
  color: #7A1F28;
}
.chip.risk-severe {
  background: #C4384A;
  border-color: #8C2F39;
  color: #FFFFFF;
  font-weight: 700;
}

.gdd-bar-track {
  background: #EFE9DA;
  border-radius: 999px;
  height: 8px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.gdd-bar-fill {
  background: var(--color-gold);
  height: 100%;
}

.warning-list {
  margin: 0.6rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  color: var(--color-status-due-soon);
}

.product-suggestion {
  margin-top: 0.7rem;
  padding: 0.6rem 0.75rem;
  background: #F5F2EA;
  border-radius: 6px;
  font-size: 0.87rem;
}

.product-suggestion strong { color: var(--color-plum-dark); }

.btn {
  display: inline-block;
  background: var(--color-canopy);
  color: #fff;
  border: none;
  padding: 0.55rem 1rem;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover { background: var(--color-canopy-dark); }
.btn.secondary { background: transparent; color: var(--color-canopy-dark); border: 1px solid var(--color-canopy); }

form.stacked label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  margin: 0.7rem 0 0.25rem;
}

form.stacked input, form.stacked select, form.stacked textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: #fff;
}

.login-wrap {
  max-width: 360px;
  margin: 4rem auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

table.data-table th, table.data-table td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
}

table.data-table th {
  color: var(--color-ink-muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.error-box {
  background: #FBE9E9;
  border: 1px solid #D69AA6;
  color: var(--color-status-overdue);
  padding: 0.7rem 0.9rem;
  border-radius: 6px;
  font-size: 0.88rem;
  margin-bottom: 1rem;
}

.notice-box {
  background: #EFF4EC;
  border: 1px solid #B7C9AE;
  color: var(--color-canopy-dark);
  padding: 0.7rem 0.9rem;
  border-radius: 6px;
  font-size: 0.88rem;
  margin-bottom: 1rem;
}

@media (max-width: 600px) {
  .app-header { flex-direction: column; align-items: flex-start; }
}