/* app-nav.css — customer app navigation, buy-page pattern, STATIC markup.
 *
 * Replaces the injected customer-shell/customer-nav system (removed 2026-07-03
 * after it collided with page chrome on mobile). Same components as /buy and
 * /rent: sticky mobile header (burger + brand + Add funds) and the .side
 * sidebar that becomes an off-canvas drawer on mobile via body.nav-open.
 * Desktop layout (.shell grid + fixed sidebar column) is unchanged.
 * Used by: dashboard, orders, funds, settings, rentals.
 */

/* ---------- Desktop: sidebar inside the existing .shell grid ---------- */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{
  border-right:1px solid var(--hair);
  padding:22px 16px 14px;
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;gap:6px;
  overflow-y:auto;background:var(--bg,inherit);
}
.side .brand{padding:6px 10px 20px}
.side .spacer{flex:1}

.side .navlink{display:flex;align-items:center;gap:12px;padding:11px 12px;
  border-radius:var(--r-sm);color:var(--muted);font-weight:500;font-size:15px;
  transition:all .12s;text-decoration:none}
.side .navlink:hover{background:var(--panel);color:var(--ink)}
.side .navlink.active{background:rgba(242,169,59,.08);color:var(--amber);font-weight:600}
.side .navlink svg{flex:none}

.side .acct{display:flex;align-items:center;gap:10px;padding:12px;border-top:1px solid var(--hair);margin-top:6px}
.side .avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--amber),var(--amber-deep));
  display:grid;place-items:center;font-family:'Orbitron';font-weight:700;color:var(--on-amber);font-size:14px;flex:none}

.main{padding:28px 32px 60px;max-width:1020px;min-width:0}

/* ---------- Mobile header (buy-page style) — hidden on desktop ---------- */
.app-mobhead{display:none}
.navScrim{display:none}

@media (max-width: 900px){
  .shell{display:block}

  .app-mobhead{
    display:flex;align-items:center;gap:14px;
    position:sticky;top:0;z-index:30;
    padding:14px 16px;border-bottom:1px solid var(--hair);
    backdrop-filter:blur(12px);background:var(--header-bg,var(--bg));
  }
  .app-mobhead .navToggle{background:none;border:1px solid var(--hair);border-radius:var(--r-sm);
    color:var(--ink);padding:8px;cursor:pointer;display:inline-flex}
  .app-mobhead .navToggle svg{width:22px;height:22px;display:block}
  .app-mobhead .addchip{margin-left:auto;font-size:13px;font-weight:700;color:var(--jewel,#5fdcd4);
    text-decoration:none;white-space:nowrap;padding:8px 12px;border:1px solid var(--hair);border-radius:99px}

  /* sidebar becomes the off-canvas drawer, exactly like /buy */
  .side{
    position:fixed;left:0;top:0;bottom:0;height:100vh;width:min(80vw,280px);z-index:40;
    transform:translateX(-102%);transition:transform .22s ease;
    background:var(--bg,#0a0a0d);box-shadow:8px 0 32px rgba(0,0,0,.45);
  }
  body.nav-open .side{transform:translateX(0)}
  body.nav-open .navScrim{display:block;position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.5)}

  .main{padding:18px 14px 70px;max-width:100%}
  .main .card{overflow-x:auto}
}