/**
 * Mobile-Specific Enhancements for Apex
 * Bottom navigation, touch controls, swipeable cards, and responsive optimizations
 */

/* ============================================================================
   Mobile Bottom Navigation
   ============================================================================ */

.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-primary);
  z-index: var(--z-sticky);
  padding: var(--space-2) var(--space-3);
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
}

@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  
  /* Add padding to body to prevent content being hidden by bottom nav */
  body.has-bottom-nav {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
  min-width: 60px;
  /* Ensure touch targets are at least 44x44px */
  min-height: 44px;
}

.mobile-nav-item:active {
  transform: scale(0.95);
}

.mobile-nav-item.active {
  color: var(--brand-primary);
  background: var(--brand-primary-bg);
}

.mobile-nav-item:hover:not(.active) {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.mobile-nav-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================================================
   Touch-Friendly Controls
   ============================================================================ */

/* Ensure all interactive elements have minimum 44x44px touch targets */
@media (max-width: 768px) {
  .btn,
  .action-btn,
  button,
  a.btn {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Increase input height for better touch experience */
  .input,
  .select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  select {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
  
  /* Larger tap targets for checkboxes and radios */
  input[type="checkbox"],
  input[type="radio"] {
    width: 24px;
    height: 24px;
  }
}

/* ============================================================================
   Swipeable Cards
   ============================================================================ */

.swipeable-card {
  position: relative;
  touch-action: pan-y;
  transition: transform 0.3s ease;
}

.swipeable-card.swiping {
  transition: none;
}

.swipeable-card.swipe-left {
  animation: swipe-out-left 0.3s ease forwards;
}

.swipeable-card.swipe-right {
  animation: swipe-out-right 0.3s ease forwards;
}

@keyframes swipe-out-left {
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes swipe-out-right {
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.swipe-actions {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  font-weight: 600;
  font-size: 0.875rem;
}

.swipe-action-left {
  left: 0;
  background: var(--success);
  color: white;
}

.swipe-action-right {
  right: 0;
  background: var(--danger);
  color: white;
}

/* ============================================================================
   Pull to Refresh
   ============================================================================ */

.pull-to-refresh {
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  pointer-events: none;
}

.pull-to-refresh.pulling {
  transform: translateY(60px);
}

.pull-to-refresh.refreshing {
  transform: translateY(60px);
}

.pull-to-refresh-icon {
  transition: transform 0.3s ease;
}

.pull-to-refresh.pulling .pull-to-refresh-icon {
  transform: rotate(180deg);
}

/* ============================================================================
   Mobile-Optimized Tables
   ============================================================================ */

@media (max-width: 768px) {
  /* Convert tables to cards on mobile */
  .responsive-table {
    border: none;
  }
  
  .responsive-table thead {
    display: none;
  }
  
  .responsive-table tbody,
  .responsive-table tr {
    display: block;
  }
  
  .responsive-table tr {
    margin-bottom: var(--space-4);
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border: 1px solid var(--border-primary);
  }
  
  .responsive-table td {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-primary);
  }
  
  .responsive-table td:last-child {
    border-bottom: none;
  }
  
  .responsive-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    text-transform: uppercase;
  }
}

/* ============================================================================
   Mobile Drawer/Sheet
   ============================================================================ */

.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  pointer-events: none;
}

.mobile-drawer.open {
  pointer-events: auto;
}

.mobile-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-drawer.open .mobile-drawer-overlay {
  opacity: 1;
}

.mobile-drawer-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-6);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.3s ease;
  max-height: 80vh;
  overflow-y: auto;
}

.mobile-drawer.open .mobile-drawer-content {
  transform: translateY(0);
}

.mobile-drawer-handle {
  width: 40px;
  height: 4px;
  background: var(--border-primary);
  border-radius: var(--radius-full);
  margin: 0 auto var(--space-4);
}

/* ============================================================================
   Gesture Indicators
   ============================================================================ */

.swipe-hint {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: 2rem;
  animation: swipe-hint 1.5s ease-in-out infinite;
  pointer-events: none;
}

@media (max-width: 768px) {
  .swipe-hint {
    display: block;
  }
}

.swipe-hint-left {
  left: var(--space-4);
}

.swipe-hint-right {
  right: var(--space-4);
}

@keyframes swipe-hint {
  0%, 100% {
    opacity: 0.3;
    transform: translateY(-50%) translateX(0);
  }
  50% {
    opacity: 0.7;
    transform: translateY(-50%) translateX(10px);
  }
}

/* ============================================================================
   Mobile-Specific Spacing
   ============================================================================ */

@media (max-width: 768px) {
  /* Reduce padding on mobile for more content space */
  .card {
    padding: var(--space-4);
  }
  
  /* Stack layouts vertically */
  .desktop-flex {
    display: flex !important;
  }
  
  .mobile-stack {
    flex-direction: column !important;
  }
  
  /* Full-width buttons on mobile */
  .mobile-full-width {
    width: 100% !important;
  }
  
  /* Hide on mobile */
  .hide-mobile {
    display: none !important;
  }
  
  /* Show only on mobile */
  .show-mobile {
    display: block !important;
  }
}

@media (min-width: 769px) {
  .show-mobile {
    display: none !important;
  }
}

/* ============================================================================
   Sticky Headers
   ============================================================================ */

.mobile-sticky-header {
  position: sticky;
  top: 0;
  background: var(--bg-primary);
  z-index: var(--z-sticky);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-primary);
  backdrop-filter: blur(10px);
  background: rgba(var(--bg-primary-rgb), 0.95);
}

/* ============================================================================
   Touch Feedback
   ============================================================================ */

@media (max-width: 768px) {
  /* Add ripple effect on touch */
  .touch-ripple {
    position: relative;
    overflow: hidden;
  }
  
  .touch-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
  }
  
  .touch-ripple:active::after {
    width: 200px;
    height: 200px;
  }
  
  /* Highlight feedback for taps */
  .touch-highlight {
    -webkit-tap-highlight-color: rgba(var(--brand-primary-rgb), 0.1);
  }
}

/* ============================================================================
   Safe Area Support
   ============================================================================ */

@supports (padding: env(safe-area-inset-bottom)) {
  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .safe-area-top {
    padding-top: env(safe-area-inset-top);
  }
  
  .safe-area-left {
    padding-left: env(safe-area-inset-left);
  }
  
  .safe-area-right {
    padding-right: env(safe-area-inset-right);
  }
}

/* ============================================================================
   Horizontal Scroll Containers (for cards, etc.)
   ============================================================================ */

.horizontal-scroll {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: var(--space-2) 0;
}

.horizontal-scroll::-webkit-scrollbar {
  display: none;
}

.horizontal-scroll > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* Scroll indicators */
.horizontal-scroll-container {
  position: relative;
}

.scroll-indicator {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all var(--transition-fast);
}

.scroll-indicator:hover {
  background: var(--bg-tertiary);
}

.scroll-indicator.left {
  left: var(--space-2);
}

.scroll-indicator.right {
  right: var(--space-2);
}

/* ============================================================================
   Mobile Chart Optimizations
   ============================================================================ */

@media (max-width: 768px) {
  canvas {
    max-height: 300px !important;
  }
  
  .chart-container {
    position: relative;
    height: 300px;
  }
}

/* ============================================================================
   Loading Skeleton Mobile
   ============================================================================ */

@media (max-width: 768px) {
  .skeleton {
    background: linear-gradient(
      90deg,
      var(--bg-tertiary) 25%,
      var(--bg-secondary) 50%,
      var(--bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
  }
  
  @keyframes skeleton-loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
  
  .skeleton-text {
    height: 1rem;
    margin-bottom: var(--space-2);
  }
  
  .skeleton-title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: var(--space-3);
  }
  
  .skeleton-card {
    height: 120px;
    margin-bottom: var(--space-4);
  }
}

/* ============================================================================
   Mobile Modal Adjustments
   ============================================================================ */

@media (max-width: 768px) {
  .modal {
    max-width: 95% !important;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  /* Full-screen modals on mobile */
  .modal-fullscreen-mobile {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
  }
}

/* ============================================================================
   Haptic Feedback Class
   ============================================================================ */

.haptic-feedback {
  /* This class is used by JS to trigger haptic feedback on supported devices */
  /* No CSS needed, just a marker class */
}

/* ============================================================================
   Mobile Performance Optimizations
   ============================================================================ */

@media (max-width: 768px) {
  /* Reduce animations on mobile for better performance */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
  
  /* Use hardware acceleration for smoother animations */
  .card,
  .btn,
  .mobile-nav-item,
  .swipeable-card {
    will-change: transform;
  }
}