#network-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10500;          /* above navbar (z-index ~1030 in Bootstrap) */
  padding: 7px 16px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
  transition: background-color 0.25s ease, transform 0.2s ease;
  pointer-events: none;    /* clicks pass through by default */
}

/* Allow pointer events only on the failed state (retry on click) */
#network-banner.banner--failed { pointer-events: auto; }

#network-banner.banner--offline  { background: #f0ad4e; color: #1a1a1a; }
#network-banner.banner--syncing  { background: #0d6efd; color: #fff; }
#network-banner.banner--synced   { background: #198754; color: #fff; }
#network-banner.banner--conflict { background: #fd7e14; color: #fff; }
#network-banner.banner--failed   { background: #dc3545; color: #fff; }

/* Push body content down when banner is visible so nothing is hidden under it */
body:has(#network-banner:not(.d-none)) {
  padding-top: 34px;
}