/**
 * IdeaDunes Responsive Design Utilities
 * Mobile-first breakpoints and responsive components
 */

:root {
  --breakpoint-xs: 320px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1366px;
  --breakpoint-xxl: 1920px;
  --breakpoint-4k: 2560px;
  --breakpoint-5k: 3440px;
  --breakpoint-6k: 3840px;
  --breakpoint-8k: 5120px;
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --touch-target-min: 3rem; /* 48px */
}

/* Mobile-first utilities */
.flex-stack-mobile { display: flex; flex-direction: column; gap: var(--space-md); }

@media (min-width: 768px) { 
  .flex-stack-mobile { 
    flex-direction: row;
  }
}

.hide-mobile { display: none; }

@media (min-width: 768px) { .hide-mobile { display: block; } }

.show-mobile { display: block; }

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

.p-responsive { padding: var(--space-sm); }

@media (min-width: 768px) { .p-responsive { padding: var(--space-md); } }

@media (min-width: 1024px) { .p-responsive { padding: var(--space-lg); } }

.text-responsive { font-size: 0.875rem; line-height: 1.5; }

@media (min-width: 768px) { .text-responsive { font-size: 0.9375rem; } }

@media (min-width: 1024px) { .text-responsive { font-size: 1rem; } }

.grid-responsive { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }

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

@media (min-width: 1024px) { .grid-responsive { grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 1366px) { .grid-responsive { grid-template-columns: repeat(4, 1fr); } }

/* Table card view for mobile */
@media (max-width: 767px) {
  table { display: block; border: none; }
  thead { display: none; }
  tbody { display: block; }
  tr { display: block; border: 1px solid #ddd; border-radius: 8px; padding: var(--space-md); margin-bottom: var(--space-md); }
  td { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border: none; }
  td::before { content: attr(data-label); font-weight: 700; margin-right: var(--space-md); }
}

/* Footer responsive grid */
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }

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

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

/* Header utilities responsive */
.header-collapse-btn { display: block; min-width: var(--touch-target-min); min-height: var(--touch-target-min); }

@media (min-width: 768px) { .header-collapse-btn { display: none; } }

/* Responsive sidebar */
@media (max-width: 767px) {
  .sidebar {
    position: fixed;
    left: -15.625rem;  /* 250px */
    top: 0;
    width: 15.625rem;   /* 250px */
    height: 100vh;
    z-index: 999;
    transition: left 0.3s ease;
  }
  .sidebar.open { left: 0; }
}

/* iPad Pro and large screens */
@media (min-width: 1366px) {
  .container { max-width: 1340px; }
  .grid-responsive { grid-template-columns: repeat(5, 1fr); }
}

/* Ultra-Wide Breakpoints */
@media (min-width: 2560px) {
  .container { max-width: 2400px; }
}

@media (min-width: 3440px) {
  .container { max-width: 3200px; }
}

@media (min-width: 3840px) {
  .container { max-width: 3600px; }
}

@media (min-width: 5120px) {
  .container { max-width: 4800px; }
}

/* Print media */
@media print {
  .no-print { display: none; }
  body { background: white; }
  a { text-decoration: underline; }
}

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