/* Cleanup overrides for the user portal. */
/* Vimaan tab is hard-coded in the header template. */
#exchBar10122022 { display: none !important; }
/* Footer carried only legal/KYC links and a dead app-download icon; drop it. */
app-footer-desktop .footerDiv { display: none !important; }

/* Account report grids: fit the card instead of scrolling sideways. */
.table-responsive { overflow-x: auto; }
.table-responsive > .table,
.card-body table.table { width: 100%; margin-bottom: 0; }
.card-body table.table th,
.card-body table.table td { padding: 8px 6px !important; font-size: 13px !important; word-break: break-word; }
.card-body table.table thead th { white-space: nowrap; }
.card-body table.table tbody tr:nth-child(even) { background: rgba(0, 0, 0, .025); }
.card-body table.table tbody tr:hover { background: rgba(0, 120, 255, .06); }

/* Cards on account screens */
.card.card-accent-primary { border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); overflow: hidden; }
.account-detail-head { letter-spacing: .3px; }

/* Header: keep the logo box from collapsing when the image fails to load. */
.site-logo, .site-logo-after { object-fit: contain; max-height: 68px; }

/* Multi Markets removed from nav/menu (compiled out); the per-row "pin" button
   on the Home highlights and In-Play market tables couldn't be removed the same
   way without breaking Angular's compiled view for that row template, so it's
   hidden here instead. Hides the whole cell so no empty gap is left in the row. */
#multiMarketPin { display: none !important; }
#multiMarketPin:is(td, th) { display: none !important; }
td:has(> #multiMarketPin) { display: none !important; }
/* DataTables inherit table-responsive (display:block + nowrap) and overflow the card. */
.dataTables_wrapper table.dataTable { display: table !important; width: 100% !important; }
.dataTables_wrapper table.dataTable th,
.dataTables_wrapper table.dataTable td { white-space: normal !important; }
.dataTables_wrapper table.dataTable th,
.dataTables_wrapper table.dataTable td { padding: 6px 4px !important; font-size: 12px !important; }
.dataTables_wrapper table.dataTable thead th { padding-right: 14px !important; }
.dataTables_wrapper table.dataTable thead th { min-width: 0 !important; }
.dataTables_wrapper table.dataTable thead th { word-break: normal !important; overflow-wrap: normal; padding-right: 16px !important; background-position: right 3px center; }

/* ==== Mobile-first layout (phones) ==== */
@media (max-width: 767.98px) {
  html { -webkit-text-size-adjust: 100%; }
  a, button, .btn { -webkit-tap-highlight-color: transparent; }

  /* Keep the last row of every page clear of the fixed bottom nav + home indicator. */
  .content { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
  nav.mobile-footer-menu { padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; }
  .site-header.app-header { padding-top: env(safe-area-inset-top); }

  /* 12px side gutter: Bootstrap .row's negative margins were pulling cards past the screen edge. */
  .cardMain { padding-left: 12px !important; padding-right: 12px !important; }
  .card-header, .card-header.account-detail-head { padding-left: 12px !important; padding-right: 12px !important; }

  /* Match rows (home / in-play) */
  td.td-event-name { padding-left: 12px !important; }

  /* Market screen headings and their right-hand counters */
  strong.match-odds, .fancy-title { padding-left: 12px; }
  .matched-count { padding-right: 12px; }

  /* Report tables scroll inside the card instead of being clipped by it. */
  .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dataTables_wrapper table.dataTable { min-width: 560px; }
  .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 10px 12px !important; }

  /* >=16px inputs stop iOS Safari zooming the page on focus; 44px tap targets. */
  input, select, textarea, .form-control, .form-select { font-size: 16px !important; }
  /* Bet slip stake chips: eight per row, so keep their original compact sizing. */
  .place-bet .stackbutton button, .place-bet .stackbutton .btn { font-size: 12px !important; padding-left: 2px; padding-right: 2px; white-space: nowrap; }
  .btn:not(.input-group .btn), button:not(.input-group button):not(.place-bet button) { min-height: 44px; }
}