/* ============================================================
   Global responsive hardening.
   Loaded AFTER main.css so it only reinforces mobile behaviour
   and never overrides the desktop layout. Keep rules safe and
   additive; page-specific tuning lives in main.css.
   ============================================================ */

/* 1. Media is always fluid so images/videos never force a scrollbar. */
img, svg, video, canvas, iframe { max-width: 100%; }
img { height: auto; }

/* 2. Never allow the page itself to scroll sideways. */
html, body { max-width: 100%; overflow-x: hidden; }

/* 3. Tables inside a .table-responsive scroll instead of overflowing. */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- Phones ---- */
@media (max-width: 767px) {
  /* Content uses the full width when the sidebar is off-canvas. */
  #page-content-wrapper,
  #page-content-wrapper2 { min-width: 0 !important; }

  /* On scroll the top bar gets position:fixed (.fixedmenu), which slid the
     page content underneath it and clipped the top of the first block.
     Keep the bar in normal flow on phones so nothing is cut. */
  .panel_cl_top_nav.fixedmenu {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Long strings (emails, tokens, urls) wrap instead of overflowing.
     Table cells are intentionally excluded so data tables keep their own
     column layout instead of breaking headers/values onto extra lines. */
  p, a, span, li, .form-control {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* Inputs, selects and buttons stay within the viewport. */
  .form-control, input, select, textarea { max-width: 100%; }
  .btn { white-space: normal; }

  /* Wide tables scroll horizontally only when explicitly wrapped, so tables
     with their own responsive styling (e.g. the ladder) are left untouched. */
  .table-responsive > table { width: 100%; }

  /* Comfortable gutters on small screens. */
  .container, .container-fluid { padding-left: 12px; padding-right: 12px; }

  /* Panel padding trimmed so content is not cramped. (Bootstrap .card is
     intentionally excluded — its media/body should stay edge-to-edge.) */
  .panel, .inside_data_panel { padding-left: 12px; padding-right: 12px; }
}

/* ---- Ladder table headers: keep labels like "High Score" on one line ---- */
@media (max-width: 767px) {
  .leadder_data_table thead th {
    white-space: nowrap;   /* "High Score" no longer breaks onto two lines */
    font-size: 12px;
    padding-left: 4px;
    padding-right: 4px;
    vertical-align: top;
  }
  /* The sort arrow drops neatly under its label instead of pushing it wider. */
  .leadder_data_table thead th a { display: block; margin-top: 2px; }
}

/* ---- Mobile top bar (hamburger + balances + profile) ---- */
@media (max-width: 991px) {
  /* Keep the whole bar on a single tidy, vertically-centred row. */
  .panel_cl_top_nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 6px 10px;
  }

  /* Hamburger sized to its icon instead of an odd 16% width. */
  #menu-toggle {
    width: auto !important;
    flex: 0 0 auto;
    padding: 8px 12px;
    margin-right: 8px;
  }

  /* The profile section takes the remaining width and may shrink so the
     balances scroll horizontally instead of forcing a second row. */
  .mobile_profile_sec {
    display: block;
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
  }
  .mobile-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
  }

  /* Compact, readable balances. */
  .mobile-header-row .price_pack { min-width: auto; padding: 0 2px; }
  .mobile-header-row .price_pack p { margin: 0; font-size: 12px; line-height: 1.25; }
  .mobile-header-row .price_pack p.damnnbank,
  .mobile-header-row .price_pack p.kels { font-size: 12px !important; }

  /* Profile name was white-on-white on the white bar; make it readable. */
  .mobile_profile_sec .profile_wrap { margin-left: 4px; }
  .mobile_profile_sec .te_ch_s { color: #333 !important; padding-right: 16px; }
  .mobile_profile_sec .profile_sec_i { font-size: 13px; color: #333; }
  .mobile_profile_sec .profile_sec_i img { width: 34px; height: 34px; }
  .mobile_profile_sec .te_ch_s::after { color: #511495; right: 0; }
}

/* ---- Small phones ---- */
@media (max-width: 480px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.15rem; }

  /* Drop the profile name on very small screens; keep avatar + dropdown. */
  .mobile_profile_sec .profile_sec_i { font-size: 0; }
  .mobile_profile_sec .profile_sec_i img { margin: 0; }
  .mobile-header-row .price_pack p { font-size: 11px; }
}