/* 📌 ไฟล์: style.css */
/* 🎯 หน้าที่: จัดการ Custom CSS พื้นฐาน, Animations, และกฎเหล็ก Mobile UX */

/* ==================================================
   1. System Setup & Anti-Data Loss (กฎข้อ 19)
   ================================================== */
body {
  /* บล็อกการปัดหน้าจอลงเพื่อรีเฟรชบนมือถือ 100% */
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
  
  /* แก้ปัญหา Address Bar ทับแถบเมนูด้านล่างบนมือถือ (Dynamic Viewport) */
  height: 100dvh; 
}

/* รองรับ iOS Safari แบบ Native App (แก้ปัญหาแถบหาย) */
@supports (-webkit-touch-callout: none) {
  body {
    height: -webkit-fill-available;
  }
}

/* ซ่อน Scrollbar ของ Webkit เพื่อให้แอปดูคล้าย Native App (แต่ยังเลื่อนได้ปกติ) */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #e5e7eb; /* gray-200 */
  border-radius: 4px;
}

/* คลาสหลักสำหรับสลับหน้า SPA หรือซ่อน Element */
.d-none {
  display: none !important;
}

/* ==================================================
   2. Form Element Constraints (กฎข้อ 10)
   ================================================== */
textarea {
  /* บังคับความสูงสูงสุดของกล่องข้อความ ถ้าเกินจะเกิด Scroll ภายใน */
  max-height: 200px;
  overflow-y: auto !important; 
}

/* ปุ่มประเภทธุรกรรม (รับ/จ่าย/โยก) เมื่อถูกเลือก */
.type-btn.active {
  background-color: var(--primary) !important; /* สีหลักของธีม */
  color: #ffffff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* ==================================================
   3. Global Loading Overlay (กฎข้อ 54)
   ================================================== */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(253, 251, 247, 0.85); /* พื้นหลังสีครีมโปร่งแสง */
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.loader-spinner {
  width: 60px;
  height: 60px;
  border: 6px solid #f3f4f6; /* gray-100 */
  border-top: 6px solid var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* ==================================================
   4. Skeleton Shimmer Loading (กฎข้อ 33)
   ================================================== */
.skeleton {
  background: #f1f5f9; /* slate-100 */
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ==================================================
   5. Bottom Navigation Active State
   ================================================== */
.nav-active {
  color: var(--accent-dark) !important;
}
.nav-active i {
  transform: translateY(-3px);
  font-size: 1.25rem;
  color: var(--accent) !important;
}

/* ==================================================
   6. Fix SweetAlert2 Stacking
   ================================================== */
.swal2-container {
  z-index: 10000 !important; /* ดันให้อยู่เหนือ Global Loader เสมอ */
}

/* ==================================================
   7. PDF & Printing Layout (กฎข้อ 28)
   ================================================== */
@media print {
  #bottomNav, 
  #btnSync, 
  .loading-overlay, 
  #authView, 
  #btnSubmit, 
  #btnCancelEdit,
  #btnSortToggle,
  #btnClearFilter,
  details {
    display: none !important;
  }
  
  body, .max-w-md, .view-section, .bg-gray-50 {
    background-color: white !important;
    box-shadow: none !important;
    max-width: 100% !important;
    border: none !important;
  }
  
  #viewHistory { display: block !important; }
  #viewForm, #viewDashboard { display: none !important; }
  
  .bg-white.p-4.rounded-3xl.shadow-sm {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    page-break-inside: avoid;
  }
}

/* ==================================================
   8. Animations & Charts (UI ลูกเล่น)
   ================================================== */
.anim-fade-up {
  animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 🍩 พื้นที่วาดกราฟ (Chart.js) */
.chart-wrap {
  position: relative;
  height: 14rem; /* 224px */
}

/* ✨ ปุ่มทุกชนิดมี Feedback นุ่มนวลขึ้น */
button,
.type-btn,
.nav-btn,
.icon-btn {
  transition: transform 0.15s ease, box-shadow 0.2s ease,
    background-color 0.2s ease, color 0.2s ease;
}

button:active,
.type-btn:active {
  transform: scale(0.97);
}

/* ==================================================
   9. ธีมสี (CSS Variables) — สลับได้ที่หน้า ตั้งค่า
   ================================================== */
/* 🌿 ค่าเริ่มต้นของแอป = ธีม Emerald Mint */
:root,
[data-theme="emerald"] {
  --bg-app: #f0f6f0; /* พื้นหลังแอป */
  --accent-soft: #d9ecdf; /* หัวแถบ/พื้นสีอ่อน */
  --accent-soft-2: #c8e6d0; /* การ์ดโทนอ่อนอันดับ 2 */
  --accent-border: #bfe3c9; /* เส้นขอบสีอ่อน */
  --primary: #14532d; /* ปุ่ม/ตัวอักษรหลัก */
  --primary-hover: #052e16; /* ปุ่มเมื่อชี้เมาส์ */
  --hero-from: #14532d; /* gradient การ์ดใหญ่ */
  --hero-to: #052e16;
  --overlay: rgba(20, 83, 45, 0.6); /* ฉากหลัง Modal */
  --accent: #eab308; /* สีเน้น (ทอง) */
  --accent-dark: #ca8a04;
}

/* 🎩 ธีม Classic — หน้าตาเดิม (ครีม/เหลือง/ดำ) */
[data-theme="classic"] {
  --bg-app: #fdfbf7;
  --accent-soft: #fefae0;
  --accent-soft-2: #fef3c7;
  --accent-border: #fde68a;
  --primary: #333333;
  --primary-hover: #1f2937;
  --hero-from: #333333;
  --hero-to: #1c1917;
  --overlay: rgba(51, 51, 51, 0.6);
  --accent: #eab308;
  --accent-dark: #ca8a04;
}

/* 🌊 ธีม Ocean Blue — น้ำเงินราชาสง่างาม */
[data-theme="ocean"] {
  --bg-app: #f0f5fb;
  --accent-soft: #dbeafe;
  --accent-soft-2: #c7dcf9;
  --accent-border: #bfdbfe;
  --primary: #1e3a8a;
  --primary-hover: #172554;
  --hero-from: #1e3a8a;
  --hero-to: #0f172a;
  --overlay: rgba(30, 58, 138, 0.6);
  --accent: #f59e0b;
  --accent-dark: #b45309;
}

/* 🌅 ธีม Sunset Warm — ส้มทองอบอุ่น */
[data-theme="sunset"] {
  --bg-app: #fdf5ec;
  --accent-soft: #ffe4cc;
  --accent-soft-2: #ffd4ad;
  --accent-border: #ffd9b0;
  --primary: #9a3412;
  --primary-hover: #7c2d12;
  --hero-from: #9a3412;
  --hero-to: #431407;
  --overlay: rgba(154, 52, 18, 0.6);
  --accent: #eab308;
  --accent-dark: #ca8a04;
}

/* ── คลาสยูทิลิตี้ธีม (ใช้ใน index.html / script.js) ── */
.bg-app {
  background-color: var(--bg-app);
}
.bg-header {
  background-color: var(--accent-soft);
}
.bg-primary {
  background-color: var(--primary);
}
.bg-primary-hover:hover {
  background-color: var(--primary-hover);
}
.text-primary {
  color: var(--primary);
}
.text-accent {
  color: var(--accent);
}
.text-accent-dark {
  color: var(--accent-dark);
}
.bg-hero {
  background-image: linear-gradient(135deg, var(--hero-from), var(--hero-to));
}
.bg-topcard {
  background-image: linear-gradient(135deg, var(--accent-soft), var(--accent-soft-2));
}
.bg-overlay {
  background-color: var(--overlay);
}
.border-soft {
  border-color: var(--accent-border);
}
.ring-soft:focus {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* 🎨 ปุ่มเลือกธีมในหน้า ตั้งค่า */
.theme-opt {
  border-radius: 0.75rem;
  padding: 4px;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.theme-opt:active {
  transform: scale(0.95);
}
.theme-opt-active {
  box-shadow: 0 0 0 2px #9ca3af;
}