/* ============================================================
   SutraHub — global top bar.
   Appears on every page, so this is the highest-leverage surface.
   Structure: [logo + wordmark] [breadcrumb] [search] ....... [actions]
   ============================================================ */

#navbar {
  position: sticky; top: 0; z-index: 600;
  display: flex !important;
  align-items: center;
  gap: 14px;
  height: 60px;
  padding: 0 18px !important;
  margin: 0 !important;
  background: var(--sh-surface) !important;
  border-bottom: 1px solid var(--sh-border) !important;
  box-shadow: none !important;
}

/* ---- left cluster: brand ---- */
#navbar .navbar-left {
  display: flex !important; align-items: center; gap: 10px;
  margin: 0 !important; padding: 0 !important;
  background: none !important; border: none !important;
  flex: 0 0 auto;
}
#navbar .navbar-left > a.item {
  display: flex !important; align-items: center;
  padding: 0 !important; margin: 0 !important;
  background: none !important;
}
#navbar .navbar-left img, #navbar .sh-brand img {
  width: 28px !important; height: 28px !important;
  object-fit: contain;
}
/* wordmark next to the mark — Forgejo gives the brand link no class,
   so footer.tmpl tags it .sh-brand at runtime */
#navbar .sh-brand::after {
  content: "SutraHub";
  font-size: 17px; font-weight: 700; letter-spacing: -.02em;
  background: var(--sh-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 9px;
}
@media (max-width: 640px) { #navbar .sh-brand::after { display: none; } }

/* ---- breadcrumb (injected by footer.tmpl script) ---- */
.sh-crumb {
  display: flex; align-items: center; gap: 8px;
  padding-left: 15px; border-left: 1px solid var(--sh-border);
  font-size: 14.5px; color: var(--sh-text); white-space: nowrap;
  flex: 0 0 auto;
}
.sh-crumb a { color: var(--sh-text) !important; }
.sh-crumb a:hover { color: var(--sh-accent) !important; }
.sh-crumb .sh-sep { color: var(--sh-text-dim); }
.sh-crumb strong { font-weight: 650; }
.sh-crumb .sh-vis {
  font-size: 11.5px; font-weight: 500; padding: 2px 9px;
  border: 1px solid var(--sh-border); border-radius: 999px;
  color: var(--sh-text-dim);
}

/* ---- centred search (injected) ---- */
.sh-search {
  flex: 1 1 auto;
  max-width: 460px;
  margin: 0 auto;
  position: relative;
  display: flex; align-items: center;
}
.sh-search .svg {
  position: absolute; left: 11px; color: var(--sh-text-dim); pointer-events: none;
}
.sh-search input {
  width: 100%; height: 36px;
  padding: 0 34px 0 34px !important;
  border-radius: 8px !important;
  background: var(--sh-surface-2) !important;
  border: 1px solid var(--sh-border) !important;
  color: var(--sh-text) !important;
  font-size: 14px;
  transition: border-color 140ms ease, box-shadow 140ms ease !important;
}
.sh-search input::placeholder { color: var(--sh-text-dim); }
.sh-search input:focus {
  border-color: var(--sh-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sh-accent) 18%, transparent) !important;
}
.sh-search kbd {
  position: absolute; right: 9px;
  font-size: 11px; font-family: inherit; color: var(--sh-text-dim);
  border: 1px solid var(--sh-border); border-radius: 5px;
  padding: 1px 6px; background: var(--sh-surface);
}
@media (max-width: 860px) { .sh-search { display: none; } }

/* ---- the plain nav links: Issues / Pull requests / Milestones / Explore ---- */
#navbar > a.item {
  padding: 7px 11px !important;
  margin: 0 !important;
  border-radius: 8px;
  color: var(--sh-text-dim) !important;
  font-size: 14px; font-weight: 500;
  background: none !important;
  transition: background-color 140ms ease, color 140ms ease;
  flex: 0 0 auto;
}
#navbar > a.item:hover { background: var(--sh-surface-2) !important; color: var(--sh-text) !important; }
#navbar > a.item.active { color: var(--sh-text) !important; font-weight: 600; }

/* ---- right cluster ---- */
#navbar .navbar-right {
  display: flex !important; align-items: center; gap: 4px;
  margin: 0 0 0 auto !important; padding: 0 !important;
  background: none !important; border: none !important;
  flex: 0 0 auto;
}
#navbar .navbar-right .item {
  display: flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px;
  padding: 0 8px !important; margin: 0 !important;
  border-radius: 8px;
  color: var(--sh-text-dim) !important;
  background: none !important;
  transition: background-color 140ms ease, color 140ms ease;
}
#navbar .navbar-right .item:hover { background: var(--sh-surface-2) !important; color: var(--sh-text) !important; }
#navbar .navbar-right img.ui.avatar, #navbar .navbar-right img { border-radius: 50% !important; }

/* notification bubble */
#navbar .notification_count {
  background: var(--sh-coral) !important;
  color: #fff !important;
  border: 2px solid var(--sh-surface) !important;
  font-size: 11px; font-weight: 600;
}

/* dropdown panels from the top bar */
#navbar .ui.dropdown .menu {
  background: var(--sh-surface) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--sh-shadow) !important;
  margin-top: 6px !important;
}

/* mobile toggle */
#navbar #navbar-expand-toggle { color: var(--sh-text-dim) !important; }

/* ---- when the navbar collapses on small screens ---- */
@media (max-width: 767px) {
  #navbar { flex-wrap: wrap; height: auto; padding: 8px 12px !important; }
  #navbar > a.item { min-height: 44px; }
}


/* ---- explicit ordering so injected nodes never displace the brand ---- */
#navbar .navbar-left { order: 0; }
#navbar .sh-search   { order: 1; }
#navbar > a.item     { order: 2; }
#navbar .navbar-right{ order: 3; margin-left: auto !important; }
#navbar .navbar-left > .sh-crumb { margin-left: 4px; }