/**
 * Shared User + MyAccount panel layout standard (mobile-safe, token-aligned).
 * Loaded from user shell head + MyAccount ma_shell_head only.
 */

/* Prevent whole-viewport horizontal drift on small screens */
body.idsa-user-root {
  overflow-x: hidden;
}

/* Reading column respects viewport; child wide content should use .idsa-panel-table-wrap */
body.idsa-user-root .idsa-main,
body.idsa-user-root .idsa-shell .idsa-main,
body.idsa-user-root .ma-main {
  max-width: 100%;
  min-width: 0;
}

/* Opt-in: wrap <table> (or wide blocks) for touch horizontal scroll */
body.idsa-user-root .idsa-panel-table-wrap,
body.idsa-user-root .ma-table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

/* Section rhythm (optional class on wrappers) */
body.idsa-user-root .idsa-panel-section {
  margin-bottom: 1.25rem;
}

body.idsa-user-root .idsa-panel-section-head,
body.idsa-user-root h2.idsa-section-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  line-height: 1.3;
  color: var(--idsa-color-text, #0f172a);
}

/* Card stacks in main column */
body.idsa-user-root .ma-main .idsa-card,
body.idsa-user-root .idsa-user-content-panel .idsa-card,
body.idsa-user-root .idsa-main .idsa-card {
  margin-bottom: 1rem;
}

/* Primary / secondary: reinforce focus visibility without changing colors */
body.idsa-user-root .idsa-btn:focus-visible {
  outline: 2px solid var(--idsa-color-primary, #2563eb);
  outline-offset: 2px;
}

/* ─── S1: Bottom-nav clearance ─────────────────────────────────────────────
   Reserves space so page content is never hidden behind the fixed bottom nav.
   56px = nav bar height; env() adds iPhone notch clearance automatically.   */
@media (max-width: 767px) {
  body.idsa-user-root .idsa-work {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
  body.idsa-user-root .idsa-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ─── S2: Topbar mobile declutter (CSS-only, no PHP change) ─────────────────
   Hides low-value / secondary topbar elements on small screens.
   Elements remain in DOM for desktop — only display is suppressed.          */
@media (max-width: 767px) {
  body.idsa-user-root .topbar-center,
  body.idsa-user-root .connection-status,
  body.idsa-user-root .online-toggle,
  body.idsa-user-root .user-email,
  body.idsa-user-root .idsa-topbar-wallet-history,
  body.idsa-user-root .learn2earn-btn,
  body.idsa-user-root .user-name {
    display: none !important;
  }
  /* Tighten wallet cluster to just the balance link on mobile */
  body.idsa-user-root .idsa-topbar-wallet-cluster {
    font-size: 13px;
  }
}
/* Restore full wallet cluster on wide screens */
@media (min-width: 1024px) {
  body.idsa-user-root .idsa-topbar-wallet-cluster {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
}