# Inputs Dashboard — Page Overrides

> **PROJECT:** AGNET Dashboard  
> **Page:** `/farmers/dashboard/inputs`  
> **Reference:** `public/agnet-assets/agnet-inputs-dashboard.png`

> Rules here **override** `design-system/agnet-dashboard/MASTER.md` where noted.

---

## Layout Overrides

| Zone | Grid | Notes |
|------|------|-------|
| KPI row | 5 equal columns | Seed, Fertiliser, Equipment, Voucher, Delivery |
| Middle row | 3 columns | Top Suppliers, Featured Catalog (tabs), Input Voucher |
| Bottom | Full width | Delivery Tracking stepper + map |

### Spacing

- KPI row gap: `16px`
- Middle row gap: `24px`
- Voucher card: dark variant (`--sidebar-bg-deep` background)

---

## Component Overrides

| Component | Override |
|-----------|----------|
| `KpiCard` | 5-card row; Equipment KPI uses `--warning-amber` accent |
| `Tabs` | Featured Catalog — Seed / Fertiliser / Equipment |
| `Card` | Voucher card: dark surface, white text, payment route embedded |
| `Stepper` | Delivery Tracking — horizontal with map thumbnail |
| `Badge` | Supplier ratings — "Best Match", star ratings |

---

## Color Notes

- Voucher card background: `--sidebar-bg-deep` (#003328)
- Equipment KPI icon: `--warning-amber`
- Catalog active tab: `--brand-green` underline

---

## Responsive

| Breakpoint | Behavior |
|------------|----------|
| ≥1280px | 5-col KPI + 3-col middle |
| 768–1279px | 3-col KPI wrap; 2-col middle |
| <768px | Single column; KPI horizontal scroll |