/* Shared BottomUp top navbar (public + dashboards + viewer)
   Keep this file focused: only navbar/layout styles.
*/

:root{
  --pt-ink:#0f172a;
  --pt-muted:#64748b;
  --pt-border:rgba(15,23,42,0.10);
  --pt-card:rgba(255,255,255,0.78);
  --pt-card-solid:#ffffff;
  --pt-accent:#6c5ce7;
  --pt-shadow: 0 14px 34px rgba(15,23,42,0.08);
  --pt-shadow-sm: 0 6px 18px rgba(15,23,42,0.07);
  --pt-radius: 16px;
}

.pt-site-nav-wrap{
  margin-bottom: 18px;
}

header.site-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 16px;
  gap: 14px;
  flex-wrap: nowrap; /* preferred: single-row layout */
  border: 1px solid rgba(15,23,42,0.10);
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15,23,42,0.06);
  border-radius: var(--pt-radius);
}

.brand{ display:flex; align-items:center; gap:10px; min-width: 0; }
.brand img { width: 34px; height: 34px; border-radius: 10px; }
.brand-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 750;
  color: #ffffff;
  background: #111827;
  border: 1px solid rgba(15,23,42,0.12);
  letter-spacing: -0.2px;
  flex: 0 0 auto;
}
.brand > div{ min-width:0; }
.brand .name { font-size: 18px; font-weight: 750; color: var(--pt-accent); letter-spacing: -0.3px; white-space: nowrap; }
.brand .tag { font-size: 12px; color: var(--pt-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pt-site-header-spacer{ flex:1 1 auto; min-width: 12px; }

nav.site-nav{
  display:flex;
  gap: 8px;
  flex-wrap: nowrap;   /* keep chips in one row */
  justify-content: flex-end;
  overflow-x: auto;    /* if viewport is tight, allow horizontal scroll */
  -webkit-overflow-scrolling: touch;
}

nav.site-nav a {
  padding: 6px 8px;
  border-radius: 999px;
  text-decoration:none;
  color: #0f172a;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 10px 18px rgba(15,23,42,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 650;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  flex: 0 0 auto;
}
nav.site-nav a:hover { background: rgba(255,255,255,1); border-color: rgba(15,23,42,0.14); transform: translateY(-1px); box-shadow: 0 14px 26px rgba(15,23,42,0.09); }

/* Active section chip (grey, like disabled dashboard chip) */
nav.site-nav a.nav-chip--active,
nav.site-nav a.nav-chip--active:hover,
nav.site-nav a.nav-chip--active[aria-disabled="true"],
nav.site-nav a.nav-chip--active[aria-disabled="true"]:hover{
  pointer-events: none;
  transform: none !important;
  background: #eef2f7 !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Login (light green) */
nav.site-nav a.nav-chip--login{
  background: rgba(17,24,39,0.92) !important; /* #111827 */
  border-color: rgba(17,24,39,0.92) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 18px rgba(15,23,42,0.10) !important;
}
nav.site-nav a.nav-chip--login:hover{
  background: rgba(17,24,39,1) !important;
  border-color: rgba(17,24,39,1) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 26px rgba(15,23,42,0.14) !important;
}

/* Register (black) */
nav.site-nav a.nav-chip--register{
  background: rgba(17,24,39,0.92) !important;
  border-color: rgba(17,24,39,0.92) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 18px rgba(15,23,42,0.10) !important;
}
nav.site-nav a.nav-chip--register:hover{
  background: rgba(17,24,39,1) !important;
  border-color: rgba(17,24,39,1) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 26px rgba(15,23,42,0.14) !important;
}

/* Logout (orange) */
nav.site-nav a.nav-chip--logout{
  background: rgba(249,115,22,0.95) !important;
  border-color: rgba(234,88,12,0.70) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 18px rgba(234,88,12,0.16) !important;
}
nav.site-nav a.nav-chip--logout:hover{
  background: rgba(249,115,22,1) !important;
  border-color: rgba(234,88,12,0.85) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 26px rgba(234,88,12,0.20) !important;
}

/* Recharge (teal) */
nav.site-nav a.nav-chip--recharge-active{
  background: #006d63 !important;
  border-color: #005c54 !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px rgba(0, 109, 99, 0.22) !important;
}
nav.site-nav a.nav-chip--recharge-active:hover{
  background: #005c54 !important;
  border-color: #004a44 !important;
  color: #ffffff !important;
  box-shadow: 0 18px 34px rgba(0, 109, 99, 0.26) !important;
}

@media (max-width: 900px){
  header.site-header{ flex-wrap: wrap; }
  nav.site-nav{ flex-wrap: wrap; overflow-x: visible; justify-content: center; }
  .brand{ width: 100%; justify-content: center; }
  .brand .tag{ max-width: 320px; text-wrap: balance; }
}