/* ==============================================================================
   FLUTTER MOTION ENGINE — Ultra-Smooth 120fps Mobile Micro-Interactions
   Theme: Native Dark Navy (100% Preserved)
   Physics: GPU-Accelerated Hardware Transformed Springs & Deceleration Curves
   ============================================================================== */

/* 1. Reset Tap Highlights & Enable Fluid Touch Feedback */
* {
  -webkit-tap-highlight-color: transparent !important;
}

/* 2. Tactile Spring Feedback on Tap (Interactive Elements) */
.chip-btn,
.store-chip,
.btn-date,
.btn-action,
.btn-action-sm,
.tab-btn,
.btn-quick-nav,
.nav-dropdown-trigger,
.modal-close-btn,
.dropdown-item-btn,
.finance-subtab-btn {
  touch-action: manipulation;
  will-change: transform;
  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.15s ease,
              background 0.15s ease !important;
}

.chip-btn:active,
.store-chip:active,
.btn-date:active,
.btn-action:active,
.btn-action-sm:active,
.tab-btn:active,
.btn-quick-nav:active,
.nav-dropdown-trigger:active,
.modal-close-btn:active,
.dropdown-item-btn:active,
.finance-subtab-btn:active {
  transform: scale(0.95) !important;
}

/* 3. Cards Subtle Spring Elevation on Touch */
.metric-card,
.stat-card,
.card-setup,
.card-group-section {
  touch-action: manipulation;
  will-change: transform;
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.metric-card:active,
.stat-card:active {
  transform: scale(0.98) translateY(1px) !important;
}

/* 4. Modal Bottom-Sheet & Slide-Up (Flutter Cupertino / Material Physics) */
.modal-overlay {
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.24s !important;
}

.modal-overlay .modal-card,
.modal-overlay .modal-dialog,
.modal-overlay .modal-content {
  will-change: transform, opacity;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.24s ease !important;
}

/* When modal opens (active state) */
.modal-overlay:not(.active) .modal-card,
.modal-overlay:not(.active) .modal-dialog,
.modal-overlay:not(.active) .modal-content {
  transform: translateY(24px) scale(0.97) !important;
  opacity: 0 !important;
}

.modal-overlay.active .modal-card,
.modal-overlay.active .modal-dialog,
.modal-overlay.active .modal-content {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
}

/* 5. Fluid Flutter Shimmer Wave Loading */
@keyframes flutterFluidShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.flutter-shimmer,
.shimmer-loading {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(56, 189, 248, 0.12) 50%,
    rgba(255, 255, 255, 0.03) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: flutterFluidShimmer 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-radius: 6px !important;
  color: transparent !important;
  user-select: none !important;
  pointer-events: none !important;
}

/* 6. Flutter Ripple Effect */
.flutter-ripple-ink {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.16);
  pointer-events: none;
  animation: flutterRippleAnim 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes flutterRippleAnim {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(3.5);
    opacity: 0;
  }
}

/* 7. Smooth Inertial Scrolling */
.smooth-scroll,
.table-responsive,
.winforms-grid-scrollbar,
#deadStockTableBody,
#cashierTableContainer {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}