/*
  สไตล์เสริมของ GrowDay
  ใช้เฉพาะส่วนที่ Tailwind CSS CDN ทำได้ไม่สะดวกหรือเพื่อให้อ่านโค้ดง่ายขึ้น
*/

html {
  font-family: "Noto Sans Thai", system-ui, sans-serif;
  background: #f7f8fa;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 8%, rgba(255, 242, 182, 0.9), transparent 32%),
    radial-gradient(circle at 92% 14%, rgba(214, 238, 255, 0.95), transparent 30%),
    linear-gradient(160deg, #cdecc9 0%, #f7f8fa 44%, #fff2b6 100%);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

input,
select,
textarea {
  font-size: 16px;
}

button {
  touch-action: manipulation;
}

#app {
  overflow-x: hidden;
  background: rgba(247, 248, 250, 0.82);
  box-shadow: 0 18px 45px rgba(80, 116, 104, 0.16);
}

.field-error {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #b91c1c;
}

nav {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

header {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(167, 215, 197, 0.7) !important;
  backdrop-filter: blur(14px);
}

nav {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(167, 215, 197, 0.7) !important;
  backdrop-filter: blur(14px);
}

.nav-button {
  box-shadow: inset 0 0 0 1px rgba(167, 215, 197, 0.38);
}

.nav-button[aria-current="page"] {
  background: linear-gradient(135deg, #7bbfa7, #a7d7c5) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(80, 148, 124, 0.28);
}

.nav-button:not([aria-current="page"]) {
  background: #eef8ee !important;
  color: #35685a !important;
}

.shadow-sm {
  box-shadow: 0 10px 28px rgba(75, 105, 95, 0.08) !important;
}

.border-gray-200 {
  border-color: rgba(167, 215, 197, 0.55) !important;
}

.bg-white {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

.bg-gray-50 {
  background-color: rgba(247, 248, 250, 0.72) !important;
}

.bg-green-700 {
  background-color: #78bca4 !important;
}

.text-green-800 {
  color: #2f6d5d !important;
}

.text-green-700 {
  color: #3f806d !important;
}

.border-green-100 {
  border-color: rgba(167, 215, 197, 0.75) !important;
}

.bg-green-50 {
  background-color: #eef8ee !important;
}

.rounded-2xl {
  border-radius: 1.375rem !important;
}

.rounded-full.bg-green-50.text-green-800.border-green-100 {
  background-color: #cdecc9 !important;
  border-color: #a7d7c5 !important;
  color: #245947 !important;
}

.rounded-full.bg-yellow-50.text-yellow-800.border-yellow-100 {
  background-color: #fff2b6 !important;
  border-color: #f5dc77 !important;
  color: #7b5b00 !important;
}

.rounded-full.bg-gray-100.text-gray-700.border-gray-200 {
  background-color: #d6eeff !important;
  border-color: #a9d8f8 !important;
  color: #285b7a !important;
}

.rounded-full.bg-red-50.text-red-700.border-red-100 {
  background-color: #ffd6e7 !important;
  border-color: #f7aac9 !important;
  color: #8a3155 !important;
}

.field-error {
  color: #9f2f53;
}

.growday-hero-frame,
.growday-hero-fallback {
  background: linear-gradient(120deg, #cdecc9 0%, #d6eeff 55%, #fff2b6 100%);
}

.pastel-card-green {
  background: rgba(205, 236, 201, 0.72);
  border-color: #a7d7c5;
}

.pastel-card-yellow {
  background: rgba(255, 242, 182, 0.78);
  border-color: #f5dc77;
}

.pastel-card-pink {
  background: rgba(255, 214, 231, 0.68);
  border-color: #f7aac9;
}

.pastel-card-blue {
  background: rgba(214, 238, 255, 0.78);
  border-color: #a9d8f8;
}

.pastel-menu-green {
  background: #cdecc9;
  border-color: #a7d7c5;
  color: #245947;
}

.pastel-menu-blue {
  background: #d6eeff;
  border-color: #a9d8f8;
  color: #285b7a;
}

.pastel-menu-yellow {
  background: #fff2b6;
  border-color: #f5dc77;
  color: #765b08;
}

.pastel-menu-pink {
  background: #ffd6e7;
  border-color: #f7aac9;
  color: #8a3155;
}

.pastel-empty {
  background: rgba(255, 242, 182, 0.58);
  border-color: #a7d7c5;
}

.pastel-list-item {
  background: rgba(247, 248, 250, 0.82);
  border-color: rgba(167, 215, 197, 0.72);
}

@media (max-width: 360px) {
  .nav-button {
    font-size: 0.75rem;
  }
}