/* Final visual polish: updated to an earthy forest / terracotta palette. */
:root {
  --background: 42 36% 95%;
  --foreground: 145 34% 13%;
  --primary: 151 58% 28%;
  --primary-foreground: 0 0% 100%;
  --secondary: 18 78% 56%;
  --secondary-foreground: 32 42% 12%;
  --muted: 40 27% 89%;
  --muted-foreground: 145 12% 39%;
  --border: 42 22% 78%;
  --card: 42 45% 99%;
  --shadow-sm: 0 10px 26px hsl(145 34% 13% / 0.08);
  --shadow-md: 0 18px 48px hsl(145 34% 13% / 0.13);
  --shadow-lg: 0 26px 76px hsl(145 34% 13% / 0.18);
}

body {
  background:
    radial-gradient(circle at 8% 0%, hsl(var(--secondary) / 0.18), transparent 30rem),
    radial-gradient(circle at 92% 10%, hsl(var(--primary) / 0.18), transparent 28rem),
    linear-gradient(135deg, hsl(var(--background)), hsl(46 30% 90%));
}

.title-bar,
.metric-card,
section.rounded-\[var\(--radius-lg\)\] {
  backdrop-filter: blur(10px);
}

.metric-card,
.group.rounded-\[var\(--radius-md\)\],
section.rounded-\[var\(--radius-lg\)\],
div.rounded-\[var\(--radius-md\)\] {
  border-color: hsl(var(--border) / 0.88) !important;
}

/* Re-map existing utility colors into the new forest / clay scheme without changing components. */
.border-emerald-200 { border-color: hsl(151 34% 70%) !important; }
.bg-emerald-50 { background-color: hsl(148 42% 93%) !important; }
.bg-emerald-200 { background-color: hsl(150 38% 80%) !important; }
.bg-emerald-700 { background-color: hsl(var(--primary)) !important; }
.hover\:bg-emerald-800:hover { background-color: hsl(151 62% 22%) !important; }
.text-emerald-800, .text-emerald-900, .text-emerald-950 { color: hsl(151 60% 21%) !important; }
.focus\:border-emerald-500:focus { border-color: hsl(var(--primary)) !important; }
.focus\:ring-emerald-200:focus { --tw-ring-color: hsl(150 38% 80%) !important; }

.border-sky-200 { border-color: hsl(188 42% 73%) !important; }
.bg-sky-50 { background-color: hsl(188 48% 94%) !important; }
.bg-sky-200 { background-color: hsl(188 50% 84%) !important; }
.bg-sky-700 { background-color: hsl(188 55% 34%) !important; }
.hover\:bg-sky-800:hover { background-color: hsl(188 60% 27%) !important; }
.text-sky-800, .text-sky-950 { color: hsl(188 58% 22%) !important; }

.border-violet-200 { border-color: hsl(287 30% 76%) !important; }
.bg-violet-50 { background-color: hsl(287 36% 95%) !important; }
.bg-violet-200 { background-color: hsl(287 34% 86%) !important; }
.bg-violet-700 { background-color: hsl(287 38% 43%) !important; }
.hover\:bg-violet-800:hover { background-color: hsl(287 42% 34%) !important; }
.text-violet-800, .text-violet-950 { color: hsl(287 40% 25%) !important; }

.border-orange-200, .border-amber-200 { border-color: hsl(18 62% 73%) !important; }
.bg-orange-50, .bg-amber-50 { background-color: hsl(28 72% 94%) !important; }
.bg-orange-200, .bg-amber-200 { background-color: hsl(24 72% 83%) !important; }
.bg-orange-600, .bg-amber-600 { background-color: hsl(var(--secondary)) !important; }
.hover\:bg-orange-700:hover, .hover\:bg-amber-700:hover { background-color: hsl(18 78% 45%) !important; }
.text-orange-800, .text-orange-900, .text-orange-950, .text-amber-800, .text-amber-900, .text-amber-950 { color: hsl(18 70% 27%) !important; }

/* Dashboard cards: less boxy, more polished. */
.metric-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, hsl(var(--secondary) / 0.13), transparent 7rem),
    linear-gradient(145deg, hsl(var(--card)), hsl(44 42% 96%)) !important;
}
.metric-card::after {
  content: "";
  position: absolute;
  inset: auto 1rem 1rem auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.09);
}

/* Module 1 Banda Records: make the dynamic chicken Age column easy to see. */
section table th:nth-child(5),
section table td:nth-child(5) {
  white-space: nowrap;
}
section table th:nth-child(5) {
  color: hsl(var(--primary)) !important;
}
section table td:nth-child(5) span {
  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.18);
}

/* Module 5 polish: stock-and-sales workspace in the updated palette. */
section.space-y-4 h2:has(+ div.space-y-6),
section.space-y-4 div:has(> h2 + div.space-y-6) > h2 {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem !important;
  border-radius: 999px;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(126 36% 35%));
  padding: 0.85rem 1.2rem;
  color: white;
  box-shadow: var(--shadow-sm);
}
section.space-y-4 div:has(> h2 + div.space-y-6) > h2::before { content: "🛒"; }

section.space-y-4 div.space-y-6 > section:first-child {
  position: relative;
  overflow: hidden;
  border: 1px solid hsl(var(--primary) / 0.20) !important;
  background:
    radial-gradient(circle at 100% 0%, hsl(var(--secondary) / 0.18), transparent 14rem),
    linear-gradient(145deg, hsl(148 42% 94%), white) !important;
}
section.space-y-4 div.space-y-6 > section:first-child h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
section.space-y-4 div.space-y-6 > section:first-child h3::before { content: "📦"; }
section.space-y-4 div.space-y-6 > section:first-child .grid > div {
  border: 1px solid hsl(var(--border) / 0.82);
  background:
    linear-gradient(180deg, white, hsl(44 42% 96%)) !important;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
section.space-y-4 div.space-y-6 > section:first-child .grid > div:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Module 5: render Available Graded Eggs as clean table-like rows. */
section.space-y-4 div.space-y-6 > section:first-child .grid > div:nth-child(2) > div.mt-1 {
  display: grid;
  gap: 0.45rem;
}
section.space-y-4 div.space-y-6 > section:first-child .grid > div:nth-child(2) > div.mt-1 > div {
  align-items: center;
  min-height: 2.25rem;
  border: 1px solid hsl(var(--border) / 0.76);
  border-radius: var(--radius-sm);
  background: hsl(var(--card));
  padding: 0.45rem 0.65rem;
  box-shadow: 0 5px 14px hsl(var(--foreground) / 0.04);
}
section.space-y-4 div.space-y-6 > section:first-child .grid > div:nth-child(2) > div.mt-1 > div span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: hsl(var(--foreground)) !important;
}
section.space-y-4 div.space-y-6 > section:first-child .grid > div:nth-child(2) > div.mt-1 > div span:first-child::before {
  content: "🥚";
  font-size: 0.9rem;
}
section.space-y-4 div.space-y-6 > section:first-child .grid > div:nth-child(2) > div.mt-1 > div span:last-child {
  border-radius: 999px;
  background: hsl(var(--primary) / 0.10);
  padding: 0.22rem 0.55rem;
  white-space: nowrap;
}

/* Module 5: render Feed & Mawese stock as clean rows too. */
section.space-y-4 div.space-y-6 > section:first-child .grid > div:nth-child(4) > div.mt-1 {
  display: grid;
  gap: 0.45rem;
}
section.space-y-4 div.space-y-6 > section:first-child .grid > div:nth-child(4) > div.mt-1 > div {
  align-items: center;
  min-height: 2.25rem;
  border: 1px solid hsl(var(--border) / 0.76);
  border-radius: var(--radius-sm);
  background: hsl(var(--card));
  padding: 0.45rem 0.65rem;
  box-shadow: 0 5px 14px hsl(var(--foreground) / 0.04);
}
section.space-y-4 div.space-y-6 > section:first-child .grid > div:nth-child(4) > div.mt-1 > div span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: hsl(var(--foreground)) !important;
}
section.space-y-4 div.space-y-6 > section:first-child .grid > div:nth-child(4) > div.mt-1 > div span:first-child::before {
  content: "🌽";
  flex: 0 0 auto;
  font-size: 0.9rem;
}
section.space-y-4 div.space-y-6 > section:first-child .grid > div:nth-child(4) > div.mt-1 > div span:last-child {
  border-radius: 999px;
  background: hsl(var(--secondary) / 0.13);
  padding: 0.22rem 0.55rem;
  white-space: nowrap;
}

section.space-y-4 div.space-y-6 > div.grid > section {
  border: 1px solid hsl(var(--border) / 0.9) !important;
  background:
    radial-gradient(circle at 100% 0%, hsl(var(--secondary) / 0.11), transparent 10rem),
    white !important;
}
section.space-y-4 div.space-y-6 > div.grid > section h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
section.space-y-4 div.space-y-6 > div.grid > section:first-child h3::before { content: "🥚"; }
section.space-y-4 div.space-y-6 > div.grid > section:last-child h3::before { content: "🌽"; }

section.space-y-4 div.space-y-6 input,
section.space-y-4 div.space-y-6 select {
  background: hsl(42 45% 98%) !important;
  border-color: hsl(var(--border)) !important;
}
section.space-y-4 div.space-y-6 input:focus,
section.space-y-4 div.space-y-6 select:focus {
  background: white !important;
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.13) !important;
}
section.space-y-4 div.space-y-6 button {
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(126 36% 35%)) !important;
  border-radius: var(--radius-sm) !important;
}
section.space-y-4 div.space-y-6 button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Module 5: keep Mauzo ya Mayai fields on one horizontal line on desktop. */
@media (min-width: 1024px) {
  section.space-y-4 div.space-y-6 > div.grid > section:first-child form {
    grid-template-columns: minmax(8.5rem, 1fr) minmax(9rem, 1fr) minmax(6rem, 0.7fr) minmax(6rem, 0.7fr) minmax(7rem, 0.75fr) minmax(9rem, 0.9fr) !important;
    align-items: end;
    gap: 0.75rem;
  }
  section.space-y-4 div.space-y-6 > div.grid > section:first-child form > * {
    grid-column: auto !important;
  }
  section.space-y-4 div.space-y-6 > div.grid > section:first-child form > div[class*="rounded-[var(--radius-sm)]"],
  section.space-y-4 div.space-y-6 > div.grid > section:first-child form > button {
    min-height: 2.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.65rem;
    white-space: nowrap;
  }
  section.space-y-4 div.space-y-6 > div.grid > section:first-child form input,
  section.space-y-4 div.space-y-6 > div.grid > section:first-child form select {
    min-height: 2.9rem;
  }
}

@media (max-width: 640px) {
  .title-bar { border-radius: var(--radius-md) !important; }
  section.space-y-4 div:has(> h2 + div.space-y-6) > h2 {
    width: 100%;
    justify-content: center;
    font-size: 1.25rem;
  }
}