/* iTrade Theme — mobile hamburger drawer (cloned from WES wes_landing/css/sidebar.css
 * lines 388-480, 2026-05-17). Mobile (<=768px) only: 52px icon rail by default,
 * expands to 220px when body has .itrade-mobile-nav-expanded (toggled by the burger
 * button injected by js/mobile-nav.js). */
/* ── Mobile: 60px always-visible icon rail (revert to v2 pattern) ──
 * v4 (2026-05-01): drawer pattern was too hidden — anh wanted a thin
 * always-visible navigation column on phones. Back to 60px icon rail.
 * Avatar + action icons (deposit/withdraw) + menu icons + disconnect
 * all visible. Text labels hidden via display:none. Menu icons injected
 * via CSS ::before on attr selectors so the Drupal core menu block
 * (text-only links) renders as icon glyphs on the narrow rail. */
@media (max-width: 768px) {
  /* Narrow column, full height, always visible at left edge.
   * Default 52px collapsed; expands to 220px when body has .itrade-mobile-nav-expanded
   * (toggled by the top-right hamburger button injected by sidebar.js). */
  .itrade-sidebar-region,
  body:not(.itrade-page-shell) .itrade-sidebar.itrade-sidebar-profile-block {
    width: 52px;
    transform: none;
    border-right: 0;
    box-shadow: none;                /* no shadow → no white/light edge on dark page */
    padding-bottom: 56px;            /* leaves room for absolute disconnect footer */
    transition: width 220ms cubic-bezier(.4,0,.2,1);
  }
  /* Hamburger expand state — show full labels */
  body.itrade-mobile-nav-expanded .itrade-sidebar-region,
  body.itrade-mobile-nav-expanded .itrade-sidebar.itrade-sidebar-profile-block {
    width: 220px;
    box-shadow: 4px 0 16px rgba(0,0,0,0.18);
  }
  body.itrade-mobile-nav-expanded .itrade-sidebar-name,
  body.itrade-mobile-nav-expanded .itrade-sidebar-balance,
  body.itrade-mobile-nav-expanded .itrade-sidebar-role,
  body.itrade-mobile-nav-expanded .itrade-sidebar-lbl,
  body.itrade-mobile-nav-expanded .itrade-sidebar-action-lbl { display: inline-block !important; }
  body.itrade-mobile-nav-expanded .itrade-sidebar-region .menu--itrade-main a,
  body.itrade-mobile-nav-expanded [data-itrade-static-menu] a {
    justify-content: flex-start !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
  }
  body.itrade-mobile-nav-expanded .itrade-sidebar-actions {
    flex-direction: row !important;
  }

  /* Page content shifts right by 52px to clear the rail (collapsed default) */
  body.itrade-logged-in .itrade-landing-shell {
    margin-left: var(--itrade-sidebar-width-mobile, 52px);
    width: calc(100% - var(--itrade-sidebar-width-mobile, 52px));
    max-width: calc(100% - var(--itrade-sidebar-width-mobile, 52px));
    overflow-x: hidden;
  }
  body.itrade-logged-in .itrade-landing-header { left: var(--itrade-sidebar-width-mobile, 52px); }
  /* Expanded: shell does NOT shift further (drawer overlays content) so the
   * page doesn't reflow when toggling labels. */

  /* Hamburger toggle button — fixed top-right; injected by sidebar.js */
  [data-itrade-mobile-burger] {
    position: fixed;
    top: 12px; right: 12px;
    width: 40px; height: 40px;
    z-index: 1102;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center; gap: 4px;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(220,28,28,0.25);
    border-radius: 8px; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    padding: 0;
    transition: background 180ms;
  }
  [data-itrade-mobile-burger] span {
    display: block; width: 20px; height: 2px;
    background: var(--itrade-red); border-radius: 2px;
    transition: transform 180ms, opacity 180ms;
  }
  body.itrade-mobile-nav-expanded [data-itrade-mobile-burger] { background: var(--itrade-red-soft); }
  body.itrade-mobile-nav-expanded [data-itrade-mobile-burger] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.itrade-mobile-nav-expanded [data-itrade-mobile-burger] span:nth-child(2) { opacity: 0; }
  body.itrade-mobile-nav-expanded [data-itrade-mobile-burger] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Hide decorative red orbs — their blur was bleeding through near the
   * sidebar edge and looked like a stray red border. They're pure decoration
   * so safe to hide on small screens. */
  .itrade-landing-shell .orb { display: none !important; }

  /* Disconnect footer pinned to bottom of the rail regardless of profile/menu order */
  .itrade-sidebar-region .itrade-sidebar-foot,
  body:not(.itrade-page-shell) .itrade-sidebar.itrade-sidebar-profile-block .itrade-sidebar-foot {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(0deg, #fdf1f1 0%, #fff 100%);
    border-top: 1px solid rgba(220,28,28,0.08);
    padding: 8px 6px;
    z-index: 2;
  }