frontend/src/css/components/utilities.css

/* Utility Classes for Responsive Design */
/* Responsive visibility */
@media (max-width: 639px) {
  .hidden-xs { display: none !important; }
}

@media (min-width: 640px) and (max-width: 767px) {
  .hidden-sm { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hidden-md { display: none !important; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .hidden-lg { display: none !important; }
}

@media (min-width: 1280px) and (max-width: 1535px) {
  .hidden-xl { display: none !important; }
}

@media (min-width: 1536px) {
  .hidden-2xl { display: none !important; }
}

/* Responsive text truncation */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-truncate-xs {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-xs);
}

.text-truncate-sm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-sm);
}

.text-truncate-md {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-base);
}

.text-truncate-lg {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-lg);
}

.text-truncate-xl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-xl);
}

/* Responsive spacing for mobile */
@media (max-width: 639px) {
  .mobile-spacing-xs { gap: var(--spacing-2); }
  .mobile-spacing-sm { gap: var(--spacing-3); }
  .mobile-spacing-md { gap: var(--spacing-4); }
  .mobile-spacing-lg { gap: var(--spacing-6); }
  .mobile-spacing-xl { gap: var(--spacing-8); }
  
  .mobile-p-xs { padding: var(--spacing-2); }
  .mobile-p-sm { padding: var(--spacing-3); }
  .mobile-p-md { padding: var(--spacing-4); }
  .mobile-p-lg { padding: var(--spacing-6); }
  .mobile-p-xl { padding: var(--spacing-8); }
  
  .mobile-m-xs { margin: var(--spacing-2); }
  .mobile-m-sm { margin: var(--spacing-3); }
  .mobile-m-md { margin: var(--spacing-4); }
  .mobile-m-lg { margin: var(--spacing-6); }
  .mobile-m-xl { margin: var(--spacing-8); }
}

/* Touch-friendly interactive elements */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .nav-item,
  .sidebar-item,
  .card {
    -webkit-tap-highlight-color: transparent;
  }
  
  .btn:active,
  .nav-item:active,
  .sidebar-item:active,
  .card:active {
    transform: scale(0.98);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .card,
  .header,
  .sidebar,
  .modal {
    border: 2px solid currentColor;
  }
  
  .btn {
    border: 2px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}