/* ============================================================
   admin-mobile.css
   Mobile-responsive layer for GOM Admin Panel ONLY.
   Loaded exclusively by admin.html (linked after its inline
   <style> block). Does not touch gom.css or any other page —
   every rule here is scoped inside a max-width media query, so
   desktop admin styling (and every non-admin page) is untouched.
   ============================================================ */

/* ---------- CRITICAL FIX: sidebar/topbar layout bug ----------
   admin.html's body{display:flex} (row, no direction set) was
   fine on desktop because .sidebar is position:fixed and drops
   out of flow — leaving only .mobile-topbar and .main as flex
   siblings. On mobile that put them side-by-side instead of
   stacked, which is why the topbar/hamburger rendered mid-page
   instead of as a sticky top bar. Stacking them fixes it. */
@media (max-width: 768px) {
  body { flex-direction: column; }
}

/* ---------- 1 & 8: Sidebar + Header polish ---------- */
@media (max-width: 768px) {
  .mobile-topbar { width: 100%; }
  .admin-toolbar { flex-wrap: wrap; row-gap: 0.5rem; }
}
@media (max-width: 340px) {
  /* Very small screens: let the overlay sidebar take a touch
     more width instead of a fixed 260px cutting close to the edge. */
  .sidebar { width: 88vw; }
}

/* ---------- 2: Dashboard toolbar / action rows ---------- */
@media (max-width: 768px) {
  /* Payouts tab filter buttons (All/Pending/Paid) had no wrap guard. */
  #tab-payouts > div.d-flex.gap-2.mb-3 { flex-wrap: wrap; }
}

/* ---------- 3: Tables — horizontal scroll stays inside the
   table, never the page ---------- */
@media (max-width: 768px) {
  html, body { max-width: 100%; }
  .main { overflow-x: hidden; }
  .table-responsive { -webkit-overflow-scrolling: touch; }
}
@media (max-width: 480px) {
  /* Approve/Reject/etc. buttons packed into a table cell were
     squeezing side-by-side on narrow phones — stack them instead. */
  .table td .btn-approve,
  .table td .btn-reject,
  .table td .btn-gom-sm { display: block; width: 100%; margin: 0 0 4px; }
  .table td .btn-approve:last-child,
  .table td .btn-reject:last-child,
  .table td .btn-gom-sm:last-child { margin-bottom: 0; }
}

/* ---------- 4 & 5: Listing review + proof-image grids ----------
   Both #listing-preview-proof-imgs (Listing Review modal) and
   #apm-proof-imgs (Coach/Booster profile modal) render thumbnails
   as width:calc(20%/25% - 6px); min-width:80px — on a 375px-wide
   modal that min-width forces 4-5 across and overflows. Scoped
   !important is needed since the width is inline (JS-generated);
   this does NOT touch the ID/Selfie 70px thumbnails elsewhere,
   which use the same .gom-lightbox-img class but aren't inside
   either of these two containers. */
@media (max-width: 768px) {
  #listing-preview-proof-imgs .gom-lightbox-img,
  #apm-proof-imgs .gom-lightbox-img {
    width: calc(33.333% - 6px) !important;
    min-width: 70px !important;
  }
}
@media (max-width: 414px) {
  #listing-preview-proof-imgs .gom-lightbox-img,
  #apm-proof-imgs .gom-lightbox-img {
    width: calc(50% - 6px) !important;
    min-width: 0 !important;
  }
}

/* ---------- 6: Admin forms — search/filter inputs go full-width
   on narrow phones instead of sitting at their 200px min-width ---------- */
@media (max-width: 480px) {
  #listings-search, #orders-search, #escrow-search,
  #banned-search, #user-search,
  #listings-status-filter, #orders-status-filter {
    width: 100%;
    min-width: 0;
  }
}

/* ---------- 7: Modals/popups — tighter margins on small phones,
   Bootstrap's own responsive modal sizing already prevents
   viewport overflow; this just reclaims a bit more usable width ---------- */
@media (max-width: 480px) {
  .modal-dialog { margin: 0.5rem auto; max-width: calc(100% - 1rem); }
}

/* ---------- 10: Additional breakpoints ---------- */

/* Tablet (769–991px): sidebar stays permanent (as on desktop) per
   the original design threshold — just trim main padding a bit. */
@media (max-width: 991.98px) and (min-width: 769px) {
  .main { padding: 1.75rem 1.5rem; }
}

/* Small tablet / large phone */
@media (max-width: 576px) {
  .page-title { font-size: 1.4rem; }
  .stat-card-num { font-size: 1.55rem; }
}

/* Mobile (iPhone 14/13/12-ish widths land here) */
@media (max-width: 414px) {
  .page-title { font-size: 1.25rem; }
  .stat-card { padding: 1rem; }
  .stat-card-num { font-size: 1.4rem; }
  .btn-approve, .btn-reject, .btn-gom-sm { font-size: 0.72rem; }
}

/* 390px (iPhone 12/13/14 standard) */
@media (max-width: 390px) {
  .main { padding: 1rem 0.85rem 5rem; }
}

/* 375px (iPhone SE/8, smaller Android) */
@media (max-width: 375px) {
  .table thead th, .table tbody td { padding: 0.5rem 0.55rem; font-size: 0.76rem; }
}

/* Very small mobile (320px) */
@media (max-width: 320px) {
  .mobile-topbar-title { font-size: 0.95rem; }
  .sb-logo { font-size: 1.1rem; padding: 1rem; }
  .main { padding: 0.85rem 0.65rem 5rem; }
  .stat-card { padding: 0.85rem; }
}