/* ===== Base ===== */
html {
  width: 100%;
  max-width: 100vw;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* hide scrollbar but keep scroll */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body {
  width: 100%;
  max-width: 100vw;
  min-height: 100%;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: 'Kanit', sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  background-color: #f8fafc;
  display: flex;
  flex-direction: column;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
  /* hide scrollbar but keep scroll */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Hide scrollbars everywhere, keep scrolling */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Safe areas (แก้ไขเพิ่ม !important เพื่อไม่ให้ Tailwind ทับ) */
.safe-area-bottom { padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px)) !important; }
.safe-area-top { padding-top: max(1.25rem, env(safe-area-inset-top, 0px)) !important; }

/* Animations */
.animate-slide-up { animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.animate-fade-in { animation: fadeIn 0.2s ease-out; }
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Swipe delete */
.swipe-container {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background-color: #ffffff;
  touch-action: pan-y;
  will-change: transform;
}
.swipe-action-bg {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 85px;
  background-color: #EF4444;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.75rem;
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
}
.swipe-container.is-swiping .swipe-action-bg {
  opacity: 1;
  pointer-events: auto;
}
.swipe-content {
  position: relative;
  z-index: 2;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background-color: #ffffff;
  will-change: transform;
  border-radius: 1rem;
}

/* PIN keys */
.pin-key {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  min-height: 0 !important;
  min-width: 0 !important;
}

/* Balance blur */
.balance-blurred {
  filter: blur(7px);
  user-select: none;
  pointer-events: none;
  transition: filter 0.2s ease;
}
#total-primary, #total-secondary {
  transition: filter 0.2s ease;
}

/* Number input spin buttons */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] { -moz-appearance: textfield; }

.pin-dot.filled {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  transform: scale(1.15);
}

#splash-screen.opacity-0 {
  opacity: 0;
  pointer-events: none;
}

button:active {
  transform: scale(0.97);
}

/* iOS input zoom prevention */
input, select, textarea {
  font-size: 16px !important;
}

nav button {
  min-height: 44px;
}

nav.fixed, #bottom-nav, .bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  width: 100%;
  left: 0;
  right: 0;
}

.fixed.inset-0 {
  min-height: -webkit-fill-available;
}

/* Mobile full width */
@media (max-width: 767px) {
  header, main, nav {
    max-width: 100% !important;
    width: 100% !important;
  }
  header > div,
  main,
  nav > div {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Main content must be allowed to grow and page scrolls */
main {
  flex: 1 0 auto;
  -webkit-overflow-scrolling: touch;
}

#transaction-list {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}