/* ════════════════════════════════════════════════════════════════════
   maplesol-mobile.css — Global Mobile Responsive (TASK 4.1)
   ════════════════════════════════════════════════════════════════════

   Include after main stylesheets. Targets common patterns on the site
   so every page becomes touch-friendly + mobile-readable without
   per-page rewrites. Loads via <link> in pages/layout.php and
   admin/layout.php.

   Breakpoints:
     ≤ 1024 px  — tablet
     ≤  768 px  — mobile
     ≤  480 px  — small mobile

   Targets:
     • Tables → horizontal scroll wrapper
     • Admin sidebar → hamburger collapse
     • Forms → full-width inputs
     • Modals → near-fullscreen
     • Buttons → 44px tap target
     • QR display → centered, larger
   ════════════════════════════════════════════════════════════════════ */

/* ─── 1. Viewport-safe baseline ─────────────────────────────────── */
html, body { overflow-x: hidden; }
body * { max-width: 100%; }

/* ─── 2. Tablet ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .container, .container-fluid { padding-left: 14px; padding-right: 14px; }
  .g3 { grid-template-columns: 1fr 1fr !important; }
  .stat-cards { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; }
  .hof3-thrones { gap: 12px !important; }
}

/* ─── 3. Mobile (≤768px) ────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Global: smaller h1/h2 */
  h1 { font-size: 1.6rem !important; line-height: 1.2; }
  h2 { font-size: 1.3rem !important; }
  h3 { font-size: 1.1rem !important; }

  /* Tables → scrollable container.
     Wraps any naked <table> visually but the page must still wrap
     with .dt-w / overflow-x:auto for full safety.                  */
  table.adm-table,
  table.dt,
  table:not(.no-mobile-wrap) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }
  table thead, table tbody, table tr { display: table; width: 100%; table-layout: auto; }

  /* Form controls — full width + 44px touch target */
  .adm-form-control,
  input[type="text"], input[type="number"], input[type="email"],
  input[type="password"], input[type="tel"], input[type="search"],
  select, textarea {
    min-height: 44px;
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px !important;  /* prevents iOS zoom on focus */
  }
  textarea { min-height: 88px; }

  /* Buttons */
  .adm-btn, .btn, button[type="submit"], button[type="button"], .ev-btn {
    min-height: 44px;
    padding: 10px 18px !important;
    font-size: 14px;
    touch-action: manipulation;
  }
  .adm-btn-sm, .btn-sm { min-height: 36px; padding: 6px 12px !important; }

  /* Admin sidebar → hamburger collapse.
     Add a #adm-mobile-toggle button in layout.php that toggles
     .adm-sidebar.open                                              */
  .adm-sidebar {
    transform: translateX(-100%) !important;
    transition: transform .3s ease !important;
    box-shadow: 4px 0 20px rgba(0,0,0,.25);
  }
  .adm-sidebar.open { transform: translateX(0) !important; }
  .adm-main { margin-left: 0 !important; }

  /* Mobile hamburger button — auto-inject via JS in layout */
  #adm-mobile-toggle {
    display: flex !important;
    position: fixed;
    top: 14px; left: 14px;
    width: 44px; height: 44px;
    background: var(--lp-blue, #1092FF);
    color: #fff;
    border-radius: 50%;
    align-items: center; justify-content: center;
    font-size: 20px;
    border: none;
    box-shadow: 0 4px 14px rgba(16,146,255,.4);
    z-index: 200;
    cursor: pointer;
  }
  body .adm-topbar { padding-left: 70px !important; }

  /* Modals → near-fullscreen */
  .adm-modal {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 16px !important;
    max-height: 92vh !important;
    border-radius: 12px !important;
  }

  /* Grids: 2-col → 1-col, 3-col → 1-col */
  .g2, .g3, .grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .stat-cards { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .stat-card-val { font-size: 1.5rem !important; }
  .stat-card { padding: 14px !important; }

  /* QR code → centered + larger */
  .qr-display, .qr-code, [class*="promptpay-qr"], [class*="payment-qr"] {
    display: block !important;
    margin: 20px auto !important;
    max-width: 280px !important;
    width: 80% !important;
    height: auto !important;
  }

  /* Top navbar links → wrap, hide secondary */
  .navbar-collapse, .nav-links { flex-wrap: wrap; }
  .nav-link-secondary { display: none; }

  /* Hide non-essential decoration on mobile */
  .desktop-only, .hide-mobile { display: none !important; }
  .mobile-only, .show-mobile { display: block !important; }

  /* Floating chat / report buttons */
  #floatReportImg { width: 110px !important; }
  #bgm-widget { bottom: 10px !important; left: 10px !important; }
  #bgm-toggle-btn { width: 44px !important; height: 44px !important; }
  #bgm-label { display: none !important; }

  /* Stat-card / dashboard tiles */
  .adm-card { padding: 16px !important; }

  /* Card-table conversion: each <tr> becomes a stacked card.
     Apply class .card-on-mobile to <table> to opt-in.              */
  table.card-on-mobile,
  table.card-on-mobile thead,
  table.card-on-mobile tbody,
  table.card-on-mobile tr,
  table.card-on-mobile td { display: block; }
  table.card-on-mobile thead { display: none; }
  table.card-on-mobile tr {
    background: var(--lp-card, #fff);
    border-radius: 10px;
    border: 1px solid var(--lp-border, rgba(16,146,255,.12));
    margin-bottom: 10px;
    padding: 10px;
  }
  table.card-on-mobile td { border: none; padding: 6px 4px; }
  table.card-on-mobile td::before {
    content: attr(data-label) ":";
    font-weight: 700; color: var(--lp-text2, #7f8c8d);
    margin-right: 8px;
    display: inline-block; min-width: 90px;
  }
}

/* ─── 4. Small mobile (≤480px) ──────────────────────────────────── */
@media (max-width: 480px) {
  .stat-cards { grid-template-columns: 1fr !important; }
  .container, .container-fluid { padding-left: 10px; padding-right: 10px; }
  .adm-content, .container-wrap { padding: 14px 10px !important; }
  .adm-modal { width: 98vw !important; margin: 4px !important; }

  /* Throne/podium adjustments for hall of fame */
  .hof4-podium-slot { max-width: 100%; }
  .hof4-avatar { width: 90px !important; height: 90px !important; font-size: 34px !important; }
  .hof3-throne { transform: scale(0.85) !important; }

  /* Ranking cards stack */
  .rank-card { flex-direction: column !important; }
}

/* ─── 5. Touch detection: bigger touch targets ─────────────────── */
@media (pointer: coarse) {
  a.btn, button { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { transform: scale(1.3); margin: 6px; }
}

/* ─── 6. Mobile-specific helper for inline-form override ───────── */
@media (max-width: 600px) {
  .fc { flex-direction: column !important; align-items: stretch !important; }
  .fc > * { width: 100% !important; }
}