/* FLEXFAM mobile hardening — shared by every public and app page */

/* Fluid content and media must never force horizontal page scrolling. */
html, body { max-width: 100%; }
svg, video, canvas, iframe { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }
.app-shell > *, .dash-cols > *, .hero-grid > *, .split-grid > * { min-width: 0; }

/* Comfortable touch targets on touch-first devices. */
@media (hover: none) and (pointer: coarse) {
  .btn, .tab-btn, .side-nav a, .nav-links a, .burger { min-height: 44px; }
  input, select, textarea { min-height: 44px; }
}

@media (max-width: 1024px) {
  body { overflow-wrap: anywhere; }
  .container { width: calc(100% - 28px); }

  /* Header remains usable without squeezing the logo or account controls. */
  .site-head .bar { gap: 8px; }
  .head-actions { min-width: 0; }
  .head-actions .credit-chip { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }

  /* Keep the hamburger menu compact. The old full-screen menu used oversized
     links and felt like a second page on phones. This is a short side drawer. */
  .mobile-nav {
    inset: 0 0 0 auto;
    width: min(86vw, 340px);
    max-height: none;
    padding: max(78px, calc(env(safe-area-inset-top) + 68px)) 16px max(22px, env(safe-area-inset-bottom));
    gap: 2px;
    align-items: stretch;
    justify-content: flex-start;
    background: #fff;
    border-left: 1px solid var(--line);
    box-shadow: -100vw 0 0 100vw rgba(16, 27, 48, .42), -14px 0 34px rgba(16, 27, 48, .13);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 1;
    visibility: hidden;
    transform: translateX(105%);
    transition: transform .24s ease, visibility 0s linear .24s;
  }
  .mobile-nav.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: transform .24s ease;
  }
  .mobile-nav a,
  .mobile-nav .btn {
    width: 100%;
    max-width: none;
    min-height: 42px;
    margin-top: 0;
    padding: 10px 13px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.35;
    text-align: left;
  }
  .mobile-nav a[data-logout] {
    margin-top: 6px !important;
    font-size: 15px !important;
    border-top: 1px solid var(--line);
    border-radius: 0 0 10px 10px;
  }

  /* The horizontal sidebar duplicated the hamburger menu and became a large
     swipe strip above every mobile page. Hide it on phones. */
  .app-shell { gap: 14px; }
  .side-nav { display: none; }
  .app-head { align-items: flex-start; gap: 12px; }
  .app-head h1 { font-size: clamp(25px, 7vw, 34px); }

  /* Forms and action rows stack instead of overflowing. */
  .form-row, .field-row, .modal-actions, .panel-head { flex-wrap: wrap; }
  .form-row > *, .field-row > * { min-width: min(100%, 220px); flex: 1 1 220px; }
  .form-card .field[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 0 !important; }
  .modal-actions .btn { flex: 1 1 140px; }

  /* Tables retain all data and scroll inside their own region. */
  .ff-table-wrap, .table-responsive, .member-table-wrap, .scroll-box {
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  .tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { flex: 0 0 auto; }
}

@media (max-width: 560px) {
  .container { width: calc(100% - 24px); }
  .app-main { padding-top: 76px; }
  /* On narrow phones keep only the points balance and menu trigger in the
     header. USDT remains available in Wallet and inside the menu. */
  .site-head .usdt-chip { display: none; }
  .panel, .form-card, .bal-card, .job-card, .plan-card, .rig-hero { padding: 16px 14px; }

  .section-head { margin-bottom: 30px; }
  .hero p, .section-head p { font-size: 15px; }
  .eyebrow { max-width: 100%; white-space: normal; text-align: left; }

  .app-head { flex-direction: column; }
  .app-head > .btn, .app-head > a.btn { width: 100%; }
  .bal-actions, .rig-actions, .job-card .j-foot { flex-direction: column; }
  .bal-actions .btn, .rig-actions .btn, .job-card .j-foot .btn { width: 100%; }

  .addr-box { align-items: stretch; flex-direction: column; }
  .addr-box code { width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .summary-rows .row { gap: 14px; }
  .summary-rows .row b { text-align: right; overflow-wrap: anywhere; }

  .mini-stats { gap: 8px; }
  .mini-stat { padding: 13px 11px; }
  .mini-stat b { font-size: 19px; }

  .rig-row .rr-earn { width: 100%; text-align: left; padding-left: 56px; }
  .warn-banner { padding: 14px 12px; }
}

@media (max-width: 390px) {
  .container { width: calc(100% - 18px); }
  .logo span { font-size: 17px; }
  .head-actions .credit-chip { display: none; }
  .stats-grid, .dash-grid, .mini-stats { grid-template-columns: 1fr; }
  .net-picker { grid-template-columns: 1fr; }
  .payout-feed { white-space: normal; }
}

/* Respect notches and browser safe areas on modern phones. */
@supports (padding: max(0px)) {
  .site-head .bar { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .toast-root { bottom: max(16px, env(safe-area-inset-bottom)); }
}