/* =========================================
   RESPONSIVE DESIGN
   Mobile-first breakpoints
   ========================================= */

/* sm: 640px, md: 768px, lg: 1024px, xl: 1280px */

/* Table responsive wrapper */
.table-responsive {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: #ffffff;
}

/* ── Base: Mobile first ── */
@media (max-width: 1023px) {
  /* Sidebar becomes overlay on tablet/mobile */
  #sidebar {
    transform: translateX(-100%);
    z-index: 200;
    width: 260px;
    box-shadow: var(--shadow-lg);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  #sidebar.open {
    transform: translateX(0);
  }
  .sidebar-overlay.open {
    display: block;
  }

  /* Main wrapper takes full width */
  main {
    margin-left: 0 !important;
  }
  header {
    left: 0 !important;
  }
  .content-area {
    margin-left: 0 !important;
    padding: 1.25rem;
  }

  /* Adjust stats grid */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Full-width cards */
  .two-col {
    grid-template-columns: 1fr;
  }
  .cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Small screens (phones) ── */
@media (max-width: 639px) {
  /* Stats grid single column */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Content padding reduced */
  .content-area {
    padding: 1rem;
  }

  /* QR code smaller */
  .qr-image, .qr-skeleton {
    width: 180px;
    height: 180px;
  }

  /* Hero adjustments */
  .hero-title {
    font-size: 2rem;
  }
  .hero-cta {
    flex-direction: column;
    align-items: center;
  }
  .hero-cta .btn {
    width: 100%;
    max-width: 280px;
  }

  /* Settings items stack */
  .settings-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .settings-item-control {
    width: 100%;
    min-width: unset;
  }

  /* Modal full width */
  .modal {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    margin: 0;
  }
  .modal-overlay {
    align-items: flex-end;
  }

  /* Topbar compact */
  header {
    padding: 0 1rem;
  }
  .topbar-status-pill {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
  }

  /* Chips wrap */
  .chips-row {
    flex-wrap: wrap;
  }

  /* Reduce card padding */
  .card-body, .card-header {
    padding: 1rem;
  }
}

/* ── Very small screens ── */
@media (max-width: 400px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Desktop enhancements ── */
@media (min-width: 1280px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Print ── */
@media print {
  #sidebar, header, .toast-container, .modal-overlay { display: none !important; }
  main { margin-left: 0 !important; }
}