/* ==========================================================================
   responsive-fix.css
   Cross-device corrections for the user-facing app.

   Loaded LAST in index.html so it wins the cascade over style.css and
   responsive.css. Everything here is defensive: no fixed widths, no
   user-agent assumptions, no layout that depends on a JS breakpoint.

   Breakpoint tiers used:
     <= 380px   very small phones (iPhone SE 1st gen / Galaxy Fold closed)
     <= 480px   small phones
     <= 767px   phones
     768-991px  tablets portrait  (Bootstrap md, previously had NO rules)
     >= 992px   laptop and up

   The tablet tier is the important one: responsive.css only ever declared
   `max-width: 768px`, so 769-991px devices (iPad portrait, split-screen
   laptop windows) fell through to the full desktop layout with no
   adjustments at all.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Viewport containment
   Nothing may create a horizontal scrollbar. Anything that genuinely needs
   to be wider than the screen gets its own scroll container instead.
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%; /* stop iOS bumping font sizes in landscape */
  text-size-adjust: 100%;
}

html,
body {
  max-width: 100%;
}

/* `clip`, not `hidden`: hidden turns the body into a scroll container, which
   silently breaks every `position: sticky` element on the page (the odds
   sidebar and the market headers rely on it). `clip` contains the overflow
   without creating a scroll box. Browsers that don't support it simply drop
   the declaration and keep their previous behaviour. */
body {
  overflow-x: clip;
}

body {
  min-height: 100vh;
  min-height: 100dvh; /* dvh: correct height while mobile browser chrome shows */
}

/* Media never exceeds its container. Class-based rules in style.css still
   win on specificity, so intentionally sized logos keep their size. */
img,
video,
canvas,
iframe {
  max-width: 100%;
}

svg {
  max-width: 100%;
}

/* Long unbroken strings (usernames, market names, emails) must wrap rather
   than widen the page. */
.break-word,
.market-name,
.event-name {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   2. Shell: header / main / footer
   -------------------------------------------------------------------------- */
.main {
  min-height: calc(100vh - 159px);
  min-height: calc(100dvh - 159px);
}

.header .container-fluid {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

/* The header is a flex row of logo + balance + account menu. Every child must
   be allowed to shrink, otherwise the row's min-content width pushes past the
   viewport and the whole page scrolls sideways. */
.header .row {
  /* Bootstrap's -15px gutters push the row wider than the container; on a
     320px screen that alone produced a 10px bleed. */
  margin-left: 0;
  margin-right: 0;
}

.header .row > div {
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 6px;
}

/* The logo block holds the menu button and the logo. Without this it stays
   display:block and the two stack vertically, which made the header 181px
   tall on a 320px phone. */
.header .row > div > .flex {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Marquee row and the mobile nav row must span the full header width. As flex
   items of .row they were shrink-to-fit, so the nav bar was only 172px wide. */
.header .row > .d-lg-none,
.header .row > .d-none {
  flex: 1 1 100%;
  max-width: 100%;
  min-width: 0;
}

.header .profile-right-side {
  flex-wrap: nowrap;
  margin-bottom: 0;
  gap: 8px;
  align-items: center !important;
}

.header .profile-right-side > li {
  min-width: 0;
  flex-shrink: 1;
  display: inline-flex;
  align-items: center;
}

/* Balance keeps its natural width; the account block is what gives way.
   The extra class in the selector is needed to out-rank the `.flex05 li`
   rule in style.css that sets `flex: 0 1 auto`. */
.header .profile-right-side > li.ballance {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

.header .profile-right-side > li.account {
  flex: 0 1 auto;
  min-width: 0;
}

/* Logo scales with the viewport. Previously the width came from a JS
   `isMobile` check, which is wrong on tablets (iPadOS reports as desktop Mac)
   and on any resized desktop window. */
.header .logo {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex-shrink: 1;
}

.header .logo img {
  height: clamp(30px, 6vw, 57px);
  width: auto;
  max-width: 42vw;
  object-fit: contain;
}

/* Balance + exposure readouts: single line, ellipsised, never a reason to
   overflow. */
.header .ballance,
.header .account,
.header .account .now-wrap,
.header .account .now-wrap > * {
  min-width: 0;
}

.header .account .now-wrap {
  flex-wrap: nowrap;
}

.header .account .now-wrap div:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40vw;
}

/* Account dropdown: anchored to the right edge and clamped to the screen so it
   can't run off the left side on a 320px phone. */
.header .account > ul.list-group {
  min-width: 0 !important;
  width: max-content;
  max-width: calc(100vw - 24px);
  max-height: min(70vh, 480px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   3. Tables
   Data tables keep their intrinsic width but scroll inside their own box
   instead of dragging the page with them.
   -------------------------------------------------------------------------- */
.table-responsive,
.reponsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > table,
.reponsive > table {
  width: 100%;
}

/* A bare table (no wrapper) still gets contained. */
@media (max-width: 767px) {
  .modal-body table,
  .card table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   4. Modals
   Full-bleed on phones with safe-area padding; centred dialog from tablet up.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .modal-content {
    border-radius: 0 !important;
    max-height: 100dvh;
  }

  .modal-body {
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* --------------------------------------------------------------------------
   5. Touch ergonomics
   Only opt-in targets are enlarged. Dense grids (odds ladders, market rows)
   are deliberately excluded: forcing 44px rows there would break the layout
   far worse than a slightly small tap target.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .header .profile-right-side a,
  .header .profile-right-side .now-wrap,
  .header .logo,
  .modal-header .close,
  .modal-header button,
  .nav-mobile a,
  .nav-mobile button,
  .footer-links a,
  .pagination > li > a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* iOS zooms the page when a focused input is under 16px. */
  input,
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}

/* --------------------------------------------------------------------------
   6. Tablet tier (768-991px) — previously unstyled
   responsive.css declares everything inside `@media (max-width: 768px)`, so a
   769-991px device got the desktop shell with the *mobile* nav components
   still rendered but unstyled: the In-play / Sports / Casino bar collapsed
   into a vertical stack. These rules restore the mobile styling for the
   components that are visible in this range.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  .header .logo img {
    height: 40px;
    max-width: 34vw;
  }

  .header-mobile {
    width: 100%;
  }

  .header-mobile .navbarnav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 40px;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: var(--theme1-bg) !important;
    box-shadow: 0 3px 5px rgba(57, 63, 72, 0.5);
  }

  .header-mobile .nav-item {
    flex: 1 1 auto;
    position: relative;
    text-align: center;
    white-space: nowrap;
  }

  .header-mobile .nav-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 15px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background-color: var(--theme1-bg) !important;
  }

  .marqueeheader {
    padding: 2px 10px 4px;
  }

  /* Two-up card grids read better than three cramped columns at this width. */
  .casino-grid > *,
  .market-grid > * {
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
}

/* --------------------------------------------------------------------------
   7. Phones
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .header .container-fluid {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  .header .row > div {
    padding-left: 0;
    padding-right: 0;
  }

  /* Keep the account row on one line; the balance block is already
     ellipsised above. */
  .header .account .now-wrap {
    gap: 8px !important;
  }

  .header .account .now-wrap div:last-child {
    max-width: 30vw;
  }

  /* Bottom safe area for the page and any fixed footer bar. */
  .main {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (max-width: 380px) {
  .header .logo img {
    height: 26px;
    max-width: 34vw;
  }

  .header .account .now-wrap div:last-child {
    max-width: 26vw;
  }
}

/* --------------------------------------------------------------------------
   8. Landscape phones: the header must not eat the whole screen
   -------------------------------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
  .header .logo img {
    height: 26px;
  }

  .header-bottom {
    padding: 4px 0;
  }
}

/* --------------------------------------------------------------------------
   9. Rules dialog (was sized by inline styles driven by `isMobile`)
   -------------------------------------------------------------------------- */
.rules-dialog {
  width: 90%;
  max-width: 90vw;
  margin: 1% auto 0;
}

.rules-dialog-content {
  height: 90vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.rules-dialog-header {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  margin: 0;
  background-color: var(--theme1-bg, #fff);
  border-bottom: 1px solid #dee2e6;
}

.rules-dialog-header .modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.rules-dialog-header .close {
  border: none;
  background: none;
  font-size: 28px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  color: #000;
  opacity: 0.7;
}

.rules-dialog-header .close:hover,
.rules-dialog-header .close:focus-visible {
  opacity: 1;
}

.rules-dialog-body {
  padding: 1rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

@media (max-width: 767px) {
  .rules-dialog {
    width: 100%;
    max-width: 100vw;
    height: 100dvh;
    /* ReactModal ships default inline offsets (top/left/right/bottom: 40px)
       and Bootstrap's .modal-dialog is position:relative, so `top: 0` alone
       left the dialog 20px down and cut its last 20px off the screen. Pinning
       it to the viewport is the only reliable way to get a true full-screen
       sheet on a phone. */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0;
  }

  .rules-dialog-content {
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .rules-dialog-header {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: max(14px, env(safe-area-inset-top)) 18px 14px;
    font-size: 18px;
  }

  .rules-dialog-header .modal-title {
    font-size: 18px;
  }

  .rules-dialog-header .close {
    font-size: 24px;
    min-width: 40px;
    min-height: 40px;
  }

  .rules-dialog-body {
    padding: 0 0 env(safe-area-inset-bottom);
  }
}

/* Brand-name fallback when the white-label logo fails to load. */
.header-logo-fallback {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: clamp(14px, 3.4vw, 20px);
  line-height: 1.1;
  white-space: nowrap;
  color: var(--primary-color, #fff);
}

/* Login / register screens: the logo was 100px on phones and 180px on
   desktop via a JS branch. Clamp instead. */
.login-logo {
  width: clamp(96px, 26vw, 180px);
  height: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   11. Desktop nav bar (Home / Cricket / Tennis / … )
   Ten items at 16px + 15px padding each need ~1100px, so between 992px and
   ~1200px the bar used to push the page wider than the viewport. Tighten the
   items and let the bar wrap onto a second row instead of overflowing.
   -------------------------------------------------------------------------- */
.header-bottom .navbar-nav {
  flex-wrap: wrap;
  row-gap: 2px;
}

@media (max-width: 1200px) {
  .header-bottom li a {
    padding: 5px 9px;
    font-size: 14px;
  }
}

@media (max-width: 1024px) {
  .header-bottom li a {
    padding: 4px 7px;
    font-size: 13px;
  }
}

/* --------------------------------------------------------------------------
   12. Sidebar + racing flyout
   The sidebar is 100vh, which on mobile browsers is taller than the visible
   area; the racing flyout is a fixed 300x500 box positioned at left:310px.
   -------------------------------------------------------------------------- */
.sidebar {
  height: 100vh;
  height: 100dvh;
}

.racing-menu-panel {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 190px);
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   13. Admin Panel Full-Device Responsiveness (Mobile / Tablet / Desktop)
   Prevents legacy 0.5x scale zoom and ensures 100% width and scrollable tables
   -------------------------------------------------------------------------- */
.admin,
.admin .main,
.Admin-page-layout,
.admin-page-layout,
.um-container {
  transform: none !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

.admin {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  display: flex;
  flex-direction: column;
}

.admin .main {
  flex: 1;
}

@media (max-width: 991.98px) {
  .Admin-page-layout,
  .admin-page-layout {
    padding: 10px !important;
    margin: 0 !important;
  }

  .Admin-page-layout .d-flex.justify-content-between {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* --------------------------------------------------------------------------
   14. Reduced motion / high contrast niceties
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}