/* Top bar layout: left search, right buttons */
#topBar{
  position:absolute; top:0.375rem; left:0.625rem; right:0.625rem; z-index:1000;
  display:flex; align-items:center; gap:0.375rem; flex-wrap: wrap;
}
/* Reset old absolute positions inside top bar */
#topBar #searchPanel, #topBar #buttonPanel{ position: static !important; }
/* Ensure search block is first, buttons second */
#topBar #searchPanel{ order:1; display:flex; align-items:center; gap:0.375rem; flex:1 1 auto; }
#topBar #buttonPanel{ order:2; display:flex; gap:0.3125rem; }
/* Flexible search input: grows/shrinks with width */
#topBar #searchInput{ flex:1 1 auto; min-width:6.25rem; width:auto !important; }
/* Second row: Add Spot button alone */
#topBar #addSpotRow{ order:3; flex: 1 0 100%; display:flex; margin-top:0.25rem; justify-content:flex-end; gap:0.3125rem; }
#topBar #addSpotRow #addSpotBtn{ margin-left:0; }
/* On wide screens, push right buttons to the edge (separate from search button) */
@media (min-width: 37.5rem){
  #topBar #buttonPanel{ margin-left:auto; }
}
/* Compact: when search is at min width, place addSpotRow before buttonPanel */
#topBar.compact #addSpotRow{ order:2; }
#topBar.compact #buttonPanel{ order:3; }
/* On small screens, keep all buttons adjacent with minimal gap */
@media (max-width: 37.4988rem){
  #topBar{ gap:0.375rem; }
  #topBar #buttonPanel{ margin-left:0; }
}

/* Mobile: move draw status lower so it doesn't cover top buttons */
@media (max-width: 48rem){
  #drawStatus{ top: 3.625rem; }
}