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

.gw-topnav{
  position:fixed;top:0;left:0;right:0;
  background:hsl(165 56% 12%);
  color:hsl(41 56% 92%);
  padding:14px 30px;
  z-index:1000;
  display:flex;gap:13px;align-items:center;flex-wrap:wrap;
  font-family:'Heebo','Assistant',Arial,sans-serif;
  font-size:1.1rem;
  line-height:normal;
  box-shadow:0 5px 20px 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.72rem;
  font-weight:500;
  color:hsl(41 56% 92%);
  text-decoration:none;
  margin-left:21px;
  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.1rem;
  font-weight:500;
}
.gw-topnav a{
  color:hsl(41 56% 92%);
  padding:10px 21px;
  border-radius:10px;
  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:10px 21px;
  border-radius:10px;
  background:transparent;
  border:0;
  cursor:pointer;
  font-size:1.1rem;
  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:13px;
  background:linear-gradient(180deg,#FFFBF1,#F2E8D0);
  color:hsl(165 56% 12%);
  padding:10px 23px;
  border-radius:10px;
  font-weight:600;
  font-size:1.1rem;
  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:24px;height:24px }
.gw-topnav .cart-badge{
  background:hsl(165 56% 12%);
  color:hsl(41 56% 92%);
  border-radius:999px;
  padding:2px 10px;
  font-size:0.9rem;
  min-width:24px;
  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:10px 18px;
  font-family:'Heebo','Assistant',Arial,sans-serif;
  font-size:1.05rem;
}
.gw-topnav-logout:hover{ opacity:1 }

/* ---- Mobile (≤760px) — single-row, fully responsive (clamp/vw) layout ----
   Order RTL: brand → 4 nav links → settings button → cart → (logout hidden).
   All sizing uses clamp(min, vw, max) so the bar scales with the device width.
   The 30% desktop bump does NOT apply to mobile — phone width is too tight. */
@media (max-width: 760px){
  .gw-topnav{
    padding: clamp(5px, 1.4vw, 10px) clamp(5px, 1.6vw, 12px);
    gap: clamp(0px, 0.5vw, 4px);
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: center;
  }
  .gw-topnav-brand{
    font-size: clamp(0.72rem, 2.9vw, 1.1rem);
    margin-left: clamp(2px, 0.6vw, 5px);
    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.7vw, 6px) clamp(3px, 0.9vw, 6px);
    font-size: clamp(0.6rem, 2.35vw, 0.86rem);
    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, 0.9vw, 6px) clamp(5px, 1.6vw, 9px);
    margin-inline-start: 0;
    flex-shrink: 0;
  }
  .gw-topnav .cart-link span:not(.cart-badge){ display: none }
  .gw-topnav .cart-link svg{
    width: clamp(13px, 3.6vw, 17px);
    height: clamp(13px, 3.6vw, 17px);
  }
  .gw-topnav .cart-badge{
    padding: 0 clamp(4px, 1.3vw, 6px);
    font-size: clamp(0.55rem, 2vw, 0.72rem);
    min-width: clamp(13px, 3.6vw, 17px);
  }
  /* Logout removed from the toolbar on mobile (owner request 2026-05-10) */
  .gw-topnav .gw-topnav-logout{ display: none }
}

/* ---- Reserve top space for the FIXED topbar ----
   Only pages that actually contain a <nav class="gw-topnav"> get the padding,
   so landing/login/signup (no topbar) aren't affected. */
body:has(.gw-topnav){ padding-top: 60px; }
@media (max-width: 760px){
  body:has(.gw-topnav){ padding-top: 46px; }
}

/* ==========================================================================
   UNIFIED NAV (.gwnav) — the single nav bar used across the whole product.
   Literal copy of the landing nav (backend/landing.html .header). Same bar +
   logo everywhere; each page only swaps the links/buttons inside .gwnav-inner.
   Lives here (the shared topbar file) so React pages AND the static seating
   page render it identically. Edit ONCE here; never fork per page.
   ========================================================================== */
.gwnav{
  height:72px;
  background:hsl(165 56% 12%);
  box-shadow:0 5px 20px rgba(0,0,0,0.14);
  position:sticky;
  top:0;
  z-index:1000;
  direction:rtl;
}
.gwnav-inner{
  max-width:1320px;
  height:100%;
  margin:0 auto;
  padding:0 32px;
  display:flex;
  align-items:center;
  gap:13px;
}
.gwnav-logo{
  font-family:'Cormorant Garamond','Frank Ruhl Libre',serif;
  font-size:34px;
  font-weight:500;
  line-height:1;
  color:hsl(41 56% 92%);
  letter-spacing:normal;
  white-space:nowrap;
  text-decoration:none;
}
.gwnav-logo span{ color:hsl(31 41% 59%); font-size:26px; }
/* links centered between logo (right) and actions (left) via two auto margins */
.gwnav-links{
  display:flex;
  justify-content:center;
  gap:13px;
  font-size:16px;
  color:hsl(41 56% 92%);
  margin-inline-start:auto;
}
.gwnav-links a{
  color:hsl(41 56% 92%);
  padding:10px 21px;
  border-radius:10px;
  font-weight:500;
  text-decoration:none;
  transition:background .15s;
}
.gwnav-links a:hover{ background:rgba(255,255,255,.1); }
.gwnav-links a.active{
  background:linear-gradient(180deg,#FFFBF1,#F2E8D0);
  color:hsl(165 56% 12%);
  font-weight:600;
}
.gwnav-actions{
  margin-inline-start:auto;
  display:flex;
  align-items:center;
  gap:13px;
}
.gwnav-btn{
  color:hsl(41 56% 92%);
  background:transparent;
  border:0;
  padding:10px 18px;
  border-radius:10px;
  font-size:16px;
  font-weight:500;
  font-family:'Heebo','Assistant',Arial,sans-serif;
  cursor:pointer;
  text-decoration:none;
  transition:background .15s;
}
.gwnav-btn:hover{ background:rgba(255,255,255,.1); }
.gwnav-cart{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(180deg,#FFFBF1,#F2E8D0);
  color:hsl(165 56% 12%);
  border:0;
  border-radius:10px;
  padding:10px 20px;
  font-size:16px;
  font-weight:600;
  font-family:'Heebo','Assistant',Arial,sans-serif;
  cursor:pointer;
  text-decoration:none;
}
.gwnav-cart svg{ width:22px; height:22px; }
.gwnav-cart .cart-badge{
  background:hsl(165 56% 12%);
  color:hsl(41 56% 92%);
  border-radius:999px;
  padding:2px 9px;
  font-size:0.85rem;
  min-width:22px;
  text-align:center;
}
.gwnav-logout{
  background:none;
  border:0;
  color:hsl(41 56% 92%);
  opacity:.75;
  padding:10px 16px;
  font-size:15px;
  font-family:'Heebo','Assistant',Arial,sans-serif;
  cursor:pointer;
  text-decoration:none;
}
.gwnav-logout:hover{ opacity:1; }
/* fixed/sticky bar: reserve top space so content doesn't underlap */
body:has(.gwnav){ padding-top:0; }
/* mobile: shrink so the single row still fits; hide logout (matches old bar) */
@media (max-width:760px){
  .gwnav{ height:54px; }
  .gwnav-inner{ padding:0 12px; gap:4px; }
  .gwnav-logo{ font-size:22px; }
  .gwnav-logo span{ font-size:17px; }
  .gwnav-links{ gap:2px; font-size:13px; }
  .gwnav-links a{ padding:6px 8px; }
  .gwnav-btn{ padding:6px 8px; font-size:13px; }
  .gwnav-cart{ padding:6px 10px; font-size:13px; gap:6px; }
  .gwnav-cart span:not(.cart-badge){ display:none; }
  .gwnav-cart svg{ width:16px; height:16px; }
  .gwnav-logout{ display:none; }
}