/* ล็อกพฤติกรรมการปัดหน้าจอลงเพื่อรีเฟรชบนมือถือ ป้องกันข้อมูลฟอร์มหาย */
body {
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

/* รองรับพื้นที่ปลอดภัยสำหรับมือถือรุ่นใหม่ที่มีรอยบากหรือแถบ Home Bar ด้านล่าง (Mobile-First UX) */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ควบคุมปุ่มและแท็บระบบบนมือถือให้มีขนาดขั้นต่ำ 44px เพื่อให้ใช้นิ้วกดง่ายตามหลัก Accessibility */
.nav-tab, .quick-btn, #submit-btn, #prev-btn, #next-btn {
  min-height: 44px;
}

/* ====================================================================
 * NEXT-GEN UI: SKELETON LOADER & SHIMMER EFFECT
 * ====================================================================
 */
#header-balance-skeleton, #chart-skeleton, #history-skeleton div {
  position: relative;
  overflow: hidden;
  background-color: #e5e7eb;
}

#header-balance-skeleton::after, #chart-skeleton::after, #history-skeleton div::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 20%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0) 100
  );
  animation: shimmerAnimation 1.6s infinite;
  content: '';
}

@keyframes shimmerAnimation {
  100% {
    transform: translateX(100%);
  }
}

/* ตกแต่งกล่องประวัติรายการแบบ Card Layout ให้อ่านง่ายและเด้งตอบสนองการกดนิ้ว */
.history-card {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.history-card:active {
  transform: scale(0.98);
}

/* Custom Scrollbar เล็กๆ สวยงามสำหรับกล่องพิมพ์ข้อความและรายการแยก */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ====================================================================
 * ⚡ PRINT MEDIA STYLES: ตัวจัดการตัดส่วนเกินขณะสั่งพิมพ์สลิป
 * ====================================================================
 */
@media print {
  /* ซ่อนองค์ประกอบหลักทั้งหมดของหน้าแอปพลิเคชันไม่ให้หลุดเข้าไปในกระดาษพิมพ์ */
  body > *:not(#bill-print-area) {
    display: none !important;
  }
  
  /* บังคับให้แสดงเฉพาะส่วนพิมพ์บิลชั่วคราวแบบเต็มหน้ากระดาษ */
  #bill-print-area {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: #fff;
  }

  /* ล้างการตั้งค่า Margin/Padding ของตัวเบราว์เซอร์เพื่อให้พิมพ์บิลได้ชิดขอบสวยงาม */
  @page {
    margin: 0;
  }
  
  body {
    margin: 0;
    background: #fff;
  }
}