frontend/src/css/responsive.css

/* Mobile-First Responsive Design System */

/* Container Classes */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
  }
}

@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
    padding-left: var(--spacing-10);
    padding-right: var(--spacing-10);
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
    padding-left: var(--spacing-12);
    padding-right: var(--spacing-12);
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: var(--container-2xl);
    padding-left: var(--spacing-16);
    padding-right: var(--spacing-16);
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: var(--container-3xl);
    padding-left: var(--spacing-20);
    padding-right: var(--spacing-20);
  }
}

/* Grid System */
.grid {
  display: grid;
  gap: var(--spacing-4);
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1536px) {
  .grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Flexbox Utilities */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

/* Spacing Responsive Utilities */
/* Padding */
.p-xs { padding: var(--spacing-1); }
.p-sm { padding: var(--spacing-2); }
.p-md { padding: var(--spacing-4); }
.p-lg { padding: var(--spacing-6); }
.p-xl { padding: var(--spacing-8); }
.p-2xl { padding: var(--spacing-12); }

.p-xs-y { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
.p-sm-y { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.p-md-y { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.p-lg-y { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }
.p-xl-y { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); }
.p-2xl-y { padding-top: var(--spacing-12); padding-bottom: var(--spacing-12); }

.p-xs-x { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
.p-sm-x { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
.p-md-x { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.p-lg-x { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
.p-xl-x { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }
.p-2xl-x { padding-left: var(--spacing-12); padding-right: var(--spacing-12); }

/* Margin */
.m-xs { margin: var(--spacing-1); }
.m-sm { margin: var(--spacing-2); }
.m-md { margin: var(--spacing-4); }
.m-lg { margin: var(--spacing-6); }
.m-xl { margin: var(--spacing-8); }
.m-2xl { margin: var(--spacing-12); }

.m-xs-y { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); }
.m-sm-y { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
.m-md-y { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
.m-lg-y { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }
.m-xl-y { margin-top: var(--spacing-8); margin-bottom: var(--spacing-8); }
.m-2xl-y { margin-top: var(--spacing-12); margin-bottom: var(--spacing-12); }

.m-xs-x { margin-left: var(--spacing-1); margin-right: var(--spacing-1); }
.m-sm-x { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }
.m-md-x { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }
.m-lg-x { margin-left: var(--spacing-6); margin-right: var(--spacing-6); }
.m-xl-x { margin-left: var(--spacing-8); margin-right: var(--spacing-8); }
.m-2xl-x { margin-left: var(--spacing-12); margin-right: var(--spacing-12); }

/* Responsive Spacing */
@media (min-width: 640px) {
  .sm\:p-xs { padding: var(--spacing-1); }
  .sm\:p-sm { padding: var(--spacing-2); }
  .sm\:p-md { padding: var(--spacing-4); }
  .sm\:p-lg { padding: var(--spacing-6); }
  .sm\:p-xl { padding: var(--spacing-8); }
  .sm\:p-2xl { padding: var(--spacing-12); }
  
  .sm\:m-xs { margin: var(--spacing-1); }
  .sm\:m-sm { margin: var(--spacing-2); }
  .sm\:m-md { margin: var(--spacing-4); }
  .sm\:m-lg { margin: var(--spacing-6); }
  .sm\:m-xl { margin: var(--spacing-8); }
  .sm\:m-2xl { margin: var(--spacing-12); }
}

@media (min-width: 768px) {
  .md\:p-xs { padding: var(--spacing-1); }
  .md\:p-sm { padding: var(--spacing-2); }
  .md\:p-md { padding: var(--spacing-4); }
  .md\:p-lg { padding: var(--spacing-6); }
  .md\:p-xl { padding: var(--spacing-8); }
  .md\:p-2xl { padding: var(--spacing-12); }
  
  .md\:m-xs { margin: var(--spacing-1); }
  .md\:m-sm { margin: var(--spacing-2); }
  .md\:m-md { margin: var(--spacing-4); }
  .md\:m-lg { margin: var(--spacing-6); }
  .md\:m-xl { margin: var(--spacing-8); }
  .md\:m-2xl { margin: var(--spacing-12); }
}

@media (min-width: 1024px) {
  .lg\:p-xs { padding: var(--spacing-1); }
  .lg\:p-sm { padding: var(--spacing-2); }
  .lg\:p-md { padding: var(--spacing-4); }
  .lg\:p-lg { padding: var(--spacing-6); }
  .lg\:p-xl { padding: var(--spacing-8); }
  .lg\:p-2xl { padding: var(--spacing-12); }
  
  .lg\:m-xs { margin: var(--spacing-1); }
  .lg\:m-sm { margin: var(--spacing-2); }
  .lg\:m-md { margin: var(--spacing-4); }
  .lg\:m-lg { margin: var(--spacing-6); }
  .lg\:m-xl { margin: var(--spacing-8); }
  .lg\:m-2xl { margin: var(--spacing-12); }
}

@media (min-width: 1280px) {
  .xl\:p-xs { padding: var(--spacing-1); }
  .xl\:p-sm { padding: var(--spacing-2); }
  .xl\:p-md { padding: var(--spacing-4); }
  .xl\:p-lg { padding: var(--spacing-6); }
  .xl\:p-xl { padding: var(--spacing-8); }
  .xl\:p-2xl { padding: var(--spacing-12); }
  
  .xl\:m-xs { margin: var(--spacing-1); }
  .xl\:m-sm { margin: var(--spacing-2); }
  .xl\:m-md { margin: var(--spacing-4); }
  .xl\:m-lg { margin: var(--spacing-6); }
  .xl\:m-xl { margin: var(--spacing-8); }
  .xl\:m-2xl { margin: var(--spacing-12); }
}

@media (min-width: 1536px) {
  .xxl\:p-xs { padding: var(--spacing-1); }
  .xxl\:p-sm { padding: var(--spacing-2); }
  .xxl\:p-md { padding: var(--spacing-4); }
  .xxl\:p-lg { padding: var(--spacing-6); }
  .xxl\:p-xl { padding: var(--spacing-8); }
  .xxl\:p-2xl { padding: var(--spacing-12); }
  
  .xxl\:m-xs { margin: var(--spacing-1); }
  .xxl\:m-sm { margin: var(--spacing-2); }
  .xxl\:m-md { margin: var(--spacing-4); }
  .xxl\:m-lg { margin: var(--spacing-6); }
  .xxl\:m-xl { margin: var(--spacing-8); }
  .xxl\:m-2xl { margin: var(--spacing-12); }
}

@media (min-width: 1920px) {
  .xxxl\:p-xs { padding: var(--spacing-1); }
  .xxxl\:p-sm { padding: var(--spacing-2); }
  .xxxl\:p-md { padding: var(--spacing-4); }
  .xxxl\:p-lg { padding: var(--spacing-6); }
  .xxxl\:p-xl { padding: var(--spacing-8); }
  .xxxl\:p-2xl { padding: var(--spacing-12); }
  
  .xxxl\:m-xs { margin: var(--spacing-1); }
  .xxxl\:m-sm { margin: var(--spacing-2); }
  .xxxl\:m-md { margin: var(--spacing-4); }
  .xxxl\:m-lg { margin: var(--spacing-6); }
  .xxxl\:m-xl { margin: var(--spacing-8); }
  .xxxl\:m-2xl { margin: var(--spacing-12); }
}

/* Display Utilities */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none; }

@media (min-width: 640px) {
  .sm\:block { display: block; }
  .sm\:inline { display: inline; }
  .sm\:inline-block { display: inline-block; }
  .sm\:hidden { display: none; }
}

@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:inline { display: inline; }
  .md\:inline-block { display: inline-block; }
  .md\:hidden { display: none; }
}

@media (min-width: 1024px) {
  .lg\:block { display: block; }
  .lg\:inline { display: inline; }
  .lg\:inline-block { display: inline-block; }
  .lg\:hidden { display: none; }
}

@media (min-width: 1280px) {
  .xl\:block { display: block; }
  .xl\:inline { display: inline; }
  .xl\:inline-block { display: inline-block; }
  .xl\:hidden { display: none; }
}

@media (min-width: 1536px) {
  .xxl\:block { display: block; }
  .xxl\:inline { display: inline; }
  .xxl\:inline-block { display: inline-block; }
  .xxl\:hidden { display: none; }
}

@media (min-width: 1920px) {
  .xxxl\:block { display: block; }
  .xxxl\:inline { display: inline; }
  .xxxl\:inline-block { display: inline-block; }
  .xxxl\:hidden { display: none; }
}

/* Width and Height Utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.h-auto { height: auto; }

@media (min-width: 640px) {
  .sm\:w-full { width: 100%; }
  .sm\:w-auto { width: auto; }
  .sm\:h-full { height: 100%; }
  .sm\:h-auto { height: auto; }
}

@media (min-width: 768px) {
  .md\:w-full { width: 100%; }
  .md\:w-auto { width: auto; }
  .md\:h-full { height: 100%; }
  .md\:h-auto { height: auto; }
}

@media (min-width: 1024px) {
  .lg\:w-full { width: 100%; }
  .lg\:w-auto { width: auto; }
  .lg\:h-full { height: 100%; }
  .lg\:h-auto { height: auto; }
}

@media (min-width: 1280px) {
  .xl\:w-full { width: 100%; }
  .xl\:w-auto { width: auto; }
  .xl\:h-full { height: 100%; }
  .xl\:h-auto { height: auto; }
}

@media (min-width: 1536px) {
  .xxl\:w-full { width: 100%; }
  .xxl\:w-auto { width: auto; }
  .xxl\:h-full { height: 100%; }
  .xxl\:h-auto { height: auto; }
}

@media (min-width: 1920px) {
  .xxxl\:w-full { width: 100%; }
  .xxxl\:w-auto { width: auto; }
  .xxxl\:h-full { height: 100%; }
  .xxxl\:h-auto { height: auto; }
}

/* Text Responsive Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

@media (min-width: 640px) {
  .sm\:text-center { text-align: center; }
  .sm\:text-left { text-align: left; }
  .sm\:text-right { text-align: right; }
}

@media (min-width: 768px) {
  .md\:text-center { text-align: center; }
  .md\:text-left { text-align: left; }
  .md\:text-right { text-align: right; }
}

@media (min-width: 1024px) {
  .lg\:text-center { text-align: center; }
  .lg\:text-left { text-align: left; }
  .lg\:text-right { text-align: right; }
}

@media (min-width: 1280px) {
  .xl\:text-center { text-align: center; }
  .xl\:text-left { text-align: left; }
  .xl\:text-right { text-align: right; }
}

/* Accessibility-Focused Responsive Design */

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

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

/* Focus visible for keyboard navigation */
@media (hover: hover) and (pointer: fine) {
  .btn:focus-visible,
  .clickable:focus-visible,
  .nav-link:focus-visible,
  .form-input:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --border-color: #404040;
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  .print-break-before {
    page-break-before: always;
  }
  
  .print-break-inside-avoid {
    page-break-inside: avoid;
  }
}

/* Mobile-first responsive breakpoints */
@media (max-width: 575.98px) {
  /* Mobile styles */
  .mobile-stack {
    flex-direction: column;
  }
  
  .mobile-full-width {
    width: 100%;
  }
  
  .mobile-text-center {
    text-align: center;
  }
  
  /* Touch-friendly target sizes for mobile */
  .btn,
  .clickable,
  .nav-link,
  .form-input {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
  }
  
  /* Mobile navigation improvements */
  .mobile-menu {
    touch-action: manipulation;
  }
  
  .mobile-menu button {
    min-height: 48px;
    min-width: 48px;
  }
  
  /* Mobile text readability */
  .mobile-readable {
    font-size: 16px;
    line-height: 1.5;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  /* Small tablet styles */
  .mobile-stack {
    flex-direction: row;
  }
}

/* Touch-friendly target sizes */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .clickable,
  .nav-link,
  .form-input {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
  }
  
  /* Prevent zoom on focus */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea {
    font-size: 16px;
  }
}

/* Accessibility improvements */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip to content link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary-color);
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

/* Fluid typography for better readability */
.text-fluid {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.5;
}

.text-fluid-lg {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  line-height: 1.6;
}

.text-fluid-xl {
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.7;
}

.text-fluid-2xl {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.8;
}

.text-fluid-3xl {
  font-size: clamp(3rem, 6vw, 4rem);
  line-height: 1.9;
}

/* Responsive touch targets */
@media (max-width: 768px) {
  .btn-large {
    min-height: 48px;
    min-width: 48px;
    padding: 14px 20px;
    font-size: 16px;
  }
  
  .btn-group .btn {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Mobile-first responsive text sizes */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }

@media (min-width: 640px) {
  .sm\:text-xs { font-size: 0.75rem; }
  .sm\:text-sm { font-size: 0.875rem; }
  .sm\:text-base { font-size: 1rem; }
  .sm\:text-lg { font-size: 1.125rem; }
  .sm\:text-xl { font-size: 1.25rem; }
  .sm\:text-2xl { font-size: 1.5rem; }
  .sm\:text-3xl { font-size: 1.875rem; }
}

@media (min-width: 768px) {
  .md\:text-xs { font-size: 0.75rem; }
  .md\:text-sm { font-size: 0.875rem; }
  .md\:text-base { font-size: 1rem; }
  .md\:text-lg { font-size: 1.125rem; }
  .md\:text-xl { font-size: 1.25rem; }
  .md\:text-2xl { font-size: 1.5rem; }
  .md\:text-3xl { font-size: 1.875rem; }
}

@media (min-width: 1024px) {
  .lg\:text-xs { font-size: 0.75rem; }
  .lg\:text-sm { font-size: 0.875rem; }
  .lg\:text-base { font-size: 1rem; }
  .lg\:text-lg { font-size: 1.125rem; }
  .lg\:text-xl { font-size: 1.25rem; }
  .lg\:text-2xl { font-size: 1.5rem; }
  .lg\:text-3xl { font-size: 1.875rem; }
}

@media (min-width: 1280px) {
  .xl\:text-xs { font-size: 0.75rem; }
  .xl\:text-sm { font-size: 0.875rem; }
  .xl\:text-base { font-size: 1rem; }
  .xl\:text-lg { font-size: 1.125rem; }
  .xl\:text-xl { font-size: 1.25rem; }
  .xl\:text-2xl { font-size: 1.5rem; }
  .xl\:text-3xl { font-size: 1.875rem; }
}

/* Mobile-first responsive line heights */
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }

@media (min-width: 640px) {
  .sm\:leading-tight { line-height: 1.25; }
  .sm\:leading-snug { line-height: 1.375; }
  .sm\:leading-normal { line-height: 1.5; }
  .sm\:leading-relaxed { line-height: 1.625; }
  .sm\:leading-loose { line-height: 2; }
}

@media (min-width: 768px) {
  .md\:leading-tight { line-height: 1.25; }
  .md\:leading-snug { line-height: 1.375; }
  .md\:leading-normal { line-height: 1.5; }
  .md\:leading-relaxed { line-height: 1.625; }
  .md\:leading-loose { line-height: 2; }
}

@media (min-width: 1024px) {
  .lg\:leading-tight { line-height: 1.25; }
  .lg\:leading-snug { line-height: 1.375; }
  .lg\:leading-normal { line-height: 1.5; }
  .lg\:leading-relaxed { line-height: 1.625; }
  .lg\:leading-loose { line-height: 2; }
}

@media (min-width: 1280px) {
  .xl\:leading-tight { line-height: 1.25; }
  .xl\:leading-snug { line-height: 1.375; }
  .xl\:leading-normal { line-height: 1.5; }
  .xl\:leading-relaxed { line-height: 1.625; }
  .xl\:leading-loose { line-height: 2; }
}

@media (min-width: 1536px) {
  .xxl\:text-center { text-align: center; }
  .xxl\:text-left { text-align: left; }
  .xxl\:text-right { text-align: right; }
}

@media (min-width: 1920px) {
  .xxxl\:text-center { text-align: center; }
  .xxxl\:text-left { text-align: left; }
  .xxxl\:text-right { text-align: right; }
}

/* Mobile Navigation Utilities */
.mobile-menu {
  display: none;
}

.mobile-menu.active {
  display: block;
}

@media (max-width: 767px) {
  .desktop-menu {
    display: none;
  }
  
  .mobile-menu {
    display: block;
  }
}

/* Touch-Friendly Utilities */
.touch-manipulation {
  touch-action: manipulation;
}

/* Performance Optimizations for Mobile */
@media (max-width: 767px) {
  .mobile-optimized {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
  
  .mobile-reduced-motion {
    animation-duration: 0.3s !important;
    transition-duration: 0.3s !important;
  }

  .mobile-optimized-animation {
    animation-duration: 0.2s !important;
    transition-duration: 0.2s !important;
  }

  .mobile-accelerated {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .touch-optimized {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
  }

  .touch-optimized:active {
    transform: scale(0.98);
  }

  /* Prevent text selection on mobile */
  .no-select-mobile {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  /* Improve scrolling performance */
  .mobile-scroll-optimized {
    -webkit-overflow-scrolling: touch;
    
  }
}

/* High DPI Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .high-dpi {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}