/* Custom style for active button */
.nav-button.active {
  background-color: #334155; /* slate-700 */
  color: white;
}
/* Adjusted style for content SVGs */
.content-svg {
  display: block; /* Prevents extra space below inline SVGs */
}
/* Ensure consistent nav button sizing */
.nav-button {
  width: 4rem; /* w-16 */
  height: 4rem; /* h-16 */
  padding: 0.5rem; /* p-2 */
  position: relative; /* For checkmark positioning */
}
/* Style for disabled buttons */
.nav-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.stave-container {
  position: relative;
}
.clef-overlay {
  position: absolute;
  pointer-events: none; /* Make it non-interactive */
}