/* Beelive Order Viewer - Global Styles */

/* ★ PERFORMANCE: GPU-accelerated smooth scrolling */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ★ Smooth scroll cho mọi container cuộn */
* {
  scroll-behavior: smooth;
}

/* ★ PERFORMANCE: Optimize will-change cho animations thường gặp */
.animate-spin,
.animate-pulse {
  will-change: transform;
}

/* ★ Tối ưu render cho sidebar & main content */
aside, main, nav {
  will-change: auto;
  contain: layout style;
}

/* ★ SMOOTH PAGE TRANSITIONS */
main > * {
  animation: fadeSlideIn 0.2s ease-out;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0.6;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ★ Smooth scrollbar cho danh sách dài */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.5);
}

/* ★ Tối ưu hiệu ứng hover cho list items */
tr, .group {
  transition: background-color 0.15s ease;
}

/* ★ MOBILE: Smooth touch scrolling */
@supports (-webkit-overflow-scrolling: touch) {
  .overflow-y-auto,
  .overflow-auto {
    -webkit-overflow-scrolling: touch;
  }
}

/* ★ Tối ưu image rendering */
img {
  content-visibility: auto;
}

/* ★ PERFORMANCE: Lazy render cho off-screen content */
.overflow-y-auto > *:nth-child(n+50),
.overflow-auto > *:nth-child(n+50) {
  content-visibility: auto;
  contain-intrinsic-size: 0 60px;
}

/* ★ Backdrop blur tối ưu GPU */
.backdrop-blur,
.backdrop-blur-sm,
.backdrop-blur-md {
  will-change: backdrop-filter;
  -webkit-backdrop-filter: blur(8px);
}

/* ★ Reduce motion cho user prefer-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}