.touch-target {
  min-height: 44px;
  min-width: 44px;
}

.horizontal-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

@media (max-width: 380px) {
  .aov-value {
    font-size: 1.125rem;
  }
}

@media (max-width: 640px) {
  .chart-bar {
    transition: width 0.5s ease-out;
  }
  
  .activity-item {
    transition: background-color 0.2s ease;
  }
}

.mobile-text-wrap {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (max-width: 640px) {
  .compact-spacing {
    gap: 0.5rem;
  }
  
  .compact-padding {
    padding: 0.75rem;
  }
}

@keyframes skeleton {
  0% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.4;
  }
}

.skeleton {
  animation: skeleton 1.5s ease-in-out infinite;
}

@media (min-width: 1024px) {
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(51, 65, 85, 0.3);
    border-radius: 3px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.3);
    border-radius: 3px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.5);
  }
}

.focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.5);
  outline-offset: 2px;
}

@media (hover: hover) {
  .hover-effect:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}

@media (max-width: 640px) {
  .mobile-contrast {
    color: rgba(255, 255, 255, 0.9);
  }
  
  .mobile-contrast-secondary {
    color: rgba(255, 255, 255, 0.7);
  }
}