/* 📌 ไฟล์: 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: #333333 !important; /* Charcoal */
  color: #ffffff !important;
  border-color: #333333 !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 #eab308; /* yellow-500 */
  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: #ca8a04 !important; /* yellow-600 */
}
.nav-active i {
  transform: translateY(-3px);
  font-size: 1.25rem;
  color: #eab308 !important; /* yellow-500 */
}

/* ==================================================
   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;
  }
}