/* Registration Workspace: keep Save buttons aligned at the bottom of every card pane. */
section.space-y-4 > div.space-y-6 > div[class*="rounded-[var(--radius-lg)]"] > div.grid > div {
  display: flex !important;
  min-height: 100%;
  flex-direction: column;
}

section.space-y-4 > div.space-y-6 > div[class*="rounded-[var(--radius-lg)]"] > div.grid > div > form {
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

section.space-y-4 > div.space-y-6 > div[class*="rounded-[var(--radius-lg)]"] > div.grid > div > form > button:last-of-type {
  margin-top: auto !important;
}

form[class*="min-w-[8.8in]"]::before {
  content: "Taarifa za Kila siku kwa Banda";
  grid-column: 1 / -1;
  display: block;
  margin-bottom: 0.25rem;
  border-radius: var(--radius-md);
  background: hsl(var(--primary) / 0.08);
  padding: 0.85rem 1rem;
  color: hsl(var(--primary));
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.2;
}

form[class*="lg:grid-cols-4"]::before {
  content: "Uzalishaji wa mayai kwa kila siku";
  grid-column: 1 / -1;
  display: block;
  margin-bottom: 0.25rem;
  border-radius: var(--radius-md);
  background: hsl(var(--primary) / 0.08);
  padding: 0.85rem 1rem;
  color: hsl(var(--primary));
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.2;
}

/* Make date fields stand out clearly from regular text/number fields. */
input[type="date"] {
  border-color: hsl(var(--secondary) / 0.72) !important;
  background: linear-gradient(180deg, hsl(var(--secondary) / 0.18), hsl(var(--card))) !important;
  color: hsl(var(--foreground)) !important;
  box-shadow: inset 0 0 0 1px hsl(var(--secondary) / 0.18), 0 8px 18px hsl(var(--secondary) / 0.08) !important;
}

input[type="date"]:focus {
  border-color: hsl(var(--secondary)) !important;
  background: hsl(var(--card)) !important;
  box-shadow: 0 0 0 4px hsl(var(--secondary) / 0.22), 0 10px 22px hsl(var(--secondary) / 0.10) !important;
}

[data-daily-date-field="true"] span,
label:has(> input[type="date"]) > span {
  color: hsl(var(--secondary-foreground)) !important;
}

[data-daily-date-field="true"] input[type="date"] {
  border-width: 2px !important;
  background: linear-gradient(135deg, hsl(var(--secondary) / 0.24), hsl(var(--card)) 72%) !important;
}

/* Upangaji wa mayai: give each egg size category its own clear color. */
form[class*="lg:grid-cols-4"] h3 + p + span,
form[class*="lg:grid-cols-4"] h3 + p {
  position: relative;
}

form[class*="lg:grid-cols-4"] label:has(span:first-child) {
  border-radius: var(--radius-md);
}

form[class*="lg:grid-cols-4"] label:has(> span):has(input[aria-label="Makubwa Tray"]),
form[class*="lg:grid-cols-4"] label:has(> span):has(input[placeholder="Mayai makubwa"]) {
  border: 1px solid hsl(151 48% 62%);
  background: hsl(151 52% 94%);
  padding: 0.75rem;
}
form[class*="lg:grid-cols-4"] label:has(input[aria-label="Makubwa Tray"]) > span,
form[class*="lg:grid-cols-4"] label:has(input[placeholder="Mayai makubwa"]) > span { color: hsl(151 62% 24%) !important; }
form[class*="lg:grid-cols-4"] label:has(input[aria-label="Makubwa Tray"]) input,
form[class*="lg:grid-cols-4"] label:has(input[placeholder="Mayai makubwa"]) input { border-color: hsl(151 48% 62%) !important; background: white !important; }

form[class*="lg:grid-cols-4"] label:has(input[aria-label="Saizi ya Kati Tray"]),
form[class*="lg:grid-cols-4"] label:has(input[placeholder="Mayai saizi ya kati"]) {
  border: 1px solid hsl(42 86% 58%);
  background: hsl(42 92% 93%);
  padding: 0.75rem;
}
form[class*="lg:grid-cols-4"] label:has(input[aria-label="Saizi ya Kati Tray"]) > span,
form[class*="lg:grid-cols-4"] label:has(input[placeholder="Mayai saizi ya kati"]) > span { color: hsl(38 86% 28%) !important; }
form[class*="lg:grid-cols-4"] label:has(input[aria-label="Saizi ya Kati Tray"]) input,
form[class*="lg:grid-cols-4"] label:has(input[placeholder="Mayai saizi ya kati"]) input { border-color: hsl(42 86% 58%) !important; background: white !important; }

form[class*="lg:grid-cols-4"] label:has(input[aria-label="Madogo Tray"]),
form[class*="lg:grid-cols-4"] label:has(input[placeholder="Mayai madogo"]) {
  border: 1px solid hsl(198 74% 58%);
  background: hsl(198 82% 94%);
  padding: 0.75rem;
}
form[class*="lg:grid-cols-4"] label:has(input[aria-label="Madogo Tray"]) > span,
form[class*="lg:grid-cols-4"] label:has(input[placeholder="Mayai madogo"]) > span { color: hsl(199 74% 28%) !important; }
form[class*="lg:grid-cols-4"] label:has(input[aria-label="Madogo Tray"]) input,
form[class*="lg:grid-cols-4"] label:has(input[placeholder="Mayai madogo"]) input { border-color: hsl(198 74% 58%) !important; background: white !important; }

form[class*="lg:grid-cols-4"] label:has(input[aria-label="Yaliyovunjika Tray"]),
form[class*="lg:grid-cols-4"] label:has(input[placeholder="Mayai yaliyovunjika"]) {
  border: 1px solid hsl(348 76% 62%);
  background: hsl(348 86% 96%);
  padding: 0.75rem;
}
form[class*="lg:grid-cols-4"] label:has(input[aria-label="Yaliyovunjika Tray"]) > span,
form[class*="lg:grid-cols-4"] label:has(input[placeholder="Mayai yaliyovunjika"]) > span { color: hsl(348 76% 34%) !important; }
form[class*="lg:grid-cols-4"] label:has(input[aria-label="Yaliyovunjika Tray"]) input,
form[class*="lg:grid-cols-4"] label:has(input[placeholder="Mayai yaliyovunjika"]) input { border-color: hsl(348 76% 62%) !important; background: white !important; }

/* Egg collection summary: omit the serial number (Sno.) column from Jumla ya Mayai kwa Banda. */
table.min-w-\[720px\] thead th:first-child,
table.min-w-\[720px\] tbody tr:not(:has(td[colspan])) td:first-child {
  display: none !important;
}

table.min-w-\[720px\] {
  min-width: 620px !important;
}

@media (min-width: 1024px) {
  section.space-y-4 > div.space-y-6 > div[class*="rounded-[var(--radius-lg)]"] > div.grid {
    align-items: stretch !important;
  }
}

/* Module 5: keep Mauzo ya Mayai total inside its pane on desktop so it cannot overlap Mauzo ya Chakula. */
@media (min-width: 1024px) {
  section.space-y-4 div.space-y-6 > div.grid > section:first-child {
    min-width: 0;
    overflow: hidden;
  }

  section.space-y-4 div.space-y-6 > div.grid > section:first-child form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100%;
    overflow: hidden;
  }

  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 {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
    width: 100%;
  }
}

/* Module 5: use distinct pane colors for clearer visibility. */
section.space-y-4 div.space-y-6 > section:first-child .grid > div:nth-child(1) {
  border-color: hsl(151 48% 58%) !important;
  background: linear-gradient(145deg, hsl(151 54% 93%), hsl(151 48% 97%)) !important;
}
section.space-y-4 div.space-y-6 > section:first-child .grid > div:nth-child(2) {
  border-color: hsl(42 86% 58%) !important;
  background: linear-gradient(145deg, hsl(42 92% 92%), hsl(42 82% 97%)) !important;
}
section.space-y-4 div.space-y-6 > section:first-child .grid > div:nth-child(3) {
  border-color: hsl(287 38% 66%) !important;
  background: linear-gradient(145deg, hsl(287 48% 94%), hsl(287 36% 98%)) !important;
}
section.space-y-4 div.space-y-6 > section:first-child .grid > div:nth-child(4) {
  border-color: hsl(188 55% 58%) !important;
  background: linear-gradient(145deg, hsl(188 58% 93%), hsl(188 46% 98%)) !important;
}
section.space-y-4 div.space-y-6 > div.grid > section:first-child {
  border-color: hsl(24 78% 62%) !important;
  background: radial-gradient(circle at 100% 0%, hsl(24 90% 70% / 0.18), transparent 10rem), linear-gradient(145deg, hsl(28 78% 94%), white) !important;
}
section.space-y-4 div.space-y-6 > div.grid > section:last-child {
  border-color: hsl(151 48% 58%) !important;
  background: radial-gradient(circle at 100% 0%, hsl(151 58% 62% / 0.18), transparent 10rem), linear-gradient(145deg, hsl(151 52% 94%), white) !important;
}