/**
 * Compay Design System — Responsive
 * Breakpoints: 320, 375, 390, 480, 768, 1024, 1280, 1440, 1920
 */

@media (max-width: 479px) {
  .container,
  .container-wide {
    width: min(100% - 1.25rem, var(--container));
  }
  .hero-content { padding: var(--space-xl) 0; }
  .kpi-card { padding: var(--space-md); }
  .kpi-card .kpi-value { font-size: 1.4rem; }
  .app-content { padding: var(--space-md); }
  .auth-card { padding: var(--space-lg); }
  .btn { white-space: normal; }
}

@media (max-width: 639px) {
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .table { min-width: 520px; }
  .brand-mark span.hide-xs { display: none; }
}

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

@media (min-width: 768px) {
  .nav-desktop { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav,
  .mobile-nav.is-open { display: none !important; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1023px) {
  .app-sidebar { box-shadow: var(--shadow-lg); }
  body.sidebar-open { overflow: hidden; }
}

@media (min-width: 1024px) {
  .app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    transform: none;
  }
  .app-overlay { display: none !important; }
  .app-shell .nav-toggle-sidebar { display: none; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

@media (min-width: 1280px) {
  :root { --container: 76rem; }
}

@media (min-width: 1440px) {
  :root { --container: 80rem; }
}

@media (min-width: 1920px) {
  :root { --container: 88rem; }
}

/* Prevent horizontal overflow on tiny screens */
html, body { overflow-x: hidden; }
img, video, iframe, svg { max-width: 100%; }

/* Form grids */
.form-grid {
  display: grid;
  gap: var(--space-lg);
}
@media (min-width: 768px) {
  .form-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
}

/* Safe touch targets */
@media (max-width: 767px) {
  .nav-link,
  .sidebar-link,
  .btn,
  .theme-toggle,
  .nav-toggle {
    min-height: 44px;
  }
}