/* ==========================================================================
   Shared topbar — loaded raw by both /dashboard (React) and /tables (static)
   to guarantee byte-identical render. Do NOT bundle through Vite.
   ========================================================================== */

.gw-topnav{
  position:sticky;top:0;left:0;right:0;
  background:hsl(165 56% 12%);
  color:hsl(41 56% 92%);
  padding:16px 28px;
  z-index:1000;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-family:'Heebo','Assistant',Arial,sans-serif;
  font-size:1.05rem;
  line-height:normal;
  box-shadow:0 4px 16px rgba(0,0,0,0.14);
  margin:0;
  direction:rtl;
}
.gw-topnav *{
  line-height:normal;
  box-sizing:border-box;
}
.gw-topnav-brand{
  font-family:'Cormorant Garamond','Frank Ruhl Libre',serif;
  font-size:1.65rem;
  font-weight:500;
  color:hsl(41 56% 92%);
  text-decoration:none;
  margin-left:16px;
  padding:0;
  letter-spacing:normal;
}
.gw-topnav-brand em{
  font-style:italic;
  color:hsl(31 41% 59%);
  font-size:inherit;
  font-family:inherit;
  font-weight:inherit;
}
.gw-topnav a,
.gw-topnav button{
  font-family:'Heebo','Assistant',Arial,sans-serif;
  font-size:1.05rem;
  font-weight:500;
}
.gw-topnav a{
  color:hsl(41 56% 92%);
  padding:8px 16px;
  border-radius:8px;
  text-decoration:none;
  transition:background .15s;
}
.gw-topnav a:hover{ background:rgba(255,255,255,.1) }
.gw-topnav a.current{
  background:linear-gradient(180deg,#FFFBF1,#F2E8D0);
  color:hsl(165 56% 12%);
  font-weight:600;
}
.gw-topnav .gw-topnav-btn{
  color:hsl(41 56% 92%);
  padding:8px 16px;
  border-radius:8px;
  background:transparent;
  border:0;
  cursor:pointer;
  font-size:1.05rem;
  font-weight:500;
}
.gw-topnav .gw-topnav-btn:hover{ background:rgba(255,255,255,.1) }
.gw-topnav .cart-link{
  margin-right:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(180deg,#FFFBF1,#F2E8D0);
  color:hsl(165 56% 12%);
  padding:8px 18px;
  border-radius:8px;
  font-weight:600;
  font-size:1.05rem;
  position:relative;
  border:0;
  cursor:pointer;
  text-decoration:none;
}
.gw-topnav .cart-link:hover{ background:linear-gradient(180deg,#FFFEF5,#F8EFD4) }
.gw-topnav .cart-link svg{ width:22px;height:22px }
.gw-topnav .cart-badge{
  background:hsl(165 56% 12%);
  color:hsl(41 56% 92%);
  border-radius:999px;
  padding:2px 10px;
  font-size:.85rem;
  min-width:22px;
  text-align:center;
}
.gw-topnav .cart-link.has-items{
  animation:gw-cart-pulse 2s ease-in-out infinite;
}
@keyframes gw-cart-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(198,164,106,.55) }
  50%{ box-shadow:0 0 0 8px rgba(198,164,106,0) }
}
.gw-topnav-logout{
  background:none;
  border:none;
  color:hsl(41 56% 92%);
  opacity:.75;
  cursor:pointer;
  padding:8px 14px;
  font-family:'Heebo','Assistant',Arial,sans-serif;
  font-size:1rem;
}
.gw-topnav-logout:hover{ opacity:1 }

/* ---- Mobile (≤760px) — single-row, fully responsive (clamp/vw) layout ----
   Order RTL: brand → 4 nav links → cart (auto-pushed left) → logout-icon.
   All sizing uses clamp(min, vw, max) so the bar scales with the device width. */
@media (max-width: 760px){
  .gw-topnav{
    padding: clamp(6px, 1.6vw, 11px) clamp(6px, 2vw, 14px);
    gap: clamp(0px, 0.6vw, 5px);
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: center;
  }
  .gw-topnav-brand{
    font-size: clamp(0.78rem, 3.2vw, 1.2rem);
    margin-left: clamp(2px, 0.8vw, 6px);
    flex-shrink: 0;
  }
  /* Nav links + settings button — same compact, shrinkable style */
  .gw-topnav a:not(.gw-topnav-brand):not(.cart-link),
  .gw-topnav .gw-topnav-btn{
    padding: clamp(2px, 0.8vw, 6px) clamp(3px, 1vw, 7px);
    font-size: clamp(0.66rem, 2.6vw, 0.92rem);
    flex-shrink: 1;
    text-align: center;
    border-radius: 6px;
    white-space: nowrap;
  }
  /* Cart sits right after settings — no auto margin so all items pack onto one row */
  .gw-topnav .cart-link{
    padding: clamp(3px, 1vw, 6px) clamp(5px, 1.8vw, 10px);
    margin-inline-start: 0;
    flex-shrink: 0;
  }
  .gw-topnav .cart-link span:not(.cart-badge){ display: none }
  .gw-topnav .cart-link svg{
    width: clamp(14px, 4vw, 18px);
    height: clamp(14px, 4vw, 18px);
  }
  .gw-topnav .cart-badge{
    padding: 0 clamp(4px, 1.4vw, 7px);
    font-size: clamp(0.6rem, 2.2vw, 0.78rem);
    min-width: clamp(14px, 4vw, 18px);
  }
  /* Logout removed from the toolbar on mobile (owner request 2026-05-10) */
  .gw-topnav .gw-topnav-logout{ display: none }
}