/* Target Path: style.css */
/* เขียนโค้ดจาก agent version: .agents-3.6 */

/* 🪐 Custom Global Overrides & Utilities for beerkhongpom */
body {
  font-family: 'Inter', 'Noto Sans Thai', sans-serif;
  background-color: #F5F2EB;
  color: #2A251F;
  overscroll-behavior-y: none; /* ป้องกันการปัดหน้าจอลงเพื่อรีเฟรช (Pull-to-refresh Block) */
}

/* 🎨 Custom Color Palette Classes (Beige & Warm Gray Theme Overrides) */
.bg-beige-50 { background-color: #FDFBF7 !important; }
.bg-beige-100 { background-color: #FAF7F0 !important; }
.bg-beige-200 { background-color: #F3EDE0 !important; }
.bg-beige-300 { background-color: #E6DCC8 !important; }
.bg-beige-400 { background-color: #D5C4A9 !important; }
.bg-beige-500 { background-color: #BCA685 !important; }
.bg-beige-600 { background-color: #A38B69 !important; }
.bg-beige-700 { background-color: #857053 !important; }
.bg-beige-800 { background-color: #685640 !important; }
.bg-beige-900 { background-color: #4D3E2F !important; }

.text-beige-50 { color: #FDFBF7 !important; }
.text-beige-100 { color: #FAF7F0 !important; }
.text-beige-200 { color: #F3EDE0 !important; }
.text-beige-300 { color: #E6DCC8 !important; }

.border-beige-100 { border-color: #FAF7F0 !important; }
.border-beige-200 { border-color: #F3EDE0 !important; }
.border-beige-300 { border-color: #E6DCC8 !important; }
.border-beige-400 { border-color: #D5C4A9 !important; }

.bg-warmgray-950 { background-color: #1C1814 !important; }
.bg-warmgray-900 { background-color: #2A251F !important; }
.bg-warmgray-850 { background-color: #35302A !important; }
.bg-warmgray-800 { background-color: #403A34 !important; }
.bg-warmgray-750 { background-color: #4E463F !important; }
.bg-warmgray-700 { background-color: #5D554D !important; }
.bg-warmgray-600 { background-color: #7F756C !important; }
.bg-warmgray-500 { background-color: #9E948A !important; }
.bg-warmgray-50 { background-color: #FAF7F0 !important; }

.text-warmgray-950 { color: #1C1814 !important; }
.text-warmgray-900 { color: #2A251F !important; }
.text-warmgray-850 { color: #35302A !important; }
.text-warmgray-800 { color: #403A34 !important; }
.text-warmgray-700 { color: #5D554D !important; }
.text-warmgray-600 { color: #7F756C !important; }
.text-warmgray-500 { color: #9E948A !important; }

.border-warmgray-900 { border-color: #2A251F !important; }
.border-warmgray-800 { border-color: #403A34 !important; }
.border-warmgray-750 { border-color: #4E463F !important; }
.border-warmgray-700 { border-color: #5D554D !important; }
.border-warmgray-200 { border-color: #F3EDE0 !important; }

/* ซ่อน Scrollbar สำหรับ Element ที่ต้องการ */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* สไตล์ Heatmap Cell */
.heatmap-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  transition: all 0.15s ease-in-out;
}
.heatmap-cell:hover {
  transform: scale(1.35);
  z-index: 10;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
}

/* 📶 Offline Toast Indicator */
.offline-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(150%);
  background-color: #E11D48;
  color: #FFFFFF;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.offline-toast.show {
  transform: translateX(-50%) translateY(0);
}

/* 📥 PWA Update Dialog Box */
.update-dialog {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: #FFFFFF;
  border: 1px solid #E6DCC8;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  padding: 20px;
  max-width: 320px;
  z-index: 9999;
  transform: translateY(150%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.update-dialog.show {
  transform: translateY(0);
}

.update-dialog-content h3 {
  font-size: 14px;
  font-weight: 700;
  color: #2A251F;
  margin-top: 8px;
  margin-bottom: 4px;
}

.update-dialog-content p {
  font-size: 12px;
  color: #5D554D;
  margin-bottom: 16px;
}

.update-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.update-icon {
  color: #B57A2A;
  font-size: 24px;
}

.btn {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-primary {
  background-color: #B57A2A;
  color: #FFFFFF;
}
.btn-primary:hover {
  background-color: #9C631D;
}

.btn-secondary {
  background-color: #F3EDE0;
  color: #403A34;
  border: 1px solid #D5C4A9;
}
.btn-secondary:hover {
  background-color: #E6DCC8;
}

/* 🌀 CSS Spinner fallback สำหรับ Lottie/Loading States */
.spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.css-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #E6DCC8;
  border-top: 3px solid #B57A2A;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 📱 Responsive Modal Layout Adjustments for Textarea & Scroll */
textarea.auto-expand {
  overflow-y: auto;
  max-height: 200px;
  resize: none;
}

/* Custom CSS classes to enforce correct visual balance for standard symmetric layouts */
.grid-symmetric {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}