/* Stage 7R16: unified primary navigation + mobile page organization.
   Frontend-only. Keeps existing Supabase/data behavior intact. */
:root{--r16-mint:#8afbd6;--r16-line:#304946;--r16-panel:#101d1b;--r16-text:#e8f4ef}

/* Shared six-destination navigation */
.asm-primary-nav a{box-sizing:border-box;text-align:center;display:flex;align-items:center;justify-content:center;min-height:48px;padding:11px 13px;border:1px solid var(--r16-line);border-radius:11px;background:rgba(16,29,27,.72);color:#dce9e3;text-decoration:none;font-size:11px;font-weight:850;letter-spacing:.07em;line-height:1.15;white-space:normal}
.asm-primary-nav a[aria-current="page"]{border-color:var(--r16-mint)!important;color:var(--r16-mint)!important;box-shadow:inset 0 0 0 1px rgba(138,251,214,.08)}

/* Collection / Garage shell */
.link-head .asm-primary-nav{gap:10px}

/* Owner Hub header uses the same primary destinations. */
.owner-head-actions.asm-primary-nav a{padding:11px 13px;border-radius:11px}

/* Keep the Hub's five internal sections visually organized too. */
.hub-tabs{scrollbar-width:none}
.hub-tabs::-webkit-scrollbar{display:none}

/* Wording/action polish */
body[data-page="garage"] .bay-footer .remove-action{min-height:42px}

@media(max-width:720px){
  /* Standard mobile header rhythm: brand, then a contained 2-column nav. */
  .topbar{position:relative!important;height:auto!important}
  .topbar .toprow{height:auto!important;min-height:0!important;display:block!important;padding-top:18px!important;padding-bottom:18px!important}
  .topbar .brand{display:inline-flex!important;flex-direction:column!important;align-items:flex-start!important;margin-bottom:18px!important;font-size:22px!important}
  .topbar .brand small{display:block!important;margin-top:3px!important}
  .topbar .nav.asm-primary-nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;width:100%!important;overflow:visible!important;align-items:stretch!important}
  .topbar .nav.asm-primary-nav a{width:100%!important;min-width:0!important;margin:0!important;font-size:11px!important;padding:11px 8px!important}

  .link-head{display:block!important;padding:10px 0 30px!important}
  .link-brand{display:inline-block!important;font-size:25px!important;margin-bottom:22px!important}
  .link-nav.asm-primary-nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;width:100%!important}
  .link-nav.asm-primary-nav a{width:100%!important;min-height:54px!important;font-size:11px!important;padding:10px 7px!important}

  .owner-top{display:block!important;padding:20px 20px 18px!important}
  .owner-brand{display:inline-block!important;font-size:22px!important;margin-bottom:20px!important}
  .owner-head-actions.asm-primary-nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;width:100%!important}
  .owner-head-actions.asm-primary-nav a{width:100%!important;min-height:52px!important;font-size:11px!important;padding:10px 7px!important}

  /* Page bodies begin cleanly beneath navigation instead of colliding with it. */
  body[data-page="garage"] main.wrap,
  body[data-page="demo"] main.wrap,
  body[data-page="account"] main.wrap{padding-top:30px!important}
  .owner-shell{padding-top:30px!important}
  .team-wrap{padding-top:30px!important}

  /* Unified Hub section controls: two columns; final odd item spans the row. */
  .hub-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;overflow:visible!important}
  .hub-tabs button{width:100%!important;min-height:52px!important;padding:10px 8px!important;white-space:normal!important;text-align:center!important}
  .hub-tabs button:last-child:nth-child(odd){grid-column:1/-1}

  /* Garage/demo headers should follow the same full-width content hierarchy. */
  .showroom-head{display:block!important}
  .showroom-head .garage-summary{margin-top:18px!important;width:max-content!important;max-width:100%!important}
}

@media(min-width:721px){
  .topbar .nav.asm-primary-nav,.link-nav.asm-primary-nav,.owner-head-actions.asm-primary-nav{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
}