/* ═══════════════════════════════════════════════════════════════════════
 * BetPulse — mobile.css (Option B: hamburger drawer)
 * Chunks 1 + 2 combined: chrome/nav + event rows + buttons + modals
 * ═══════════════════════════════════════════════════════════════════════
 * Desktop (>900px) completely unchanged.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Hide mobile-only elements by default (desktop) */
.mob-hamburger { display: none; }
.mob-sidebar-backdrop { display: none; }
.mob-slip-fab { display: none; }

@media (min-width: 641px) {
  .mob-hamburger,
  .mob-sidebar-backdrop,
  .mob-slip-fab { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────── */
/* PHONE (≤640px) — complete mobile layout                                */
/* ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  html, body {
    overflow-x: hidden;
    font-size: 14px;  /* baseline bumped from desktop 13px */
  }
  * { -webkit-tap-highlight-color: transparent; }

  /* ════════ HEADER ════════════════════════════════════════════ */
  .hdr {
    padding: 8px 10px !important;
    gap: 6px !important;
    min-height: 52px;
    flex-wrap: nowrap !important;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,.5);
  }
  .logo { font-size: 18px !important; }
  .hnav { display: none !important; }
  .hdr-search { display: none !important; }
  .api-status span { display: none; }
  .api-status { padding: 0 !important; }
  .hdr-right select { display: none; }
  .hdr-right {
    gap: 6px !important;
    margin-left: auto !important;
  }
  .bal {
    padding: 5px 10px !important;
    font-size: 11px;
  }
  .bal-lbl { display: none; }
  .bal-val { font-size: 13px !important; }
  .hdr-btn {
    padding: 7px 12px !important;
    font-size: 12px !important;
    min-height: 34px;
  }

  /* Hamburger — 40x40 tap target */
  .mob-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 22px;
    cursor: pointer;
    border-radius: 8px;
  }
  .mob-hamburger:active { background: var(--bg3); }

  /* ════════ SUBNAV (sport chips) — horizontal scroll ═══════════ */
  .snav {
    padding: 6px 10px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    display: flex !important;
    gap: 6px;
    scrollbar-width: none;
  }
  .snav::-webkit-scrollbar { display: none; }
  .snav > * { flex-shrink: 0; min-height: 32px; padding: 6px 12px !important; }

  /* ════════ SHELL — single column ═════════════════════════════ */
  .shell {
    display: block !important;
    grid-template-columns: none !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .main {
    padding: 6px !important;
    min-height: calc(100vh - 56px);
  }

  /* ════════ SIDEBAR DRAWER ═════════════════════════════════════
     !important on positioning: the desktop .sidebar rule is
     position:sticky;top:96px;height:calc(100vh - 96px). Without the
     overrides here, opening the drawer from the page footer makes
     the sidebar appear 96px below wherever the user scrolled TO,
     rather than pinned to the viewport top. */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 84vw !important;
    max-width: 340px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto;
    z-index: 500;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    padding: 12px 0 40px !important;
    background: var(--bg2) !important;
    border-right: 1px solid var(--border2);
    box-shadow: 2px 0 24px rgba(0,0,0,.55);
    -webkit-overflow-scrolling: touch;
  }
  .sidebar.mob-open { transform: translateX(0) !important; }

  .mob-sidebar-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.55);
    z-index: 499;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
  }
  .mob-sidebar-backdrop.mob-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Lock body scroll while the drawer is open — prevents the page
     content behind the drawer from scrolling and prevents iOS Safari
     rubber-banding the whole viewport. The JS toggles .mob-lock. */
  body.mob-lock {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  .sidebar .sb-row {
    padding: 12px 16px !important;
    font-size: 14px !important;
    min-height: 46px;
  }
  .sidebar .sb-sec {
    padding: 10px 16px 4px !important;
    font-size: 10px;
    letter-spacing: .5px;
  }
  .sidebar .mob-drawer-nav {
    padding: 4px 0 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
  }
  .sidebar .mob-drawer-nav .sb-row { font-weight: 700; }
  .sidebar .mob-drawer-nav .sb-row.act {
    background: rgba(var(--green-rgb),.10);
    color: var(--green2);
    border-left: 3px solid var(--green2);
    padding-left: 13px !important;
  }

  /* ════════ LEAGUE HEADERS (ITALY SERIE A etc.) ═══════════════ */
  .ev-list {
    margin: 6px 0 !important;
    border-radius: 10px !important;
  }
  .ev-list-hdr {
    padding: 10px 12px !important;
    font-size: 11.5px !important;
  }

  /* ════════ EVENT ROWS — stacked layout ═══════════════════════ */
  /* Desktop was horizontal (time · teams | odds | +More).
     Mobile: teams on top, odds buttons in a row below, +More on the right. */
  .ev-row {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .ev-row-left {
    width: 100%;
    gap: 10px !important;
  }
  .ev-row-time {
    min-width: 48px !important;
    font-size: 10.5px !important;
  }
  .ev-row-teams { flex: 1; min-width: 0; }
  .ev-row-team {
    font-size: 13.5px !important;
    line-height: 1.3 !important;
  }

  /* Market groups — on mobile show 1X2 across the full width, hide TG and NG
     (user can still access them via +More). Layout: 3 equal columns (or 2
     on sports without Draw). */
  .ev-row-markets {
    width: 100%;
    gap: 6px !important;
  }
  .ev-mkt-group-tg,
  .ev-mkt-group-ng {
    display: none !important;
  }
  .ev-mkt-group-1x2 {
    width: 100%;
    flex: 1;
  }
  .ev-mkt-hdr {
    display: none;  /* label redundant on mobile — 3 buttons speak for themselves */
  }
  .ev-mkt-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px !important;
    width: 100%;
  }
  .ev-mkt-group-1x2--2col .ev-mkt-row {
    grid-template-columns: 1fr 1fr;
  }
  /* Big tap-friendly odds buttons */
  .ob-compact {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px;
    padding: 6px 4px !important;
  }
  .ob-compact-lbl {
    font-size: 9.5px !important;
    margin-bottom: 2px;
  }
  .ob-compact-val {
    font-size: 15px !important;
  }

  /* +More link — full-width, pill button */
  .ev-row-more {
    width: 100%;
    justify-content: flex-end !important;
    padding: 2px 0 0 !important;
    min-width: 0 !important;
  }
  .ev-row-more a {
    font-size: 11px !important;
    padding: 4px 10px;
    border: 1px solid var(--border2);
    border-radius: 14px;
    background: var(--bg3);
  }

  /* ════════ EMPTY STATE ═══════════════════════════════════════
     When a filter returns no events, the main area was a huge void
     which looked like a broken page on phones. This gives it some
     weight: framed card, taller padding, legible text. */
  .main > div[style*="text-align:center"] {
    padding: 48px 20px !important;
    margin: 12px 4px !important;
    background: linear-gradient(180deg, var(--bg2) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px dashed var(--border2);
    border-radius: 14px;
    color: var(--text2) !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    min-height: 200px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  /* Give the empty-state text an icon-like prefix so it reads as
     intentional. Only applies when there are no child elements
     (pure text state — no spinner, no buttons). */
  .main > div[style*="text-align:center"]:empty::before,
  .main > div[style*="text-align:center"]:not(:has(*))::before {
    content: "⚽";
    display: block;
    font-size: 40px;
    opacity: .35;
    margin-bottom: 6px;
  }

  /* ════════ MODALS — full-screen on phone ═════════════════════ */
  /* The +More match-detail modal, login modal, etc. all use a common
     overlay class. On mobile we float them full-screen. */
  .modal-overlay,
  [style*="position:fixed"][style*="inset:0"],
  #loginModal, #signupModal, #mcOverlay {
    padding: 0 !important;
  }
  .modal,
  .modal-content,
  #mcPanel,
  #loginPanel, #signupPanel,
  [role="dialog"] {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ════════ BET SLIP — bottom drawer ══════════════════════════
     Same !important caution as .sidebar — desktop has the slip as a
     sticky rail (top:96px). On mobile we re-anchor to viewport bottom. */
  .slip {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw !important;
    height: auto !important;
    max-height: 82vh !important;
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    z-index: 450;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,.6);
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .slip.mob-open { transform: translateY(0) !important; }
  .slip-hdr {
    padding: 14px 16px !important;
    position: relative;
    border-bottom: 1px solid var(--border);
  }
  .slip-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px !important;
    max-height: 50vh;
  }
  .slip-foot {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom,0px)) !important;
    border-top: 1px solid var(--border);
  }
  .pb {
    min-height: 52px !important;
    font-size: 15px !important;
  }
  .mob-slip-close {
    margin-left: auto;
    width: 34px;
    height: 34px;
    border: none;
    background: var(--bg3);
    color: var(--text);
    font-size: 20px;
    font-weight: 700;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ════════ FLOATING SLIP FAB ═════════════════════════════════ */
  .mob-slip-fab {
    position: fixed;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom,0px));
    z-index: 440;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 13px 20px;
    background: linear-gradient(180deg, var(--green2) 0%, var(--green) 100%);
    color: #021917;
    font-weight: 900;
    font-size: 13.5px;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(var(--green-rgb),.45), 0 2px 8px rgba(0,0,0,.4);
    transition: transform .15s;
    min-height: 48px;
  }
  .mob-slip-fab.mob-slip-fab-show { display: inline-flex; }
  .mob-slip-fab:active { transform: scale(.96); }
  .mob-slip-fab .mob-slip-fab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px; height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: #021917;
    color: var(--green2);
    font-size: 12px;
    font-weight: 900;
  }

  /* ════════ ACCOUNT / HISTORY pages ═══════════════════════════ */
  /* Stack the top stats grid on narrow screens */
  .grid2, .grid4, .grid3,
  [style*="grid-template-columns:1.2fr"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  /* Tables — let them scroll horizontally rather than overflow the page */
  .tbl {
    font-size: 11.5px !important;
    min-width: 520px;
  }
  .main .section,
  .main div[class*="section"] {
    overflow-x: auto;
  }

  /* Tighten the main content top spacing */
  .main > *:first-child { margin-top: 0 !important; }
}

/* ─────────────────────────────────────────────────────────────────────── */
/* TABLET (641-900px) — mild tweaks                                       */
/* ─────────────────────────────────────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 900px) {
  .sidebar { width: 180px !important; }
  .shell {
    grid-template-columns: 180px 1fr 280px !important;
    gap: 6px !important;
  }
}