/* ============================================================
   LivestockX — shared mobile / responsive stylesheet
   Loaded AFTER each page's inline <style>, so equal-specificity
   rules here win on small screens. Desktop is untouched.
   Tiers: <=840px (tablet/phone) and <=520px (small phone).
   ============================================================ */

@media (max-width: 840px) {

  /* ── Navigation (all pages: public <nav> + app .top-nav) ── */
  nav, .top-nav {
    flex-wrap: wrap;
    height: auto !important;
    padding: 10px 16px !important;
    row-gap: 6px;
  }
  .nav-links {
    position: static !important;
    transform: none !important;
    order: 3;
    width: 100%;
    height: auto !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 1.25rem !important;
    padding: 4px 0 8px;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a, .nav-links li a { white-space: nowrap; font-size: 13px; }
  .nav-links li { height: auto; }
  .nav-links li.active::after { bottom: -4px; }
  .nav-actions { margin-left: auto; }
  .nav-actions .btn-primary { padding: 8px 14px; font-size: 13px; }

  /* ── Generic content safety ── */
  body { overflow-x: hidden; }
  img, svg, video { max-width: 100%; }
  input, select, textarea { min-width: 0; max-width: 100%; }
  .search-bar { margin: 0 12px; }
  .search-bar input { min-width: 0; }
  .stats-bar { flex-wrap: wrap; gap: 14px; justify-content: center; }
  .form-card { max-width: 100%; }
  .stats-bar { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .layout > *, .main-layout > *, .page-wrap > *, .inbox-wrap > *,
  .summary-row > *, .listings-row > *, .listing-grid > *, .hero-stats-bar > * { min-width: 0; }
  .logo-name-img, .nav-logo-name-img { height: 15px !important; }
  .logo-icon, .nav-logo-img { width: 32px !important; height: 32px !important; }
  nav .logo, .nav-logo { gap: 8px !important; }
  .section-card table, .table-card table, main table, .content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Footers (shared 4-col grid pattern) ── */
  .footer-grid, .footer-inner, footer .footer-grid {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: 1.6rem !important;
  }

  /* ── index.html (homepage) ── */
  .hero-content { padding: 90px 20px 40px; }
  .hero h1 { font-size: 34px !important; line-height: 1.15; }
  .hero-stats-bar { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 14px; }
  .feature-split, .split-section { grid-template-columns: minmax(0,1fr) !important; }
  .listings-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 12px; }
  .trust-bar-inner { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 20px; }
  .cta-btns { flex-wrap: wrap; }
  .hero-ctas { flex-wrap: wrap; gap: 10px; }
  .hero p, .hero-sub, .hero-content p { max-width: 100% !important; }
  .hero-content > * { max-width: 100%; }

  /* ── livestockx.html (marketplace) ── */
  .hero { padding-left: 0; padding-right: 0; }
  .hero-visual, .hero-right, .hero-img { display: none; }
  .main-layout { grid-template-columns: minmax(0,1fr) !important; }
  .sidebar { width: auto !important; }
  .listing-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 12px !important; }

  /* ── live-auctions.html ── */
  .auction-grid { grid-template-columns: minmax(0,1fr) !important; }
  .auction-card { grid-column: auto !important; }
  .auction-card > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .hero-stats { flex-wrap: wrap; }

  /* ── sellers.html ── */
  .page-wrap { grid-template-columns: minmax(0,1fr) !important; }
  .seller-list { max-height: 45vh; overflow-y: auto; position: static !important; }
  .dp-stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .dp-listings { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }

  /* ── app-listing.html (detail) ── */
  .layout { grid-template-columns: minmax(0,1fr) !important; }
  .bid-panel, .right-panel { position: static !important; }
  .breadcrumb { flex-wrap: wrap; }

  /* ── app-profile.html ── */
  /* .layout collapse covered above; sidebar stacks on top */
  .sidebar { position: static !important; }
  .stats-grid, .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .bids-grid { grid-template-columns: minmax(0,1fr) !important; }

  /* ── app-transactions.html ── */
  .summary-row { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .filter-bar { flex-wrap: wrap; gap: 8px; }
  .tab-btn { font-size: 12px; padding: 8px 10px; }
  .pay-modal { width: calc(100vw - 32px) !important; max-width: 440px; }
  .pay-row-split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }

  /* ── app-inbox.html ── */
  .inbox-wrap { grid-template-columns: minmax(0,1fr) !important; }
  .message-list { max-height: 40vh; overflow-y: auto; }

  /* ── app-order.html ── */
  /* .layout collapse covered above */
  .order-card-inner { grid-template-columns: minmax(0,1fr) !important; }

  /* ── app-receipt.html ── */
  .receipt-columns, .receipt-grid { grid-template-columns: minmax(0,1fr) !important; }
  .receipt-banner { flex-wrap: wrap; gap: 12px; }

  /* ── app-list-bull.html (form) ── */
  .form-row, .form-row.thirds { grid-template-columns: minmax(0,1fr) !important; }
  .type-toggle { grid-template-columns: minmax(0,1fr) !important; }
  .photo-grid, #photo-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .submit-bar { flex-wrap: wrap; gap: 10px; }

  /* ── Modals (bid / buy-now on app-listing) ── */
  .bid-modal, .buynow-modal { width: calc(100vw - 32px) !important; }
}

@media (max-width: 520px) {
  /* Single-column card grids on small phones */
  .listings-row { grid-template-columns: minmax(0,1fr) !important; }
  .listing-grid { grid-template-columns: minmax(0,1fr) !important; }
  .dp-listings { grid-template-columns: minmax(0,1fr) !important; }
  .summary-row { grid-template-columns: minmax(0,1fr) !important; }
  .hero h1 { font-size: 28px !important; }
  .hero-stats-bar { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .trust-bar-inner { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  .footer-grid, .footer-inner { grid-template-columns: minmax(0,1fr) !important; }
  .page-title, .page-heading { font-size: 24px !important; }
}