/* =====================================================
   GTG MOBILE CORE
   Safe global rules only
   ===================================================== */

/* hard stop */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* universal sizing discipline */
*, *::before, *::after {
  box-sizing: border-box;
  min-width: 0;
}

/* media safety */
img, video, canvas, svg, iframe {
  max-width: 100%;
  height: auto;
}

/* form/control safety */
input, select, textarea, button {
  max-width: 100%;
  font: inherit;
}

/* long text cannot blow out layout */
.user-email,
.user-id,
.user-sponsor,
.balance-value,
.tool-card p,
.tool-info,
.tool-note,
.help-text,
.form-label,
.section-title,
.header h1,
.header .subtitle,
.audit-detail,
.audit-target {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* generic container safety */
.section,
.tool-card,
.setting-box,
.user-item,
.audit-row,
.chain-item,
.referral-item,
.genealogy-content {
  max-width: 100%;
}

/* make common grids safe before mobile collapse */
.tools-grid,
.settings-grid,
.user-item,
.audit-top {
  min-width: 0;
}

/* shared header action fix */
@media (max-width: 768px) {
  body {
    padding: 12px;
  }

  .header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 18px;
  }

  .header h1,
  .header h2 {
    line-height: 1.15 !important;
    margin-bottom: 4px !important;
  }

  .header h1 {
    font-size: 1.6em;
  }

  .header .subtitle,
  .header .breadcrumb {
    line-height: 1.25 !important;
  }

  .header .subtitle {
    font-size: 0.9em;
  }

  .header .back-btn,
  .header .logout-btn-top,
  .header #gtgLogoutBtn,
  .header .action-btn,
  .header a.back-btn,
  .header button.back-btn,
  .back-btn,
  #gtgLogoutBtn {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  .header > div:last-child,
  .header .header-actions,
  .header .top-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .section {
    padding: 16px;
    margin-bottom: 18px;
  }

  .section-title {
    font-size: 1.2em;
    line-height: 1.2;
    margin-bottom: 14px;
    padding-bottom: 10px;
  }

  .tools-grid,
  .settings-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .tool-card,
  .setting-box {
    padding: 16px;
  }

  .search-input,
  .form-input,
  .submit-btn,
  .btn-save,
  .action-btn {
    width: 100% !important;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  body {
    padding: 10px;
  }

  .header {
    padding: 14px;
  }

  .header h1 {
    font-size: 1.4em;
  }

  .section-title {
    font-size: 1.08em;
  }

  .tool-card,
  .setting-box,
  .user-item,
  .genealogy-content {
    padding: 12px;
  }

  .user-name {
    font-size: 1em;
  }

  .balance-value {
    font-size: 0.98em;
  }
}
/* =========================================
   GLOBAL CONTAINER WIDTH FIX (ALL PAGES)
   ========================================= */

@media (max-width: 768px) {

  .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

}