/* ═══════════════════════════════════════════════════════════
   Campus Market — Global Responsive Styles
   Injected on every page for 100% mobile compatibility
   ═══════════════════════════════════════════════════════════ */

/* ── Base resets ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* ── Typography scaling ──────────────────────────────────── */
@media (max-width: 480px) {
  h1 { font-size: clamp(1.4rem, 6vw, 2.2rem) !important; }
  h2 { font-size: clamp(1.1rem, 5vw, 1.6rem) !important; }
  h3 { font-size: clamp(1rem, 4vw, 1.3rem) !important; }
  p, li, td, th, label, input, select, textarea, button {
    font-size: clamp(.82rem, 3.5vw, 1rem) !important;
  }
}

/* ── Navigation ──────────────────────────────────────────── */
.nav-inner {
  padding: 0 1rem !important;
  gap: .35rem !important;
}

@media (max-width: 600px) {
  .nav-links { display: none !important; }
  .hamburger-btn { display: flex !important; }
  .nav-logo { font-size: 1.1rem !important; }
}

/* ── Admin sidebar → bottom nav on mobile ────────────────── */
@media (max-width: 768px) {
  .admin-layout {
    flex-direction: column !important;
  }
  .admin-sidebar {
    width: 100% !important;
    height: auto !important;
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .35rem !important;
    padding: .6rem !important;
    border-right: none !important;
    border-bottom: 1px solid var(--card-border, #222) !important;
    overflow-y: visible !important;
  }
  .admin-sidebar .sidebar-title { display: none !important; }
  .admin-sidebar a {
    flex: 1 1 auto !important;
    text-align: center !important;
    padding: .45rem .5rem !important;
    font-size: .75rem !important;
    border-radius: .5rem !important;
    white-space: nowrap !important;
  }
  .admin-sidebar a span { display: none !important; }
  .admin-main { padding: 1rem !important; }
}

/* ── Tables → horizontal scroll ─────────────────────────── */
.tbl-wrap, .table-wrap, [class*="table-container"] {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
table {
  width: 100% !important;
  min-width: 520px !important;
}

@media (max-width: 600px) {
  th, td {
    padding: .45rem .6rem !important;
    font-size: .78rem !important;
    white-space: nowrap !important;
  }
}

/* ── Stats / bento grids ─────────────────────────────────── */
@media (max-width: 700px) {
  .stats-grid, .bento-grid, .cards-grid, .dash-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: .75rem !important;
  }
}
@media (max-width: 420px) {
  .stats-grid, .bento-grid, .cards-grid, .dash-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Product / listing grids ─────────────────────────────── */
@media (max-width: 700px) {
  .product-grid, .listing-grid, .items-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: .75rem !important;
  }
}
@media (max-width: 420px) {
  .product-grid, .listing-grid, .items-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Forms ───────────────────────────────────────────────── */
.form-control, input, select, textarea {
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 500px) {
  .auth-card, .form-card, .card {
    padding: 1.25rem 1rem !important;
    margin: 0 .5rem !important;
    border-radius: 1rem !important;
  }
  .form-row { flex-direction: column !important; }
  .form-row > * { width: 100% !important; }
}

/* ── Auth pages (register/login) ─────────────────────────── */
.auth-page, .auth-wrap {
  padding: 1rem !important;
  min-height: 100dvh !important;
}
.auth-card {
  width: 100% !important;
  max-width: 440px !important;
}

/* Role selector pills on register */
@media (max-width: 420px) {
  .role-row, .role-selector {
    flex-direction: column !important;
    gap: .5rem !important;
  }
  .role-option { width: 100% !important; }
}

/* ── MODAL RULES REMOVED - Causing conflicts with terms modal ───────────────── */

/* ── Chat page ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .chat-layout {
    flex-direction: column !important;
    height: auto !important;
  }
  .chat-sidebar {
    width: 100% !important;
    height: 220px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--card-border, #222) !important;
  }
  .chat-main {
    height: calc(100dvh - 280px) !important;
  }
}

/* ── Product detail ──────────────────────────────────────── */
@media (max-width: 640px) {
  .product-detail-grid, .detail-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .product-gallery, .product-images {
    height: 240px !important;
  }
}

/* ── Marketplace filter sidebar ──────────────────────────── */
@media (max-width: 768px) {
  .market-layout, .marketplace-layout {
    flex-direction: column !important;
  }
  .filter-sidebar, .filters-panel {
    width: 100% !important;
    position: static !important;
    border-right: none !important;
    border-bottom: 1px solid var(--card-border, #222) !important;
    padding-bottom: 1rem !important;
  }
}

/* ── Seller/Buyer dashboard ──────────────────────────────── */
@media (max-width: 640px) {
  .dash-wrap {
    padding: .75rem !important;
  }
  .dash-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .5rem !important;
  }
  .dash-actions {
    width: 100% !important;
    display: flex !important;
    gap: .5rem !important;
    flex-wrap: wrap !important;
  }
  .dash-actions .btn, .dash-actions button {
    flex: 1 1 auto !important;
    text-align: center !important;
  }
}

/* ── Sell item / profile page ────────────────────────────── */
@media (max-width: 640px) {
  .page-wrap {
    padding: 1rem .75rem !important;
  }
  .profile-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1rem !important;
  }
  .profile-actions {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: .5rem !important;
  }
}

/* ── Orders page ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .order-card {
    padding: .875rem !important;
  }
  .order-meta {
    flex-direction: column !important;
    gap: .35rem !important;
  }
  .order-actions {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: .4rem !important;
  }
}

/* ── Cart & payment ──────────────────────────────────────── */
@media (max-width: 640px) {
  .cart-layout, .payment-layout {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  .cart-sidebar, .payment-summary {
    width: 100% !important;
  }
  .cart-item {
    flex-wrap: wrap !important;
    gap: .5rem !important;
  }
}

/* ── Footer ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
  }
  .footer-brand { grid-column: 1 / -1 !important; }
}

/* ── Utility: hide overflow globally ─────────────────────── */
.page-wrap, .dash-wrap, .auth-wrap, .market-wrap,
.admin-main, .main-content, main {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* ── Buttons full-width on tiny screens ──────────────────── */
@media (max-width: 380px) {
  .btn-submit, .btn-cta, .btn-primary {
    width: 100% !important;
  }
}

/* ── Smooth touch scrolling everywhere ───────────────────── */
* { -webkit-overflow-scrolling: touch; }

/* ── Safe area for notch phones ──────────────────────────── */
body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.navbar, nav {
  padding-left: max(1rem, env(safe-area-inset-left)) !important;
  padding-right: max(1rem, env(safe-area-inset-right)) !important;
}