/* AgriWorld custom styles */
:root { --brand: #16a34a; --brand-dark: #15803d; }
* { -webkit-tap-highlight-color: transparent; }
html, body { overscroll-behavior-y: none; }
body { padding-bottom: env(safe-area-inset-bottom); }

#app { max-width: 480px; margin: 0 auto; min-height: 100vh; padding-bottom: 80px; background: #f9fafb; }
.has-bottom-nav #app { padding-bottom: 80px; }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* Cards */
.card { @apply bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden; }
.card-hover { transition: transform .15s, box-shadow .15s; }
.card-hover:active { transform: scale(0.97); }

/* Buttons */
.btn { @apply inline-flex items-center justify-center font-semibold rounded-xl transition-all px-5 py-3 text-sm; }
.btn-primary { @apply btn bg-brand-600 text-white shadow-sm; }
.btn-primary:active { @apply bg-brand-700; }
.btn-outline { @apply btn border-2 border-brand-600 text-brand-600 bg-white; }
.btn-ghost { @apply btn text-gray-600 bg-gray-100; }

/* Inputs */
.input { @apply w-full px-4 py-3 rounded-xl border border-gray-200 bg-white focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition text-base; }
.label { @apply block text-sm font-medium text-gray-700 mb-1.5; }

/* Crop Grid Item */
.crop-item { @apply flex flex-col items-center p-2 cursor-pointer rounded-xl transition; }
.crop-item:active { background: #ecfdf5; transform: scale(0.95); }
.crop-icon-wrap { @apply w-16 h-16 rounded-full bg-gradient-to-br from-brand-50 to-brand-100 flex items-center justify-center shadow-sm border border-brand-200; }
.crop-icon-wrap svg { width: 38px; height: 38px; }

/* Header */
.page-header { @apply sticky top-0 bg-white border-b border-gray-100 px-4 py-3 flex items-center justify-between z-30; }

/* Quick action grid */
.qa-tile { @apply flex flex-col items-center justify-center gap-2 p-4 bg-white rounded-2xl border border-gray-100 shadow-sm; }
.qa-tile:active { transform: scale(0.96); }
.qa-icon { @apply w-12 h-12 rounded-xl flex items-center justify-center; }

/* Chips */
.chip { @apply inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-medium border; }
.chip-green { @apply chip bg-brand-50 border-brand-200 text-brand-700; }
.chip-amber { @apply chip bg-amber-50 border-amber-200 text-amber-700; }
.chip-blue  { @apply chip bg-blue-50 border-blue-200 text-blue-700; }

/* Toast */
.toast { @apply px-4 py-3 rounded-xl shadow-lg text-sm font-medium text-white animate-slide-down; min-width: 240px; }
.toast-ok { background: #16a34a; }
.toast-err { background: #dc2626; }
.toast-info { background: #2563eb; }

@keyframes slide-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.animate-slide-down { animation: slide-down .25s ease-out; }

/* Skeleton */
.skeleton { background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Bottom Nav */
.nav-btn.active { color: var(--brand); }
.nav-btn.active svg { transform: scale(1.1); }

/* Weather */
.weather-hero { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); }
.weather-hero.warm { background: linear-gradient(135deg, #f59e0b 0%, #dc2626 100%); }
.weather-hero.cool { background: linear-gradient(135deg, #06b6d4 0%, #1e40af 100%); }

/* Disease Card */
.disease-card { @apply card p-3 flex gap-3 items-center; }
.disease-thumb { @apply w-16 h-16 rounded-lg bg-gray-100 flex-shrink-0 overflow-hidden; }
.disease-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Timeline */
.timeline-item { @apply relative pl-8 pb-5 border-l-2 border-brand-200; }
.timeline-item::before { content:''; @apply absolute -left-2 top-0 w-4 h-4 rounded-full bg-brand-500 border-2 border-white; }
.timeline-item.done::before { background: #16a34a; }
.timeline-item.future::before { background: #9ca3af; }

/* Post card */
.post-card { @apply card p-4 mb-3; }
.post-author { @apply w-10 h-10 rounded-full bg-brand-100 flex items-center justify-center text-brand-700 font-bold; }

@media (min-width: 480px) {
  #app { box-shadow: 0 0 30px rgba(0,0,0,0.05); }
}